JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="background" width=500 height=400></canvas>
<canvas id="player" width=500 height=400></canvas>
<canvas id="enemies" width=500 height=400></canvas>
<canvas id="gui" width=500 height=400></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 stars = [];
var bullets = [];
var enemies = [];
var maxShootTime = 23;
var shootTime = 0;
var level = 10;
var num = 2;
var bossHealth = 60;
var playerHealth = 1;
var gamestate = "play";

function canvas(id) {
    return document.getElementById(id).getContext('2d');
}

var pG = canvas("player");
var bG = canvas("background");
var eG = canvas("enemies");
var gui = canvas("gui");

function collide(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 boss = {
    x: width / 2 - 100,
    y: 60,
    width: 80,
    height: 70,
    right: false,
    left: true,
    canshoot: true,
    speed: 5,
    render: function () {
        pG.fillStyle = 'red';
        pG.fillRect(this.x, this.y, this.width, this.height);
    },
    update: function () {
        if(collide()){}
        if(this.left === true){
            this.x-=this.speed;
        }
        if(this.x <= 0){
            this.left = false;
            this.right = true;
        }
        if(this.right === true){
            this.x+=this.speed;
        }
        if(this.x > width-this.width){
            this.left = true;
            this.right = false;
        }
        if(this.canshoot){
          /* bullets.push(new Bullet(this.x, this.y + this.height, "down"))
           bullets.push(new Bullet(this.x+this.width, this.y + this.height, "down"));
            bullets.push(new Bullet(this.x+20, this.y+this.height, "down"))
            bullets.push(new Bullet(this.x+60, this.y+this.width, "down"))
           this.canshoot = false;
            shootTime = maxShootTime;
            */
        }
        
    }
}

var healthBar = {
    x: width/2-240/2-20,
    y: 20,
    width: 240,
    height: 13,
    render: function () {
        pG.fillStyle = "#BA2727";
        pG.fillRect(this.x, this.y, this.width, this.height);
    },
    update: function () {}
}

var...