JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="player" width=1300 height=550 style="border: 1px solid black" />
<canvas id="gui" width=500 height=400 />

CSS

canvas {
    background: black;
}

JavaScript

//created by Nathan Piper
var fps = 60;
var width = 1300;
var height = 550;
var mines = [];
var coins = [];
var gameState = "menu";
var time = 0;
var countDown = 3;
var fuel = 100;

//The Canvas Elements
var pG = document.getElementById("player").getContext('2d');
var GUI = document.getElementById("gui").getContext('2d');

//The Player Object That Holds All Of Its Properties
var player = {
    x: width / 2 - 20,
    y: height - 20,
    speed: 5,
    width: 10,
    height: 10,
    render: function () {
        pG.fillStyle = "aqua";
        pG.fillRect(this.x, this.y, this.width, this.height);
    },
    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;
    }
}
    
//The Green Bar That Tells The Fuel Amount
    var fuelBar = {
    x: 2,
    y: 60,
    width: fuel,
    height:15,
    render: function () {
    pG.fillStyle = "#00FF04";
    pG.fillRect(this.x, this.y, this.width, this.height);
},
}

//The Object That Holds The Key Properties
var Key = {
    up: false,
    down: false,
    right: false,
    left: false,
    space: false,
    enter: false
}

//What Happens When You Press The Key
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 39:
            Key.right = true;
            break;
        case 37:
            Key.left = true;
            break;
        case 32:
            Key.space = true;
            break;
        case 13:
            Key.enter = true;
            break;
    }
}, false);

//What Happens When You Release The Key
addEventListener("keyup", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;

   ...