HTML5 Tank Survival Game JS

// Author: Christopher M. Casey
// http://www.christophermcasey.com/

// === CONSTANTS === //
var RELEASE = true;
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var HALF_CANVAS_WIDTH = Math.floor(CANVAS_WIDTH/2);
var HALF_CANVAS_HEIGHT = Math.floor(CANVAS_HEIGHT/2);
var TANK_XOFFSET = Math.floor(CANVAS_WIDTH/8);
var CANVAS_BACKGROUND_COLOR = "#444444";
var MOBILE_FLAG = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
var WAIT_TO_LOAD_TIMEOUT = MOBILE_FLAG ? 0 : 60000;
// ================= //

var gInstructionText;

var gCanvas;
var gContext;
var gTimer;

var gCanvasLeft = 0;
var gCanvasTop = 0;

var gButtonPressed = false;

var gGameOver = 0;
var gGameOverShield = false;

var gMainMusic;
var gMainMusicLoaded = false;
var gExplosionSound;
var gExplosionSoundLoaded = false;

var gTankBodyImg;
var gTankGunImg;
var gGameOverImg;
var gGameWinImg;

var gPlayer;
var gPlayerMissiles = [];

var gParticles = [];
var gSmoke = [];
var gWalls = [];

var gPlayerSmokeGradient;
var gPlayerLightSmokeGradient;

function OnWindowResize()
{
    if (gCanvas)
    {
        if (MOBILE_FLAG)
        {
            gCanvasLeft = 0;
            gCanvasTop = 0;
            gCanvas.style.left = gCanvasLeft+"px";
            gCanvas.style.top = gCanvasTop+"px";
            gInstructionText.style.display = "none";
            window.scrollBy(0,50);
        }
        else
        {
            gCanvasLeft = window.innerWidth/2 - HALF_CANVAS_WIDTH;
            gCanvasTop = window.innerHeight/2 - HALF_CANVAS_HEIGHT;
            gCanvas.style.left = gCanvasLeft+"px";
            gCanvas.style.top = gCanvasTop+"px";

            gInstructionText.style.top = (gCanvasTop - 35) + "px";
            gInstructionText.style.left = gCanvasLeft + "px";
        }
    }
    return true;
}


function OnMouseDown(e)
{
    if (e.preventDefault)
        e.preventDefault();

    if (gGameOver>0 || gGameOverShield) return;

    if (MOBILE_FLAG)
    {
        gButtonPressed = true;
    }
    else
    {
        if (e.button == 0)
        {
            gButtonPressed = true;
        }
    }

    return;
}


function OnMouseUp(e)
{
    if (e.preventDefault)
        e.preventDefault();

    var wasReleased = false;

    if (MOBILE_FLAG)
    {
        gButtonPressed = false;
        wasReleased = true;
    }
    else
    {
        if (e.button == 0)
        {
            gButtonPressed = false;
            wasReleased = true;
        }
    }

    if (wasReleased)
    {
        if (gGameOver===0)
            gPlayer.fire();
        else if (!gGameOverShield)
            resetGame();
    }

    return;
}


