← Back to Home

rogue update I

Just messing around wasting time in javascript :c

Use WASD to move around (breaking bounds will break bounds). ib the legendary Rogue. Doing some dirty innerHTML swapping to "render" the world with ,. for grass. Planning on separating entities into "layers", for example having items and enemies and the player exist on the "entities" layer.

Not much else planned -- maybe basic enemies, fantasy items?

click to focus!










View Source Code


<pre id="canvas" tabIndex="0"></pre>

<style>
#canvas {
    font-size: 14px;
    background-color: #101010;
    color: #f0f0f0;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    overflow-x: scroll
}
</style>

<script>

const el = (ident) => { return document.querySelector(ident); }

const canvas = el("#canvas");

const WORLD_WIDTH = 48;
const WORLD_HEIGHT = 18;
var world = [];
var entities = [];

const player = {
    x: WORLD_WIDTH / 2,
    y: WORLD_HEIGHT / 2,
    ch: "@",
}

function buildWorld() {
    for (let i = 0; i < WORLD_HEIGHT; i++) {
        let row = [];
        let empt = [];
        for (let j = 0; j < WORLD_WIDTH; j++) {
            row.push(Math.random() < 0.1 ? "," : ".");
            empt.push("");
        }
        world.push(row);
        entities.push(empt);
    }
}

function initPlayer() {
    entities[player.y][player.x] = player;
}

function renderPlayer(buffer) {
    buffer[player.y][player.x] = player.ch;
}

function refreshWorld() {

    // deep copy
    let buffer = world.map(r => r.slice());
    renderPlayer(buffer);

    canvas.innerHTML = buffer.map(r => r.join("")).join("\n");
}

canvas.addEventListener("keydown", (e) => {
    switch (e.key) {
        case "w":
            player.y -= 1;
            break;
        case "s":
            player.y += 1;
            break;
        case "a":
            player.x -= 1;
            break;
        case "d":
            player.x += 1;
            break;
    }

    refreshWorld();
});

buildWorld();
refreshWorld();

</script>