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: aqua;
}

JavaScript

var width = 500;
var height = 400;

var FPS = 60;

var gameState = "menu";

var canvas = document.getElementById('game');
var g = canvas.getContext('2d');

var x = 50;
var y = 50;

var lives = 3;

var coins = [];
var dummyCoins = [];

var player = { //the player object
    x: 50,
    y: 50,
    speed: 5,
    score: 0,
    width: 20,
    height: 20,
    tick: function () {
        if (Key.up && this.y > 0) this.y -= this.speed;
        if (Key.down && this.y < height - 20) this.y += this.speed;
        if (Key.left && this.x > 0) this.x -= this.speed;
        if (Key.right && this.x < width - 20) this.x += this.speed;
    },
    render: function () {
        g.fillStyle = 'black';
        g.fillRect(this.x, this.y, this.width, this.height);
    }


};

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

addEventListener("keydown", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;
    switch (keyCode) {
        case 38:
            //up
            Key.up = true;
            break;
        case 40:
            //down
            Key.down = true;
            break;
        case 37:
            //left
            Key.left = true;
            break;
        case 39:
            //right
            Key.right = true;
            break;
        case 32:
            Key.space = true;
            break;
        case 13:
            Key.enter = true;
            break;
    }
}, false);
addEventListener("keyup", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;
    switch (keyCode) {
        case 38:
            //up
            Key.up = false;
            break;
        case 40:
            //down
            Key.down = false;
            break;
        case 37:
            //left
            Key.left = false;
            break;
        case 39:
            //right
            Key.right = false;
            break;
             case 32:
            Key.space = false;
       ...