JSFiddle - React, Tailwind, and code Playground

by Tgwizman

HTML

<canvas id="c"></canvas>

<input type="text" id="input" />

CSS

* {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

#input {
    display: none;
}

JavaScript

function $(t){return document.getElementById(t)}

var c = $('c'),
    ctx = c.getContext('2d'),
    input = $('input'),
    keys = [
        [49, 50, 51, 52, 53, 54, 55, 56, 57, 48, 189, 187],
        [81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 219, 221, 220],
        [65, 83, 68, 70, 71, 72, 74, 75, 76, 186, 222],
        [90, 88, 67, 86, 66, 78, 77, 188, 190, 191]
    ],
    player = {pos: [0,0], c: "#FFF"};

document.onkeydown = function(e) {
    for (y=0;y<keys.length;y++) {
        x = keys[y].indexOf(e.keyCode);
        if (x >= 0) {
            if (player.pos[0] > x) {
                player.pos[0] -= 1
            } else if (player.pos[0] < x) {
                player.pos[0] += 1;
            } else if (player.pos[1] > y) {
                player.pos[1] -= 1;
            } else if (player.pos[1] < y) {
                player.pos[1] += 1;
            }
        }
    }
};

function loop() {
    input.focus();
    console.log(input.value);

    c.width = window.innerWidth;
    c.height = window.innerHeight;
    
    ctx.fillStyle = player.c;
    ctx.fillRect(player.pos[0] * 50, c.height/2 - 75 + 50*player.pos[1], 50, 50);
    
    window.requestAnimationFrame(loop);
}

window.onload = loop;