JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<section>
            <div>
                <canvas id="canvas" width="800" height="600">
                    Your browser does not support HTML5.
                </canvas>
            </div>
        </section>

JavaScript

//Start of script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = 400;
var y = 0;
var direction = 0;
var mouseDown = false;
var gloop;
var shots = new Array;
var aliens = new Array;
aliens.push(new basicAlien());
var playerTurret = new (function() { //turret object
    var that = this;
    that.draw = function() {
        ctx.fillStyle = "red";
        ctx.strokeStyle = "red";
        ctx.rect(380, 540, 40, 60); //draw base
        ctx.fill();

        ctx.beginPath();
        ctx.arc(400, 540, 20, Math.PI, 2*Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.lineWidth="10";
        ctx.moveTo(400, 540);
        var tempX, tempY, temp;
        temp = getTrajectory(x, y);
        tempX = 35 * temp[0]; tempY = 35 * temp[1];
        ctx.lineTo(tempX + 400, 540 - tempY);
        ctx.stroke();
    }
});

function basicAlien() {
    var that = this;
    that.step = 0; that.bottom = false;
    that.vel = 2;
    that.pos = [(Math.random() * 740) + 30, -10];
    that.move = function() {
        if (that.pos[1] >= 250) {that.bottom = true;}
        if (!that.bottom) {
            that.pos[1] += that.vel;
        }
        else {
            if (that.step < 20) {
                that.pos[0] += that.vel;
            }
            else if (that.step < 40) {
                that.pos[1] -= that.vel;
            }
            else if (that.step < 60) {
                that.pos[0] -= that.vel;
            }
            else {
                that.pos[1] += that.vel;
            }
            that.step = (that.step+1)%80;
        }
    }
    that.draw = function() {
        ctx.fillStyle = "yellow";
        ctx.rect(that.pos[0] - 10, that.pos[1] - 5, 20, 10);
        ctx.fill();
    }
};

function shotObject(shotX, shotY) {
    var that = this;
    that.traj = getTrajectory(shotX, shotY);
    that.vel = 10;
    that.pos = [400, 540];
    that.draw = function() {
        ctx.fillStyle = "green";
        ctx.beginPath();
 ...