Simple dodging game

"use strict";

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var screenRect;

var colours = ["#000000", "#FF0000", "#FFA500" , "#00FF00"];

var ldown, udown, rdown, ddown, odown;
var player, enemies, score;

var intervalID;

function resize()
{
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    screenRect.w = canvas.width - 20;
    screenRect.h = canvas.height - 20;

    player.rect.w = player.rect.h = canvas.height / 20;
    if (player.rect.x + player.rect.w > screenRect.x + screenRect.w)
    {
        player.rect.x = screenRect.x + screenRect.w - player.rect.w;
    }
    if (player.rect.y + player.rect.h > screenRect.y + screenRect.h)
    {
        player.rect.y = screenRect.y + screenRect.h - player.rect.h;
    }
}

$(document).keydown(function(e)
{
    odown = true;
    switch(e.keyCode)
    {
        case 37:
            ldown = true;
            break;
        case 38:
            udown = true;
            break;
        case 39:
            rdown = true;
            break;
        case 40:
            ddown = true;
            break;
    }
});

$(document).keyup(function(e)
{
    switch(e.keyCode)
    {
        case 37:
            ldown = false;
            break;
        case 38:
            udown = false;
            break;
        case 39:
            rdown = false;
            break;
        case 40:
            ddown = false;
            break;
        default:
            odown = false;
    }
});

function rect(x,y,width,height)
{
    this.x = x;
    this.y = y;
    this.w = width;
    this.h = height;

    this.fill = function()
    {
        context.fillRect(this.x + rect.xoffset, this.y + rect.yoffset, this.w, this.h);
    }
}

function checkColliding(rect1, rect2)
{
    return !(rect2.x >= rect1.x + rect1.w ||
             rect2.x + rect2.w <= rect1.x ||
             rect2.y >= rect1.y + rect1.h ||
             rect2.y + rect2.h <= rect1.y);
}

function drawBackground()
{
    context.fillStyle = colours[player.lives];
    context.fillRect(0,0, canvas.width, canvas.height);

    context.fillStyle = "#FFFFFF";
    screenRect.fill();
}

function Character()
{
    this.lives = 3;
    this.rect = new rect(canvas.width / 2, canvas.height / 2 ,canvas.height / 20, canvas.height / 20);

    this.xvel = 0;
    this.yvel = 0;

    this.invtimer = 0;

    this.draw = function()
    {
        if (this.invtimer % 10 < 5) this.rect.fill();
    }

    this.move = function()
    {
        if (this.invtimer > 0) (this.invtimer)--;

        if (udown && this.yvel > -8)
        {
            if (this.yvel > 2) this.yvel /= 2;
            else this.yvel -= 0.3;
        }
        else if (ddown && this.yvel < 8)
        {
            if (this.yvel < -2) this.yvel /= 2;
            else this.yvel += 0.3;
        }
        else this.yvel *= 0.8;

        if (ldown && this.xvel > -8)
        {
            if (this.xvel > 2) this.xvel /= 2;
            else this.xvel -= 0.3;
        }
        else if (rdown && this.xvel < 8)
        {
            if (this.xvel < -2) this.xvel /= 2;
            else this.xvel += 0.3;
        }
        else this.xvel *= 0.8;

        if (Math.abs(this.xvel) < 0.1) this.xvel = 0;
        if (Math.abs(this.yvel) < 0.1) this.yvel = 0;

        this.rect.x += this.xvel;
        this.rect.y += this.yvel;

        if (this.rect.x < screenRect.x || this.rect.x + this.rect.w > screenRect.x + screenRect.w)
        {
            this.xvel *= -1;
            this.rect.x += this.xvel;
        }

        if (this.rect.y < screenRect.y || this.rect.y + this.rect.h > screenRect.y + screenRect.h)
        {
            this.yvel *= -1;
            this.rect.y += this.yvel;
        }
    }
}

var enemies = [];

