JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="background" width=500 height=400 style="border: 1px solid black"></canvas>

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

<canvas id="player2" width=500 height=400 style="border: 1px solid black"></canvas>

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

CSS

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
#background {
    background: black;
}

JavaScript

var fps = 60;
var width = 500;
var height = 400;
var bullets = [];
var shootTime = 0;
var maxShootTime = 15;
var gameState = "menu";
/////////////////////
function canvas(id) {
    return document.getElementById(id).getContext('2d');
}

var pG = canvas("player");
var p2G = canvas('player2');
var bG = canvas('background');
var gui = canvas("gui");

function collision(obj1, obj2) {
    return (
    obj1.x < obj2.x + obj2.width && 
        obj1.x + obj1.width > obj2.x && 
        obj1.y < obj2.y + obj2.height && 
        obj1.y + obj1.height > obj2.y)
}

var player = {
    x: 0,
    y: 0,
    speed: 5,
    width: 20,
    height: 20,
    canShoot: true,
    render: function () {
        pG.fillStyle = 'blue';
        pG.fillRect(this.x, this.y, this.width, this.height);
    },
    update: function() {
        if(Key.w && this.y > 0) this.y -= this.speed;
        if(Key.s && this.y < height-this.height) this.y += this.speed;
        if(Key.d && this.canShoot){
            this.canShoot = false;            
            bullets.push(new Bullet(this.x+15, this.y+10, "right"));
            shootTime = maxShootTime;
        }
    }
}

function jsndkjand(){

}

var enemy = {
    x: width-20,
    y: width / 2,
    speed: 4,
    canShoot: true,
    width: 20,
    height: 20,
    render: function () {
        p2G.fillStyle = 'red';
        p2G.fillRect(this.x, this.y, this.width, this.height);
    },
    update: function() {
        if(this.canShoot){
            this.canShoot = false;
            bullets.push(new Bullet(this.x-10, this.y+10, "left"));
            shootTime = maxShootTime;
        }
        if(player.y < this.y){
            this.y -= this.speed;
        }
        if(player.y > this.y){
            this.y += this.speed;
        }
    }
}

var player2 = {
    x: width-20,
    y: width / 2,
    speed: 5,
    canShoot: true,
    width: 20,
    height: 20,
    render: function () {
        p2G.fillStyle = 'red';
        p2G.fillRect(this.x, this.y, this.width,...