Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Race</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            width: 854px;
            height: 480px;
            margin: 0 auto;
        }
        #images {
            display: none;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>