JSFiddle - React, Tailwind, and code Playground

by forresto

HTML

<canvas id="drawing"></canvas>
<div>press ↑ ↓ ← →</div>

JavaScript

// Keyboard interaction

var canvas = document.getElementById("drawing");
context = canvas.getContext("2d");

// p.size(400, 400);
canvas.width = 400;
canvas.height = 400;

var key;
var keyPressed = false;
var SPACE = 32;
var LEFT = 37;
var UP = 38;
var RIGHT = 39;
var DOWN = 40;
document.onkeydown = function (e) {
    key = e.keyCode;
    keyPressed = true;
};
document.onkeyup = function (e) {
    keyPressed = false;
};

var player = {};
player.x = canvas.width / 2;
player.y = canvas.height / 2;

context.fillRect(player.x, player.y, 5, 5);

draw = function () {
    if (keyPressed) {
        if (key === LEFT) {
            player.x--;
        }
        if (key === UP) {
            player.y--;
        }
        if (key === RIGHT) {
            player.x++;
        }
        if (key === DOWN) {
            player.y++;
        }
        context.fillRect(player.x, player.y, 5, 5);
    }
};

setInterval(draw, 1000 / 60);