JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<canvas id="canvas"></canvas>

JavaScript

function Spider() {
    this.x = 0;
    this.y = 0;
    this.width = 25;
    this.height = 20;
    this.rotation = 0;
    this.showFlame = false;
    this.shot = false;
    this.posx = 30;
}

function Fireball(context, shooter) {
    this.x = shooter.x + 20;
    this.y = shooter.y + 10;
    //console.log(this.x);

    /*    return setInterval(function() {
        this.draw();
    }, 1000);
*/
}

Fireball.prototype.draw = function () {
    console.log(this);
    console.log("this.x", this.x);
    var that = this;
    return (function move() {
    var rnd = Math.random();
    context.beginPath();
    context.moveTo(that.x, that.y);
    context.arc(that.x, that.y + 10, 5, 0, 2 * Math.PI, false);
    context.fillStyle = ((rnd) >= 0.5) ? "#f60" : "#007";
    context.fill();
    context.lineWidth = 10;
    context.strokeStyle = "#ff0";
    context.stroke;
    console.log('move');
        setTimeout(function(){
            //if (that.x > 200) return delete that;
            that.x += Math.random() * 4;
            that.y += Math.random() * 2;
            move();
        }, Math.random() * 10);
    })();
};
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
var spider = new Spider();
var fb = new Fireball(context, spider);
fb.draw();