JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<canvas id=board width=1440 height=768></canvas>

CSS

html, body, canvas {
    margin: 0;
    padding:0;
}
canvas {
    background: lightgray;
    top: 0;
    bottom: 0;
    position: absolute;
}

JavaScript

/**
 * Created by theoutlander on 5/22/14.
 */

var Bot = function (options) {
    this.id = options.name || "bot";
    this.angle = options.angle || 0;
    this.x = options.x || 0;
    this.y = options.y || 0;
    this.speed = 30;
    this.lastTime = Date.now();
};

Bot.prototype = {

    move: function (ctx) {
        this.updateTimeBased(ctx, Date.now());
        this.render(ctx);
    },

    turn: function (angle) {
        this.angle = angle;
    },

    updateTimeBased: function (ctx, time) {
        var elapsedTime = time - this.lastTime;
        this.x += this.speed * (elapsedTime / 1000);
        this.lastTime = time;
    },

    render: function (ctx) {
        ctx.save();
        //if (this.angle) {
            ctx.rotate((Math.PI / 180) * this.angle);
        //}
        ctx.fillStyle = 'green';

        this.updateTimeBased(ctx, Date.now());
        ctx.fillRect(this.x, this.y, 50, 50);
        ctx.restore();
    }
};

var Arena = function (ctx) {
    this.ctx = ctx;
    this.Bots = [];
};

Arena.prototype = {
    addBot: function (bot) {
        this.Bots.push(bot);
    },

    renderBackground: function () {
        this.ctx.font = '38pt Arial';
        this.ctx.fillStyle = 'darkgray';
        this.ctx.strokeStyle = 'gray';
        this.ctx.fillText('BotJS', board.width / 2 - 50, board.height / 2 + 15);
        this.ctx.strokeText('BotJS', (board.width / 2) - 50, board.height / 2 + 15);
    },

    render: function () {
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

        for (var bot in this.Bots) {
            //console.log(this.Bots[bot].id + ", " + this.Bots[bot].rotate);
            this.Bots[bot].move(this.ctx);
        }
    }
};

var Engine = function (options) {

    this.ctx = options.gameBoard.getContext('2d');
    this.arena = new Arena(this.ctx);

    this.paused = true;
    this.lastTime = 0;
    this.showFps = options.showFps || false;

    this.arena.renderBackground();
};

Engine.prototype = {

...