Snek baest gaem!

snek.js

/** Snek gaem
 * To use (vscode):
 * - open devtools
 * - inspect a line of code in editor in devtools
 * - enter command `var snek_parent_node = $0.parentElement;` This will select the correct parent/anchor
 * - copy and paste this entire file into console & enter
 * Controls:
 * - Arrow keys - change direction
 * - Escape - halt the snek
 * - To exit, "Reload window" in command palette
 */


/** @type {HTMLElement} */
var snek_parent_node; // This should be defined

var snek = document.createElement('div');
snek_parent_node.appendChild(snek);

var snek_cnv = (function(){
    const cnv = document.createElement('canvas');
    cnv.width = 900;
    cnv.height = 600;
    snek.appendChild(cnv);
    return cnv;
})();

var snek_ctx = snek_cnv.getContext('2d');

var snek_wh = [30, 20];
var snek_map = new Int16Array(snek_wh[0] * snek_wh[1]);

var conv_coord = function(x, y) {return x + snek_wh[0] * y; };

var snek_head = [/* position */ 0, 0, /* direction */ 1, 0, /* size */ 4];
var snek_apple = [0, 0];

var generate_apple = function() {
    snek_apple[0] = Math.floor(Math.random() * snek_wh[0]);
    snek_apple[1] = Math.floor(Math.random() * snek_wh[1]);
    snek_map[conv_coord(snek_apple[0], snek_apple[1])] = -1;
};
generate_apple();

var update = function() {
    const pos_new = [snek_head[0] + snek_head[2], snek_head[1] + snek_head[3]];
    if (pos_new[0] < 0 || pos_new[0] >= snek_wh[0] || pos_new[1] < 0 || pos_new[1] >= snek_wh[1]) {
        alert("game over");
        snek_head = [/* position */ 0, 0, /* direction */ 1, 0, /* size */ 4];
        return;
    }
    snek_head[0] = pos_new[0];
    snek_head[1] = pos_new[1];
    if (snek_map[conv_coord(snek_head[0], snek_head[1])] === -1) {
        ++snek_head[4];
        generate_apple();
    } else {
        for (let i = 0; i < snek_wh[0]*snek_wh[1]; ++i) {
            if (snek_map[i] > 0)
                --snek_map[i];
        }
    }
    snek_map[conv_coord(snek_head[0], snek_head[1])] = snek_head[4];
};

var draw = function() {
    const rx = snek_cnv.width / snek_wh[0], ry = snek_cnv.height / snek_wh[1];
    snek_ctx.clearRect(0, 0, snek_cnv.width, snek_cnv.height);
    snek_ctx.strokeStyle = '#C0C0C0';
    snek_ctx.lineWidth = 5;
    snek_ctx.strokeRect(0, 0, snek_cnv.width, snek_cnv.height);
    for (let y = 0; y < snek_wh[1]; ++y) {
        for (let x = 0; x < snek_wh[0]; ++x) {
            const val = snek_map[conv_coord(x, y)];
            if (val > 0) {
                if (val === snek_head[4])
                    snek_ctx.fillStyle = '#FF0000';
                else
                    snek_ctx.fillStyle = '#FFFFFF';
                snek_ctx.fillRect(x*rx, y*ry, rx, ry);
            } else if (val === -1) {
                snek_ctx.fillStyle = '#00FF00';
                snek_ctx.fillRect(x*rx, y*ry, rx, ry);
            }
        }
    }
};

var step = function() {
    update();
    draw();
};

var step_h = setInterval(step, 500);

/** @param {KeyboardEvent} env */
var input = function(env) {
    if (env.key === 'ArrowRight') {
        snek_head[2] = 1;
        snek_head[3] = 0;
    } else if (env.key === 'ArrowDown') {
        snek_head[2] = 0;
        snek_head[3] = 1;
    } else if (env.key === 'ArrowLeft') {
        snek_head[2] = -1;
        snek_head[3] = 0;
    } else if (env.key === 'ArrowUp') {
        snek_head[2] = 0;
        snek_head[3] = -1;
    } else if (env.key === 'Escape') {
        // Stop movement
        snek_head[2] = 0;
        snek_head[3] = 0;
    }
};

document.addEventListener('keydown', input);