var gLastUpdateTime;
var gFracOfSec;
var gCurTime;
function OnUpdate()
{
    var i,j,tmp,tmpX,tmpW;

    gCurTime = new Date().getTime();
    gFracOfSec = (gCurTime - gLastUpdateTime)/1000;

    for (i=0; i<gParticles.length; ++i)
    {
        tmp = gParticles[i];
        tmp.move();
        if (tmp.expired)
        {
            gParticles.splice(i,1);
            --i;
        }
        tmp = null;
    }

    for (i=0; i<gSmoke.length; ++i)
    {
        tmp = gSmoke[i];
        tmp.move();
        if (tmp.expired)
        {
            gSmoke.splice(i,1);
            --i;
        }
        tmp = null;
    }

    if (gGameOver===0)
        gPlayer.move();

    for (i=0; i<gPlayerMissiles.length; ++i)
    {
        tmp = gPlayerMissiles[i];
        tmp.move();
        if (tmp.expired)
        {
            gPlayerMissiles.splice(i,1);
            --i;
        }
        tmp = null;
    }

    // background
    drawBackground();

    // walls
    gContext.strokeStyle = "#000000";
    for (i=0; i<gWalls.length; ++i)
    {
        tmp = gWalls[i];
        tmp.draw();
        if (tmp.expired)
        {
            gWalls.splice(i,1);
            --i;
        }
        tmp = null;
    }

    // ground
    for (i=0; i<16; ++i)
    {
        if (i<8)
            setFillStyle("rgb(0,"+Math.round(64+(255/16)*i)+",255)");
        else
            setFillStyle("rgb(0,"+Math.round(64+(255/16)*(16-i))+",255)");

        tmpX = i*32;

        while (tmpX+32-gPlayer.x+TANK_XOFFSET < 0)
        {
            tmpX += 32*16;
        }

        gContext.fillRect
        (
            //tmpX-gPlayer.x,
            tmpX+TANK_XOFFSET-gPlayer.x,
            CANVAS_HEIGHT-13,
            33,13
        );
        gContext.strokeRect
        (
            //tmpX-gPlayer.x,
            tmpX+TANK_XOFFSET-gPlayer.x,
            CANVAS_HEIGHT-13,
            32,15
        );
    }

    // smoke
    for (i=0; i<gSmoke.length; ++i)
    {
        gSmoke[i].draw();
    }

    // particles
    for (i=0; i<gParticles.length; ++i)
    {
        gParticles[i].draw();
    }

    // player missiles
    for (i=0; i<gPlayerMissiles.length; ++i)
    {
        gPlayerMissiles[i].draw();
    }

    // player
    gPlayer.draw();

    if (gWalls.length===0)
        gGameOver = 1;

    if (gGameOver===1)
    {
        gContext.drawImage
        (
            gGameWinImg,
            Math.round(CANVAS_WIDTH/2-203),
            Math.round(CANVAS_HEIGHT/2-49)
        )
    }
    else
    if (gGameOver===2)
    {
        gContext.drawImage
        (
            gGameOverImg,
            Math.round(CANVAS_WIDTH/2-203),
            Math.round(CANVAS_HEIGHT/2-49)
        )
    }

    //---
    gLastUpdateTime = gCurTime;
    /*if ((gCurTime%2000) > 1990)
    {
        log("Smoke: "+gSmoke.length+"; Particles: "+gParticles.length+"; Missiles: "+gPlayerMissiles.length);
    }*/
};


