race.html

	<div id="images">
		<img id="image_lisa" width="32" height="32" src="lisa.png">
		<img id="image_meggie" width="32" height="32" src="meggie.png">
	</div>
	<canvas id="canvas" width="854" height="480"></canvas>

	<script type="text/javascript">
		var Game = function() {
			var canvas = document.getElementById('canvas');
			this.ctx = canvas.getContext('2d');
			this.height = parseInt(canvas.attributes.height.value);
			this.width = parseInt(canvas.attributes.width.value);

			this.mouse = {};
			canvas.addEventListener('mousemove', this.mouseMove.bind(this));

			window.graphics = new Graphics(this.ctx, this.width, this.height);

			this.objects = [];
			this.objects.push(new Player(0, 'image_lisa'));
			this.objects.push(new Player(1, 'image_meggie'));

			this.update();
		};

		Game.prototype.update = function() {
			for(var i = 0; i < this.objects.length; i++) {
				this.objects[i].update();
			}

			this.render();

			setTimeout(this.update.bind(this), 16);
		};

		Game.prototype.render = function() {
			graphics.clearScreen();

			for(var i = 0; i < this.objects.length; i++) {
				this.objects[i].render();
			}
		};

		Game.prototype.mouseMove = function(e) {
		};

		var Graphics = function(ctx, width, height) {
			this.ctx = ctx;
			this.width = width;
			this.height = height;
			this.images = {};
		};

		Graphics.prototype.clearScreen = function() {
			this.ctx.clearRect(0, 0, this.width, this.height);
			this.drawRect(0, 0, this.width, this.height);
		};

		Graphics.prototype.drawRect = function(x, y, w, h, c, a) {
			if(typeof c === 'undefined') c = '#000';
			if(typeof a === 'undefined') a = 1;

			this.ctx.fillStyle = c;
			this.ctx.globalAlpha = a;
			this.ctx.fillRect(x, y, w, h);
		};

		Graphics.prototype.drawOutline = function(x, y, w, h, c, a) {
			if(typeof c === 'undefined') c = '#000';
			if(typeof a === 'undefined') a = 1;

			this.ctx.strokeStyle = c;
			this.ctx.globalAlpha = a;
			this.ctx.strokeRect(x, y, w, h);
		};

		Graphics.prototype.drawImage = function(imageId, x, y) {
			this.ctx.drawImage(this.getImage(imageId), x, y);
		};

		Graphics.prototype.getImage = function(imageId) {
			if(typeof this.images[imageId] === 'undefined') {
				var image = document.getElementById(imageId);
				if(image === null) {
					console.error('Image with id ' + imageId + ' was not found');
					return undefined;
				}
				this.images[imageId] = image;
			}
			return this.images[imageId];
		};

		var Player = function(row, imageId) {
			var image = graphics.getImage(imageId);
			this.imageId = imageId;
			this.x = 0;
			this.y = row * image.height;
		};

		Player.prototype.update = function() {
		};

		Player.prototype.render = function() {
			graphics.drawImage(this.imageId, this.x, this.y);
		};

		var Dice = function() {
			this.x = 64;
			this.y = 256;
		}

		Dice.prototype.update = function() {
		};

		Dice.prototype.render = function() {
		};

		window.onload = function() {
			window.game = new Game();
		}
	</script>