//returns a randomly generated obstacle
function Enemy()
{
    var direction = Math.random();
    if (direction > 0.5) //horizontal
    {
        this.yvel = 0;

        var w = (Math.random() * canvas.width / 3) + 16;
        var h = (Math.random() * canvas.height / 4) + 16;
        var y = Math.random() * (screenRect.h - h) + screenRect.y;
        var x;

        if (direction > 0.75) //left to right
        {
            x = -w + screenRect.x;
            this.xvel = Math.random() * 4 + 5;
        }

        else //right to left
        {
            x = screenRect.x + screenRect.w;
            this.xvel = -Math.random() * 4 - 5;
        }

        this.rect = new rect(x,y,w,h);
    }
    else //vertical
    {
        this.xvel = 0;
        var w = (Math.random() * canvas.width / 4) + 16;
        var h = (Math.random() * canvas.height / 4) + 16;
        var x = Math.random() * (screenRect.w - w) + screenRect.x;

        if (direction > 0.25) //top to bottom
        {
            y = -h + screenRect.y;
            this.yvel = Math.random() * 2 + 6;
        }

        else //going up
        {
            y = screenRect.y + screenRect.h;
            this.yvel = -Math.random() * 2 - 6;
        }

        this.rect = new rect(x,y,w,h);
    }

    this.update = function()
    {
        this.rect.x += this.xvel;
        this.rect.y += this.yvel;

        if (!checkColliding(this.rect, screenRect))
        {
            enemies.splice(enemies.indexOf(this), 1);
            score++;
        }
    }

    this.draw = function()
    {
        this.rect.fill();
    }
}

function drawEnemies()
{
    for (var i = 0; i < enemies.length; i++)
    {
        enemies[i].draw();
    }
}

function updateEnemies()
{
    for (var i = 0; i < enemies.length; i++)
    {
        enemies[i].update();
    }
}

function render()
{
    context.clearRect(0, 0, canvas.width, canvas.height);

    if (render.shaketime > 0)
    {
        render.shaketime--;
        rect.xoffset = Math.random() * 8 - 4;
        rect.yoffset = Math.random() * 8 - 4;
        if (render.shaketime == 0) rect.xoffset = rect.yoffset = 0;
    }

    drawBackground();

    context.fillStyle = colours[player.lives];
    context.fillText(score, screenRect.x + 20, screenRect.y + 60);
    player.draw();
    drawEnemies();
}

function update()
{
    render();
    player.move();

    if (++(update.spawncounter) >= update.spawntime)
    {
        enemies.push(new Enemy());
        update.spawncounter = 0;
        if (update.spawntime > 30) update.spawntime -= 10;
    }
    updateEnemies();

    checkCollisions();
}

function checkCollisions()
{
    if (player.invtimer == 0)
    {
        for (var i = 0; i < enemies.length; i++)
        {
            if (checkColliding(enemies[i].rect, player.rect))
            {
                if (player.lives == 1)
                {
                    clearInterval(intervalID);
                    setTimeout(gameOver, 1000/60 + 1);
                }

                player.invtimer = 200;
                render.shaketime = 100;
                (player.lives)--;
            }
        }
    }
}

function gameLoop()
{
    update();
    render();
}

function gameOver()
{
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "#FF0000";
    context.fillRect(0,0, canvas.width, canvas.height);

    context.fillStyle = "#FFFFFF";
    screenRect.fill();

    context.fillStyle = "#FF0000";
    context.textAlign = "center";
    context.font = "64px Comic Sans MS";
    context.fillText("You scored " + score, canvas.width / 2, canvas.height / 2);

    odown = false;
    startGameOnPress.intervalid = window.setInterval(startGameOnPress, 1000 / 60);
}

function initGame()
{
    player = new Character();

    screenRect = new rect(10,10, 0, 0);

    window.addEventListener('resize', resize, false);
    resize();

    ldown = rdown = udown = ddown = odown = false;
    score = 0;

    rect.xoffset = rect.yoffset = 0;
    render.shaketime = 0;

    update.spawntime = 200;
    update.spawncounter = update.spawntime - 40;
    enemies = [];

    context.font = "64px Comic Sans MS";
    intervalID = window.setInterval(gameLoop, 1000 / 60);
}

function startGameOnPress()
{
    if (odown)
    {
        clearInterval(startGameOnPress.intervalid);
        initGame();
    }
}

function start()
{
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    context.fillStyle = "#00FF00";
    context.fillRect(0,0, window.innerWidth, window.innerHeight);

    context.fillStyle = "#FFFFFF";
    context.fillRect(10,10, window.innerWidth - 20, window.innerHeight - 20);

    context.font = "64px Comic Sans MS";
    context.fillStyle = "#00FF00";
    context.textAlign = "center";
    context.fillText("Dodge", window.innerWidth/2, window.innerHeight/2);
    odown = false;

    startGameOnPress.intervalid = window.setInterval(startGameOnPress, 1000 / 60);
}

start();