window.onload = function()
{
    var i,tmp,interval,loadWaitTime;

    if (!Modernizr.canvas)
    {
        document.body.innerHTML =
            "Your browser does not support the HTML5 canvas element;<br>"+
            "consider upgrading to the latest version.";
        return;
    }

    //---
    // init globals
    gCanvas = document.createElement("canvas");
    gCanvas.onselectstart = function() { return false; };
    gContext = gCanvas.getContext("2d");
    gInstructionText = document.createElement("div");
    //---

    //---
    // style up the page
    document.body.style.backgroundColor = "#000000";
    gCanvas.style.position = "absolute";
    gCanvas.width = CANVAS_WIDTH;
    gCanvas.height = CANVAS_HEIGHT;
    gCanvas.style.cursor = "none";

    gInstructionText.style.position = "absolute";
    gInstructionText.style.color = "#ffffff";
    gInstructionText.font = "normal 20px verdana";
    gInstructionText.innerHTML = "Loading audio, may take up to a minute...";
    gInstructionText.style.width = CANVAS_WIDTH+"px";
    gInstructionText.style.height = "30px";

    OnWindowResize();
    document.body.appendChild(gCanvas);
    document.body.appendChild(gInstructionText);
    //---

    //---
    // register events
    window.onresize = OnWindowResize;
    if (MOBILE_FLAG)
    {
        document.body.addEventListener("touchstart",OnMouseDown,false);
        document.body.addEventListener("touchend",OnMouseUp,false);
    }
    else
    {
        document.onmousedown = OnMouseDown;
        document.onmouseup = OnMouseUp;
    }
    // ---

    // ---
    // fix issues with events not firing??
    if (!MOBILE_FLAG)
    {
        document.onclick = function(){return false};
        document.ondblclick = function(){return false};
        document.oncontextmenu = function(){return false;};
        gCanvas.onclick = function(){return false};
        gCanvas.ondblclick = function(){return false};
        gCanvas.oncontextmenu = function(){return false;};
        gCanvas.onmousedown = function(){return false;};
    }
    //---

    //---
    // one-time setup
    gPlayerSmokeGradient = gContext.createLinearGradient(0,CANVAS_HEIGHT-35,0,CANVAS_HEIGHT-65);
    //gPlayerSmokeGradient.addColorStop(0,"rgb(34,34,34)");
    //gPlayerSmokeGradient.addColorStop(1,"rgba(34,34,34,0.0)");
    gPlayerSmokeGradient.addColorStop(0,"rgb(20,20,20)");
    gPlayerSmokeGradient.addColorStop(1,"rgba(20,20,20,0.0)");

    gPlayerLightSmokeGradient = gContext.createLinearGradient(0,CANVAS_HEIGHT-35,0,CANVAS_HEIGHT-65);
    gPlayerLightSmokeGradient.addColorStop(0,"rgb(85,85,85)");
    gPlayerLightSmokeGradient.addColorStop(1,"rgba(85,85,85,0.0)");

    gContext.lineWidth = 2;

    gPlayer = new Tank();
    makeLevel();
    //---

    // ---
    // load resources and begin
    if (!MOBILE_FLAG && (!Modernizr.audio || !(Modernizr.audio.ogg || Modernizr.audio.mp3 || Modernizr.audio.wav)))
    {
        alert("HTML5 audio not properly supported. If you'd like to hear this game's audio, try using a newer and/or different browser!");
    }
    else if (!MOBILE_FLAG)
    {
        tryLoadSound("explosion2",window,"gExplosionSound",10000);
        tryLoadSound("song",window,"gMainMusic",60000,[false,false,true]);
    }

    loadImage("tankbody.png",window,"gTankBodyImg");
    loadImage("tankgun.png",window,"gTankGunImg");
    loadImage("game_over.png",window,"gGameOverImg");
    loadImage("game_win.png",window,"gGameWinImg");

    var firefoxReload = true;
    loadWaitTime = 0;
    interval = window.setInterval
    (
        function()
        {
            loadWaitTime += 500;

            if (MOBILE_FLAG)
            {
                if (gTankBodyImg && gTankGunImg && gGameOverImg && gGameWinImg)
                {
                    window.clearInterval(interval);
                    gLastUpdateTime = new Date().getTime();
                    gTimer = setInterval(OnUpdate,1000/60);
                }
            }
            else
            {
                if ((gMainMusicLoaded && gExplosionSoundLoaded && gTankBodyImg && gTankGunImg && gGameOverImg && gGameWinImg)
                ||  (loadWaitTime > WAIT_TO_LOAD_TIMEOUT))
                {

                    window.clearInterval(interval);
                    if (gExplosionSoundLoaded) gExplosionSound.volume = 0.5;
                    gInstructionText.style.display = "none";
                    gLastUpdateTime = new Date().getTime();
                    gTimer = setInterval(OnUpdate,1000/60);
                    if (gMainMusicLoaded) window.setTimeout(function(){gMainMusic.play();},3000);
                }
            }
        },
        500
    );
    //---
};


// ================================= //
// ============== GAME ============= //
// ================================= //


