JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<canvas id="canvas" width="600" height="300"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function PlayerConstructor(options) {
    var coords = {
        'x': 0,
        'y': 140
    },
        maxPower = 3,
        //maxAcceleration = 0.1,
        movementForces = [/*{'direction': 0, 'friction': 1, 'power': maxPower}*/],
        obj = this;
    this.color = options.color;
    this.width = options.width;
    this.height = options.height;
    this.coords = (function () {
        return coords;
    })();
    this.friction = 0.04;
    this.moveRandom = function () {
        coords.x += 2 * (Math.random() * 2.2 - 1.05);
        coords.y += 2 * (Math.random() * 2.2 - 1.05);
    };
    this.move = function (options) {
        var newCoords = coords;
        for (i in movementForces) {
            if (/*movementForces.hasOwnPropery(i) &&*/ movementForces[i].power > 0) {
                //console.log(movementForces[i]);
                switch (movementForces[i].direction) {
                    case 0:
                        newCoords.x += movementForces[i].power;
                        movementForces[i].power -= movementForces[i].friction;
                        break;
                    case 180:
                        newCoords.x -= movementForces[i].power;
                        movementForces[i].power -= movementForces[i].friction;
                        break;
                }
            }
        }
        coords = newCoords;
    }
    this.addMovementForce = function (movementForce) {
        var createNewForce = true;
        //console.log('adding force');
        for (i in movementForces) {
            if (movementForces[i].direction === movementForce.direction) {
                //console.log(movementForces[i].direction);
                console.log(movementForces[i].power);
                movementForces[i].power +=...