JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id= 'game' width= 500 height= 400 style='border: 1px solid black'>

CSS

canvas{
    background: black;
    
}

JavaScript

var width = 500;
var height = 400;
var FPS = 60;
var canvas = document.getElementById('game');
var g = canvas.getContext('2d');

var player = {
    x: 100,
    y: 100,
    speed: 5,
    tick: function () {
        if(Key.up && this.y > 0) this.y -= this.speed;
        if(Key.down && this.y < height-8) this.y += this.speed;
        if(Key.right && this.x < width-8) this.x += this.speed;
        if(Key.left && this.x > 0) this.x -= this.speed;
    },
        render: function () {
            g.fillStyle = 'green'
        g.fillRect(this.x, this.y, 8, 8);
    }
};

var Key = {
    up: false,
    down: false,
    right: false,
    left: false
}

addEventListener('keydown', function (e) {
    var keyCode = (e.keyCode) ? e.keyCode: e.which;
    switch(keyCode){
        case 38:
            Key.up = true;
            break;
        case 40:
            Key.down = true;
            break;
        case 37:
            Key.left = true;
            break;
        case 39:
            Key.right = true;
            break;
    }
}, false)

addEventListener('keyup', function (e) {
    var keyCode = (e.keyCode) ? e.keyCode: e.which;
    switch(keyCode){
        case 38:
            Key.up = false;
            break;
        case 40:
            Key.down = false;
            break;
        case 37:
            Key.left = false;
            break;
        case 39:
            Key.right = false;
            break;
    }
}, false)

function render () {
    player.render();
}

function tick () {
    player.tick();
}

setInterval( function () {
    render();
    tick();
}, 1000/FPS);