function Smoke(x,y,xv,yv,rad,color,duration)
{
    var ctx;

    this.expired = false;

    ctx = gContext;

    this.move = function()
    {
        x += xv * gFracOfSec;
        y -= yv * gFracOfSec;
        duration -= gFracOfSec;
        if (duration < 0)
            this.expired = true;
    };

    this.draw = function()
    {
        setFillStyle(color);
        ctx.beginPath();
        ctx.arc(x+TANK_XOFFSET-gPlayer.x,y,rad,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
    };
}


function Particle(x,y,xv,yv,size,colorChangeSpeed,duration,gravity)
{
    var ctx,g;

    this.expired = false;

    ctx = gContext;
    g = 255;

    this.move = function()
    {
        x += xv * gFracOfSec;
        y -= yv * gFracOfSec;
        if (gravity) { yv -= 400 * gFracOfSec; }
        if (g!==0)
        {
            g -= Math.round(colorChangeSpeed*gFracOfSec);
            if (g < 0) g = 0;
        }
        duration -= gFracOfSec;
        if (duration < 0)
            this.expired = true;
    };

    this.draw = function()
    {
        setFillStyle("rgb(255,"+g+",0)");
        ctx.fillRect(x+TANK_XOFFSET-gPlayer.x,y,size,size);
    };
}


function TankMissile(x,y,xv,yv)
{
    var i,ctx,createParticles,g,colorCycle,
        rand,mag,nx,ny,randScale;

    this.x = x;
    this.y = y;
    this.xv = xv;
    this.yv = yv;
    this.expired = false;

    ctx = gContext;
    createParticles = 0;

    g = 255;
    colorCycle = 0;

    this.explode = function()
    {
        rand = Math.floor(Math.random()*100+200);
        for (i=0; i<rand; ++i)
        {
            nx = Math.random()-0.5;
            ny = Math.random()-0.5;
            mag = Math.sqrt(nx*nx + ny*ny);
            nx /= mag;
            ny /= mag;
            randScale = Math.random()*125+100;

            gParticles[gParticles.length] = new Particle
            (
                this.x-1,
                this.y-1,
                nx*randScale,
                ny*randScale,
                Math.floor(Math.random()*2+1),
                350,
                Math.random()*0.5+0.5,
                false
            );
        }

        if (gExplosionSoundLoaded)
        {
            gExplosionSound.currentTime = 0.0;
            gExplosionSound.play();
        }
    };

    this.move = function()
    {
        /*
        // real gravity
        t = (gCurTime/1000)-startTime;
        this.x += this.xv * gFracOfSec;
        this.y = startY+(-this.yv*t + 0.5*-15*(t*t));
        this.yv += -15*t;
        */

        this.x += this.xv * gFracOfSec;
        this.y -= this.yv * gFracOfSec;
        this.yv -= 400 * gFracOfSec;

        if (gCurTime-createParticles > 100)
        {
            mag = Math.sqrt(this.xv*this.xv + this.yv*this.yv);
            nx = (this.xv / mag);
            ny = (this.yv / mag);

            rand = Math.floor(Math.random()*12+5);
            for (i=0; i<rand; ++i)
            {
                randScale = mag-(Math.random()*100+100);
                gParticles[gParticles.length] = new Particle
                (
                    this.x-1,
                    this.y-1,
                    nx*randScale+(Math.random()*100-50),
                    ny*randScale+(Math.random()*100-50),
                    Math.floor(Math.random()*2+1),
                    350,
                    Math.random()*0.5+0.5,
                    true
                );
            }
            createParticles = gCurTime;
        }

        if (colorCycle === 0)
        {
            g -= Math.round(1020 * gFracOfSec);
            if (g < 0)
            {
                g = 0;
                colorCycle = 1;
            }
        }
        else
        {
            g += Math.round(1020 * gFracOfSec);
            if (g > 255)
            {
                g = 255;
                colorCycle = 0;
            }
        }

        // collision...

        for (i=0; i<gWalls.length; ++i)
        {
            if (gWalls[i].checkCollision( new rect(this.x-3,this.y-3,6,6), false ))
            {
                this.expired = true;
                break;
            }
        }

        if (this.y > CANVAS_HEIGHT-13)
        {
            this.expired = true;
        }

        if (this.expired) this.explode();
    };

    this.draw = function()
    {
        setFillStyle("rgb(255,"+g+",0)");
        ctx.beginPath();
        ctx.arc(this.x+TANK_XOFFSET-gPlayer.x, this.y, 3, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    };
}


function Tank()
{
    var i,ctx,fireDelay,createSmoke,createSparks,rand,nx,ny,mag,randScale,explodeGrad;

    this.x = 2*32;
    this.y = 0;
    this.v = 65;
    this.rot = 0;
    this.rotDir = 0;
    this.health = 4;

    ctx = gContext;
    fireDelay = 0;
    createSmoke = 0;
    createSparks = 0;

    this.fire = function()
    {
        if (gCurTime-fireDelay > 750)
        {
            gPlayerMissiles[gPlayerMissiles.length] = new TankMissile
            (
                this.x+Math.abs(15*Math.cos(this.rot)),
                CANVAS_HEIGHT-29-Math.abs(15*Math.sin(this.rot)),
                Math.abs(400*Math.cos(this.rot))+this.v,
                Math.abs(400*Math.sin(this.rot))
            );
            fireDelay = gCurTime;
        }
    };

    this.move = function()
    {
        this.x += this.v * gFracOfSec;

        if (gButtonPressed)
        {
            if (this.rotDir===0)
            {
                this.rot -= gFracOfSec * (Math.PI/2);
                if (this.rot < -Math.PI/2)
                {
                    this.rot = -Math.PI/2;
                    this.rotDir = 1;
                }
            }
            else
            {
                this.rot += gFracOfSec * (Math.PI/2);
                if (this.rot > 0)
                {
                    this.rot = 0;
                    this.rotDir = 0;
                }
            }
        }
        else if (this.rot!==0)
        {
            this.rotDir = 1;
            this.rot += gFracOfSec * (Math.PI/2);
            if (this.rot > 0)
            {
                this.rot = 0;
                this.rotDir = 0;
            }
        }

        // smoke
        if (this.health < 4)
        {
            if (gCurTime-createSmoke > 100)
            {
                if (this.health===3)
                    rand = Math.floor(Math.random()*2+2);
                else
                    rand = Math.floor(Math.random()*4+3);
                for (i=0; i<rand; ++i)
                {
                    //Smoke(x,y,xv,yv,rad,color,duration)
                    gSmoke[gSmoke.length] = new Smoke
                    (
                        this.x+(Math.random()*20-16),
                        CANVAS_HEIGHT-30,
                        0,
                        Math.random()*50+25,
                        Math.floor(Math.random()*4+2),
                        (this.health===3 ? gPlayerLightSmokeGradient : gPlayerSmokeGradient),
                        Math.random()*0.5+0.5
                    );
                }
                createSmoke = gCurTime;
            }
        }

        // sparks
        if (this.health===1)
        {
            if (gCurTime-createSparks > 25)
            {
                rand = Math.floor(Math.random()*4+3);
                for (i=0; i<rand; ++i)
                {
                    gParticles[gParticles.length] = new Particle
                    (
                        this.x+(Math.random()*23-20),
                        CANVAS_HEIGHT-30,
                        Math.random()*25+12,
                        Math.random()*50+25,
                        Math.floor(Math.random()*2+1),
                        1000,
                        Math.random()*0.1+0.1,
                        false
                    );
                }
                createSparks = gCurTime;
            }
        }

        // collisions...
        for (i=0; i<gWalls.length; ++i)
        {
            if (gWalls[i].checkCollision( new rect(this.x-16,CANVAS_HEIGHT-40,29,32), true ))
            {
                --(this.health);
                //this.health = 0;
                if (this.health===0)
                {
                    setGameOver(2);
                }
            }
        }

        if (this.health <= 0)
        {
            // explode!!!
            for (i=0; i<300; ++i)
            {
                nx = Math.random()-0.5;
                ny = Math.random()-0.5;
                mag = Math.sqrt(nx*nx + ny*ny);
                nx /= mag;
                ny /= mag;
                randScale = Math.random()*125+100;

                gParticles[gParticles.length] = new Particle
                (
                    this.x,
                    CANVAS_HEIGHT-24,
                    nx*randScale,
                    ny*randScale,
                    Math.floor(Math.random()*2+1),
                    350,
                    Math.random()*0.5+0.5,
                    false
                );
            }

            explodeGrad = gContext.createRadialGradient(TANK_XOFFSET,CANVAS_HEIGHT-24,16,TANK_XOFFSET,CANVAS_HEIGHT-24,75);
            explodeGrad.addColorStop(0,"rgb(127,127,127)");
            explodeGrad.addColorStop(1,"rgba(225,225,225,0.0)");

            for (i=0; i<200; ++i)
            {
                nx = Math.random()-0.5;
                ny = Math.random()-0.5;
                mag = Math.sqrt(nx*nx + ny*ny);
                nx /= mag;
                ny /= mag;
                randScale = Math.random()*60+50;

                //Smoke(x,y,xv,yv,rad,color,duration)
                gSmoke[gSmoke.length] = new Smoke
                (
                    this.x,
                    CANVAS_HEIGHT-24,
                    nx*randScale,
                    ny*randScale,
                    Math.floor(Math.random()*4+2),
                    explodeGrad,
                    Math.random()*0.5+0.5
                );
            }

            if (gExplosionSoundLoaded)
            {
                gExplosionSound.currentTime = 0.0;
                gExplosionSound.play();
            }
        }
    };

    this.draw = function()
    {
        if (this.health <= 0) return;

        ctx.save();
            ctx.translate(TANK_XOFFSET,CANVAS_HEIGHT-30);
            ctx.rotate(this.rot);
            ctx.drawImage(gTankGunImg,-16,-10);
        ctx.restore();

        ctx.save();
            ctx.translate(TANK_XOFFSET-16,CANVAS_HEIGHT-40);
            ctx.drawImage(gTankBodyImg,0,0);
        ctx.restore();

        /*setFillStyle("rgba(255,255,255,0.5)");
        ctx.fillRect
        (
            TANK_XOFFSET-16,
            CANVAS_HEIGHT-40,
            29,32
        );*/
    };
}


function Wall(x,w,h)
{
    var tmp,tmpFill,row,col,ctx,bricks,redCol,redRow,
        nx,ny,mag,randScale,explodeGrad,exploding,thisWall;

    this.expired = false;

    x *= 32;
    ctx = gContext;
    if (w>2)
        redCol = Math.floor(Math.random()*(w-1));
    else
        redCol = Math.floor(Math.random()*w);
    redRow = Math.floor(Math.random()*(h-1))+1;

    exploding = false;

    thisWall = this;

    bricks = [];
    for (row=0; row<h; ++row)
    {
        bricks[row] = [];
        for (col=0; col<w; ++col)
        {
            bricks[row][col] =
            {
                bot : (row===0 ? true : false),
                red : (row===redRow && col===redCol ? true : false),
                health : 100,
                bounds : new rect
                (
                    x+(col*32),
                    CANVAS_HEIGHT-13-((row+1)*32),
                    32,
                    32
                )
            };
        }
    }

    function explode(tmp)
    {
        function bigExplosion(x,y)
        {
            for (i=0; i<150; ++i)
            {
                nx = Math.random()-0.5;
                ny = Math.random()-0.5;
                mag = Math.sqrt(nx*nx + ny*ny);
                nx /= mag;
                ny /= mag;
                randScale = Math.random()*125+100;

                gParticles[gParticles.length] = new Particle
                (
                    x,y,
                    nx*randScale,
                    ny*randScale,
                    Math.floor(Math.random()*2+1),
                    350,
                    Math.random()*0.5+0.5,
                    false
                );
            }

            for (i=0; i<100; ++i)
            {
                nx = Math.random()-0.5;
                ny = Math.random()-0.5;
                mag = Math.sqrt(nx*nx + ny*ny);
                nx /= mag;
                ny /= mag;
                randScale = Math.random()*60+50;

                //Smoke(x,y,xv,yv,rad,color,duration)
                gSmoke[gSmoke.length] = new Smoke
                (
                    x,y,
                    nx*randScale,
                    ny*randScale,
                    Math.floor(Math.random()*4+2),
                    "#7f7f7f",
                    Math.random()*0.5+0.5
                );
            }
        }

        // EXPLODE!!!!!
        exploding = true;
        bigExplosion(tmp.bounds.x+16,tmp.bounds.y+16);
        window.setTimeout
        (
            function()
            {
                bigExplosion(x,CANVAS_HEIGHT-13-((h/2)*32));
            },
            500
        );

        window.setTimeout
        (
            function()
            {
                //bigExplosion(x+((w/2)*32),CANVAS_HEIGHT-13-((h/2)*32));
                bigExplosion(x+(w*32),CANVAS_HEIGHT-13-((h/2)*32));
                thisWall.expired = true;
            },
            1000
        );

        /*window.setTimeout
        (
            function()
            {
                bigExplosion(x+(w*32),CANVAS_HEIGHT-13-((h/2)*32));
                thisWall.expired = true;
            },
            1500
        );*/
    }

    this.checkCollision = function(missile,playerHit)
    {
        if (exploding) return false;

        for (row=0; row<h; ++row)
        {
            for (col=0; col<w; ++col)
            {
                tmp = bricks[row][col];
                if (tmp.health > 0 && tmp.bounds.isCollidingWith(missile))
                {
                    if (row!==0)
                        tmp.health -= 100;

                    if (row===0 && playerHit)
                    {
                        explode(tmp);
                        return true;
                    }

                    if (tmp.red) explode(tmp);

                    if (row != h-1) // top
                    {
                        tmp = bricks[row+1][col];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 34 : 34);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }
                    if (col != w-1) // right
                    {
                        tmp = bricks[row][col+1];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 34 : 34);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }
                    if (row != 0) // down
                    {
                        tmp = bricks[row-1][col];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 34 : 34);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }
                    if (col != 0) // left
                    {
                        tmp = bricks[row][col-1];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 34 : 34);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }

                    if (row != h-1 && col!= w-1) // top-right
                    {
                        tmp = bricks[row+1][col+1];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 17 : 17);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }
                    if (row != 0 && col!= w-1) // down-right
                    {
                        tmp = bricks[row-1][col+1];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 17 : 17);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }
                    if (row != 0 && col!= 0) // down-left
                    {
                        tmp = bricks[row-1][col-1];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 17 : 17);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }
                    if (row != h-1 && col!= 0) // top-left
                    {
                        tmp = bricks[row+1][col-1];
                        if (!tmp.bot) tmp.health -= (tmp.red ? 17 : 17);
                        if (tmp.red && tmp.health<=0) explode(tmp);
                    }

                    return true;
                }
            }
        }
        return false;
    };

    this.draw = function()
    {
        if (x-gPlayer.x > CANVAS_WIDTH)
            return;

        if (gPlayer.x-(x+w*32) > CANVAS_WIDTH/4)
        {
            this.expired = true;
            return;
        }

        for (row=h-1; row>=0; --row)
        {
            for (col=0; col<w; ++col)
            {
                if (exploding && row===0) continue;

                tmp = bricks[row][col];
                if (tmp.health > 0)
                {
                    if (exploding)
                    {
                        setFillStyle("#111111");
                    }
                    else if (tmp.red)
                    {
                        setFillStyle("rgb("+Math.round((tmp.health/100)*255)+",0,0)");
                    }
                    else if (tmp.bot)
                    {
                        setFillStyle("#aaaaaa");
                    }
                    else
                    {
                        tmpFill = Math.round((tmp.health/100)*119);
                        setFillStyle("rgb("+tmpFill+","+tmpFill+","+tmpFill+")");
                    }
                    ctx.fillRect
                    (
                        tmp.bounds.x+TANK_XOFFSET-gPlayer.x,
                        tmp.bounds.y,
                        33,33
                    );
                    ctx.strokeRect
                    (
                        tmp.bounds.x+TANK_XOFFSET-gPlayer.x,
                        tmp.bounds.y,
                        32,32
                    );
                }
            }
        }

    };
}


