Frame-based Animation

Simple program to show how frame-based animation can affect a game.

HTML

<div class="wrapper">
    <canvas id="canvas60" width="175" height="175"></canvas>
    <div class="fps">60 FPS</div>
</div>
<div class="wrapper">
    <canvas id="canvas30" width="175" height="175"></canvas>
    <div class="fps">30 FPS</div>
</div>
<div class="wrapper">
    <canvas id="canvas10" width="175" height="175"></canvas>
    <div class="fps">10 FPS</div>
</div>

CSS

.wrapper {
    float: left;
    margin: 10px;
}
canvas {
    border: 1px solid;
}
.fps {
    text-align: center;
}

JavaScript

var canvas60 = document.getElementById('canvas60');
var canvas30 = document.getElementById('canvas30');
var canvas10 = document.getElementById('canvas10');
var ctx60 = canvas60.getContext('2d');
var ctx30 = canvas30.getContext('2d');
var ctx10 = canvas10.getContext('2d');

var canvasWidth = canvas60.width;
var canvasHeight = canvas60.height;

ctx30.fillStyle = '#0000DD';
ctx10.fillStyle = '#DD0000';

var square60 = new Square(ctx60);
var square30 = new Square(ctx30);
var square10 = new Square(ctx10);

var counter = 0;

function Square(ctx) {
    this.x = 50;
    this.y = 50;
    this.dx = 2;
    this.dy = 1;
    this.width = 10;
    this.height = 10;
    this.ctx = ctx;
}

Square.prototype.move = function () {
    this.x += this.dx;
    this.y += this.dy;

    if (this.x <= 0 || this.x >= canvasWidth - this.width) this.dx = -this.dx;

    if (this.y <= 0 || this.y >= canvasHeight - this.height) this.dy = -this.dy;
}

Square.prototype.draw = function () {
    this.ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    this.ctx.fillRect(this.x, this.y, this.width, this.height);
}

var animate = (function () {
    return function (callback, element) {
        if (counter % 2 === 0) {
            animate30();
        }

        if (counter % 10 === 0) {
            animate10();
        }

        counter = ++counter % 60;

        window.setTimeout(callback, 1000 / 100);
    };
})();

function animate60() {
    animate(animate60);

    square60.move();
    square60.draw();
}

function animate30() {
    square30.move();
    square30.draw();
}

function animate10() {
    square10.move();
    square10.draw();
}

animate60();