JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<canvas id="canvas" width="600" height="400"></canvas>
<div id="log"></div>

CSS

canvas {
    box-shadow: 0 1px 1px 1px darkGray;
}

JavaScript

var canvas  = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    width   = canvas.width,
    height  = canvas.height,
    UNIT = 40,
    player;

var map = [
    "XXXXXXXXXXXXXXX",
    "X             X",
    "X X       X   X",
    "X   X         X",
    "X     X       X",
    "X       X     X",
    "X         X   X",
    "X           X X",
    "X             X",
    "XXXXXXXXXXXXXXX"
];

function Player(x, y) {
    this.x = x;
    this.y = y;
}
Player.prototype.draw = function() {
    context.fillStyle = 'blue';
    context.fillRect(this.x, this.y, UNIT, UNIT);
};

function drawMap() {
    context.fillStyle = 'black';
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            var char = map[i].charAt(j),
                x = j * UNIT,
                y = i * UNIT;
            if (char == 'X') {
                context.fillRect(x, y, UNIT, UNIT);
            }
        }
    }
}

function animate() {
    context.clearRect(0, 0, width, height);
    drawMap();
    player.draw();
    requestAnimationFrame(animate);
}

// RUN
player = new Player(UNIT, UNIT);
animate();


function find_obstacle(x, y) {
    return map[Math.round(y / 40)].charAt(Math.round(x / 40)) == 'X';
}

document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37: // Left
            if (!find_obstacle(player.x-UNIT, player.y)) {
                player.x -= UNIT;
            }
            break;
        case 38: // Up
            if (!find_obstacle(player.x, player.y-UNIT)) {
                player.y -= UNIT;
            }
            break;
        case 39: // Right
            if (!find_obstacle(player.x+UNIT, player.y)) {
                player.x += UNIT;
            }
            break;
        case 40: // Down
            if (!find_obstacle(player.x, player.y+UNIT)) {
                player.y += UNIT;
            }
            break;
    }
}, false);

function log(message) {
    var p...