function drawBackground()
{
    var tmpX,tmpW,off,div;

    off = CANVAS_WIDTH * (5/4);
    div = 15;

    // background
    setFillStyle(CANVAS_BACKGROUND_COLOR);
    gContext.fillRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);

    setFillStyle("#222222");

    tmpX = -gPlayer.x/div;
    tmpW = CANVAS_WIDTH/8-10;
    while (tmpX+tmpW < 0) tmpX += off;
    gContext.fillRect(tmpX,CANVAS_HEIGHT/2,tmpW,CANVAS_HEIGHT/2);
    // ---
    tmpX = CANVAS_WIDTH/8 - gPlayer.x/div;
    tmpW = CANVAS_WIDTH/4-10;
    while (tmpX+tmpW < 0) tmpX += off;
    gContext.fillRect(tmpX,CANVAS_HEIGHT/6,tmpW,CANVAS_HEIGHT*(5/6));
    // ---
    tmpX = CANVAS_WIDTH/8 + CANVAS_WIDTH/4 - gPlayer.x/div;
    tmpW = CANVAS_WIDTH/4-10;
    while (tmpX+tmpW < 0) tmpX += off;
    gContext.fillRect(tmpX,CANVAS_HEIGHT/3,tmpW,CANVAS_HEIGHT*(2/3));
    // ---
    tmpX = CANVAS_WIDTH/8 + CANVAS_WIDTH/4 + CANVAS_WIDTH/4 - gPlayer.x/div;
    tmpW = CANVAS_WIDTH*(3/8)-10;
    while (tmpX < 0) tmpX += off;
    gContext.fillRect(tmpX,CANVAS_HEIGHT*(2/3),tmpW,CANVAS_HEIGHT/3);
    if (tmpX+tmpW > off)
        gContext.fillRect(tmpX-off,CANVAS_HEIGHT*(2/3),tmpW,CANVAS_HEIGHT/3);
    // ---
    tmpX = CANVAS_WIDTH - gPlayer.x/div;
    tmpW = CANVAS_WIDTH/4-10;
    while (tmpX+tmpW < 0) tmpX += off;
    gContext.fillRect(tmpX,CANVAS_HEIGHT/3,tmpW,CANVAS_HEIGHT*(2/3));
}


