HTML5 Game - Canvas Animation Explode

Description

Explode
Demo

<!DOCTYPE html>
<html><head>
  <script type="text/javascript">
function degreeToRadians(value) {
    return (value / 360) * 2 * Math.PI;//  ww  w .jav  a 2  s  .c o  m
}
vector = {
    _x: 0,
    _y: 0,
    create: function(x, y) {
        let obj = Object.create(this);
        obj._y = y;
        obj._x = x;
        return obj;
    },

    getX: function() {
        return this._x
    },
    getY: function() {
        return this._y
    },
    setX: function(value) {
        this._x = value;
    },
    setY: function(value) {
        this._y = value;
    },
    getLength: function() {
        return Math.sqrt(this._x * this._x + this._y * this._y)
    },
    getAngle: function() {
        return Math.atan2(this._y, this._x)
    },
    setAngle: function(angle) {
        length = this.getLength();
        this._y = Math.cos(angle) * length;
        this._x = Math.sin(angle) * length;
    },
    setLength: function(length) {
        angle = this.getAngle();
        this._y = Math.cos(angle) * length;
        this._x = Math.sin(angle) * length;
    },
    add: function(v2) {
        vect = this.create(this._x + v2._x, this._y + v2._y);
        return vect;
    },
    subtract: function(v2) {
        vect = this.create(this._x - v2._x, this._y - v2._y);
        return vect;
    },
    multiply: function(value) {
        return vector.create(this._x * value, this._y * value)
    },
    divide: function(value) {
        return vector.create(this._x / value, this._y / value)
    },
    scale: function(value) {
        this._x = this._x * value;
        this._y = this._y * value;
    },
    addTo: function(v2) {
        this._x = this._x + v2._x;
        this._y = this._y + v2._y
    },
    subtractFrom: function(v2) {
        this._x = this._x - v2._x;
        this._y = this._y - v2._y
    }
}
particle = {
    velocity: null,
    position: null,

    create: function(x, y, speed, angle) {
        console.log(x, y, speed, angle)
        let obj = Object.create(this);
        obj.velocity = vector.create(0, 0);

        obj.velocity.setLength(speed);
        obj.velocity.setAngle(angle);
        obj.position = vector.create(x, y);
        return obj;
    },

    update: function() {
        this.position.addTo(this.velocity);
    }

}
window.onload = function() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;

    particles = [];
    numparticles = 500;
    for (i = 0; i < numparticles; i++) {
        particles.push(particle.create(width / 2, 
                                       height / 2, 
                                       (Math.random() * 10) + 1, 
                                       Math.random() * Math.PI * 2))
    }

    update();

    function update() {
        context.clearRect(0, 0, width, height);
        for (let i = 0; i < numparticles; i++) {
            particles[i].update();
            context.beginPath();
            context.rect(particles[i].position.getX(), particles[i].position.getY(), 2, 2 );
            context.fill();
        }
        requestAnimationFrame(update);
    }
}

  </script>
</head>
<body>
<canvas id="canvas" width="1920" height="888">
  
</canvas>


</body></html>