function makeLevel()
{
    var i,x,w,h,lastX,finalX;

    gWalls.splice(0,gWalls.length);
    // ---

    finalX = (225*gPlayer.v)/32;
    lastX = 10;
    while (true)
    {
        x = lastX + Math.floor(Math.random()*4)+4;
        w = Math.floor(Math.random()*2)+2;
        //w = 3;
        h = Math.floor(Math.random()*6)+2;

        gWalls[gWalls.length] = new Wall(x,w,h);

        lastX = x+w;
        if (lastX > finalX)
            break;
    }
    //log("Number of walls: "+gWalls.length);
}


function setGameOver(result)
{
    gGameOver = result;

    if (result===1)
    {
    }
    else
    if (result===2)
    {
    }

    gGameOverShield = true;
    window.setTimeout(function(){gGameOverShield=false;},1000);
}


function resetGame()
{
    gGameOver = 0;
    gPlayer = new Tank();
    makeLevel();
    if (gMainMusicLoaded)
    {
        gMainMusic.pause();
        window.setTimeout
        (
            function()
            {
                gMainMusic.currentTime = 0.0;
                gMainMusic.play();
            },
            3000
        );
    }
}

var gFillStyle = "";
function setFillStyle(style)
{
    if (style!==gFillStyle)
    {
        gContext.fillStyle = gFillStyle = style;
    }
}


// ================================= //
// =========== UTILITIES =========== //
// ================================= //


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

    this.isCollidingWith = function(r)
    {
        return !(r.x > this.x+this.w
              || r.x+r.w < this.x
              || r.y > this.y+this.h
              || r.y+r.h < this.y);
    };
}


function dist(x1,y1,x2,y2)
{
    return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}


function loadImage(name,obj,prop)
{
    var tmpImg;
    obj[prop] = undefined;
    tmpImg = document.createElement("img");
    tmpImg.onload = function() { obj[prop] = tmpImg; };
    tmpImg.src = name;
}


function tryLoadSound(name,obj,prop,timeout,excludeExts)
{
    var tmpSound,interval,loadWaitTime,ext;

    if (!Modernizr.audio) return false;

    if (!excludeExts)
        excludeExts = [false,false,false];

    if (Modernizr.audio.ogg == "probably" && !excludeExts[0])
        ext = ".ogg";
    else
    if (Modernizr.audio.mp3 == "probably" && !excludeExts[1])
        ext = ".mp3";
    else
    if (Modernizr.audio.wav == "probably" && !excludeExts[2])
        ext = ".wav";
    else
    if (Modernizr.audio.ogg == "maybe" && !excludeExts[0])
        ext = ".ogg";
    else
    if (Modernizr.audio.mp3 == "maybe" && !excludeExts[1])
        ext = ".mp3";
    else
    if (Modernizr.audio.wav == "maybe" && !excludeExts[2])
        ext = ".wav";
    else
        return false;


    log("Trying to load "+name+ext);

    obj[prop] = undefined;
    loadWaitTime = 0;
    obj[prop] = document.createElement("audio");
    obj[prop].onerror = function() { log("had an error loading audio "+name+ext); };
    obj[prop].src = ""+name+ext;
    interval = window.setInterval
    (
        function()
        {
            if (obj[prop].readyState === 4)
            {
                // Firefox hack... probably helps
                if (navigator.userAgent.indexOf("Firefox") !== -1)
                {
                    if ( prop==="gMainMusic" && obj[prop].buffered && obj[prop].buffered.length>0 && obj[prop].buffered.end(obj[prop].buffered.length-1)  < 10)
                    {
                        log("Failed, only buffered to "+obj[prop].buffered.end(obj[prop].buffered.length-1));
                        obj[prop].load();
                        return;
                    }
                }

                window.clearInterval(interval);
                obj[prop+"Loaded"] = true;
                if (obj[prop].buffered && obj[prop].buffered.length>0)
                    log("Successfully loaded "+name+ext+" : buffered to "+obj[prop].buffered.end(obj[prop].buffered.length-1));
                return;
            }

            loadWaitTime += 500;
            if (loadWaitTime > timeout)
            {
                window.clearInterval(interval);
                if (ext == ".ogg")
                    excludeExts[0] = true;
                if (ext == ".mp3")
                    excludeExts[1] = true;
                if (ext == ".wav")
                    excludeExts[2] = true;
                tryLoadSound(name,obj,prop,timeout,excludeExts);
                log("Timed out "+name+ext+" @state "+obj[prop].readyState);
            }
        },
        500
    );
}


function log(msg)
{
    if (RELEASE) return;
    if (MOBILE_FLAG)
    {
        var tmp;
        if (!(tmp=document.getElementById("mobile_log")))
        {
            tmp = document.createElement("div");
            tmp.id = "mobile_log";
            tmp.style.position = "absolute";
            tmp.style.left = "0px";
            tmp.style.top = "0px";
            tmp.style.color = "#ffffff";
            document.body.appendChild(tmp);
        }
        tmp.innerHTML = msg;
    }
    else
        window.console && console.log && console.log(msg);
}