HTML5 Mirrored Platformer JS

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

// === CNSTANTS === //
var CANVAS_WIDTH = 640;
var CANVAS_HEIGHT = 480;
var HALF_CANVAS_WIDTH = Math.floor(CANVAS_WIDTH/2);
var HALF_CANVAS_HEIGHT = Math.floor(CANVAS_HEIGHT/2);

var MIN_PLATFORM_WIDTH = 30;
var MAX_PLATFORM_WIDTH = 75;
var MAX_PLATFORM_HEIGHT = 13;
var NUMBER_OF_PLATFORMS = 151;

var CHAOS_WIDTH = 40;
var CHAOS_HEIGHT = 40;
// ================= //

var gInstructionText;
var gHealthText;
var gPointsText;
var gSideText;

var gCanvas;
var gContext;
var gTimer;

var gCanvasLeft = 0;
var gCanvasTop = 0;

var gKeyStates = [false,false,false,false];

var gGameOver = 0;

var gGameStartTime;

//---
var gPlayer;
var gPlayerHealth;
var gPlayerPoints;
var gPlatforms = [];
var gChaos = [];

var gCurSide = 1;
//---

function OnWindowResize()
{
    if (gCanvas)
    {
        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 - 85) + "px";
        gInstructionText.style.left = gCanvasLeft + "px";

        gHealthText.style.top = (gCanvasTop + CANVAS_HEIGHT + 5) + "px";
        gHealthText.style.left = gCanvasLeft + "px";

        gPointsText.style.top = (gCanvasTop + CANVAS_HEIGHT + 30) + "px";
        gPointsText.style.left = gCanvasLeft + "px";

        gSideText.style.top = (gCanvasTop + CANVAS_HEIGHT + 5) + "px";
        gSideText.style.left = (gCanvasLeft + CANVAS_WIDTH - 190) + "px";
    }
    return true;
}


function OnMouseDown(e)
{
    if (new Date().getTime()-gGameStartTime < 2000) return false;
    if (gGameOver>0) return false;

    var x = e.clientX - gCanvasLeft;
    var y = e.clientY - gCanvasTop;

    if (e.button == 0)
    {
    }
    else if (e.button == 2)
    {
        if (x > 0 && x < HALF_CANVAS_WIDTH)
        {
            gCurSide = 1;
            gSideText.innerHTML = "Currently controlling left mirror";
        }
        else if (x < CANVAS_WIDTH)
        {
            gCurSide = 2;
            gSideText.innerHTML = "Currently controlling right mirror";
        }
    }
    return false;
}


function OnKeyDown(e)
{
    var i,tmp,tmpX,tmpY;

    if (new Date().getTime()-gGameStartTime < 2000) return true;

    var keynum;
    if (window.event) // IE
        keynum = e.keyCode;
    else if (e.which) // Netscape/Firefox/Opera
        keynum = e.which;

    if (gGameOver>0)
    {
        //if (keynum==32
        if (keynum==71)
        {
            gGameOver = 0;
            gKeyStates = [false,false,false,false];
            gPlayerHealth = 100;
            gPlayerPoints = 0;
            gHealthText.innerHTML = "100 Health";
            gPointsText.innerHTML = "0 Points";
            gPlayer = new Player();
            gGameStartTime = new Date().getTime();

            gPlatforms.splice(0,gPlatforms.length);
            gChaos.splice(0,gChaos.length);

            // ground
            gPlatforms[gPlatforms.length] =
            new Platform
            (
                0,
                CANVAS_HEIGHT - MAX_PLATFORM_HEIGHT,
                HALF_CANVAS_WIDTH,
                HALF_CANVAS_HEIGHT
            );

            // first platform (always the same)
            gPlatforms[gPlatforms.length] =
            new Platform
            (
                HALF_CANVAS_WIDTH/2 - MAX_PLATFORM_WIDTH/2,
                CANVAS_HEIGHT - MAX_PLATFORM_HEIGHT - 100,
                MAX_PLATFORM_WIDTH,
                MAX_PLATFORM_HEIGHT
            );

            // all other platforms...
            for (i=0; i<NUMBER_OF_PLATFORMS; ++i)
            {
                tmp = gPlatforms[gPlatforms.length-1];

                if (i%50===0 && i!==0)
                {
                    gPlatforms[gPlatforms.length] =
                    new Platform
                    (
                        0,
                        tmp.y - 100,
                        HALF_CANVAS_WIDTH,
                        MAX_PLATFORM_HEIGHT
                    );
                    continue;
                }

                if (tmp.y!==gPlatforms[gPlatforms.length-2].y)
                    tmpY = (Math.random()>0.25 ? tmp.y - 100 : tmp.y);
                else
                    tmpY = tmp.y - 100;

                tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
                if (tmpY===tmp.y)
                {
                    while ( (tmpX < 0) || (tmpX+MAX_PLATFORM_WIDTH > HALF_CANVAS_WIDTH) || (Math.abs(tmpX-tmp.x) < MAX_PLATFORM_WIDTH*1.6))
                    {
                        tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
                    }
                }
                else
                {
                    tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
                    while (tmpX < 0 || tmpX+MAX_PLATFORM_WIDTH > HALF_CANVAS_WIDTH)
                        tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
                }

                gPlatforms[gPlatforms.length] =
                new Platform
                (
                    tmpX,
                    tmpY,
                    Math.random() * (MAX_PLATFORM_WIDTH-MIN_PLATFORM_WIDTH) + MIN_PLATFORM_WIDTH,
                    MAX_PLATFORM_HEIGHT
                );
            }
            //---

            //---
            // one-time enemy setup
            //var numChaos = Math.round(Math.random()*40)+40;
            var numChaos=75;
            for (i=0; i<numChaos; ++i)
            {
                gChaos[gChaos.length] = new Chaos
                (
                    Math.random()*(HALF_CANVAS_WIDTH-CHAOS_WIDTH),
                    (Math.random()*(gPlatforms[gPlatforms.length-1].y)+100)-100,
                    Math.floor(Math.random()*2)+1
                );
            }
            //---

            return false;
        }
        return true;
    }

    if (gCurSide===2)
    {
        switch (keynum)
        {
        case 65:
        case 37: // left
            gKeyStates[0] = true;
            gKeyStates[2] = false;
            return false;
            break;
        case 87:
        case 38: // up
            gKeyStates[1] = true;
            gKeyStates[3] = false;
            return false;
            break;
        case 68:
        case 39: // right
            gKeyStates[2] = true;
            gKeyStates[0] = false;
            return false;
            break;
        case 83:
        case 40: // down
            gKeyStates[3] = true;
            gKeyStates[1] = false;
            return false;
            break;
        case 32: // space
            gPlayer.jump();
            return false;
            break;
        }
    }
    else
    {
        switch (keynum)
        {
        case 65:
        case 37: // left
            gKeyStates[2] = true;
            gKeyStates[0] = false;
            return false;
            break;
        case 87:
        case 38: // up
            gKeyStates[1] = true;
            gKeyStates[3] = false;
            return false;
            break;
        case 68:
        case 39: // right
            gKeyStates[0] = true;
            gKeyStates[2] = false;
            return false;
            break;
        case 83:
        case 40: // down
            gKeyStates[3] = true;
            gKeyStates[1] = false;
            return false;
            break;
        case 32: // space
            gPlayer.jump();
            return false;
            break;
        }
    }
    return true;
}

function OnKeyUp(e)
{
    if (new Date().getTime()-gGameStartTime < 2000) return true;
    if (gGameOver>0) return true;

    var keynum;
    if (window.event) // IE
        keynum = e.keyCode;
    else if (e.which) // Netscape/Firefox/Opera
        keynum = e.which;

    if (gCurSide===2)
    {
        switch (keynum)
        {
        case 65:
        case 37: // left
            gKeyStates[0] = false;
            return false;
            break;
        case 87:
        case 38: // up
            gKeyStates[1] = false;
            return false;
            break;
        case 68:
        case 39: // right
            gKeyStates[2] = false;
            return false;
            break;
        case 83:
        case 40: // down
            gKeyStates[3] = false;
            return false;
            break;
        }
    }
    else
    {
        switch (keynum)
        {
        case 65:
        case 37: // left
            gKeyStates[2] = false;
            return false;
            break;
        case 87:
        case 38: // up
            gKeyStates[1] = false;
            return false;
            break;
        case 68:
        case 39: // right
            gKeyStates[0] = false;
            return false;
            break;
        case 83:
        case 40: // down
            gKeyStates[3] = false;
            return false;
            break;
        }
    }
    return true;
}

var gLastUpdateTime;
var gFracOfSec;
function OnUpdate()
{
    var curTime,i,j;

    // ================ //
    // ==== TIMING ==== //
    // ================ //

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

    // =============== //
    // ==== LOGIC ==== //
    // =============== //

    if (gGameOver===0)
    {
        if (curTime-gGameStartTime > 2000)
        {
            gPlayer.move();
            gPlayer.checkCollisions();
        }

        for (i=0; i<gChaos.length; ++i)
        {
            gChaos[i].move();
        }

        // check for gameover
        if (gPlayerHealth <= 0)
        {
            gGameOver = 2;
            gHealthText.innerHTML = "Game over! Press 'g' to play again.";
        }
        else
        if (gPlayer.y+gPlayer.h <= gPlatforms[gPlatforms.length-1].y)
        {
            gGameOver = 1;
            gHealthText.innerHTML = "You win! Press 'g' to play again.";
        }
    }

    // ================= //
    // ==== DRAWING ==== //
    // ================= //

    if (gGameOver===0)
    {
        // background
        gContext.fillStyle = "#000000";
        gContext.fillRect(0,0,HALF_CANVAS_WIDTH,CANVAS_HEIGHT);
        gContext.fillStyle = "#ffffff";
        gContext.fillRect(HALF_CANVAS_WIDTH,0,HALF_CANVAS_WIDTH,CANVAS_HEIGHT);

        gContext.save();
        gContext.translate(0,(HALF_CANVAS_HEIGHT-gPlayer.y<0 ? 0 : HALF_CANVAS_HEIGHT-gPlayer.y));

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

        for (i=0; i<gChaos.length; ++i)
        {
            gChaos[i].draw();
            if (gChaos[i].exploded)
            {
                gChaos.splice(i,1); --i;
            }
        }

        // player
        gPlayer.draw();

        gContext.restore();
    }

    // -- rollover for next frame
    gLastUpdateTime = curTime;
};


window.onload = function()
{
    var i,tmp,tmpX,tmpY;

    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");
    gContext = gCanvas.getContext("2d");
    gInstructionText = document.createElement("div");
    gHealthText = document.createElement("div");
    gPointsText = document.createElement("div");
    gSideText = document.createElement("div");
    //---

    //---
    // style up the page
    document.body.style.backgroundColor = "#444444";
    gCanvas.style.position = "absolute";
    gCanvas.width = CANVAS_WIDTH;
    gCanvas.height = CANVAS_HEIGHT;
    gCanvas.style.cursor = "crosshair";
    gCanvas.style.border = "2px solid #888888";

    gInstructionText.style.position = "absolute";
    gInstructionText.style.color = "#ffffff";
    gInstructionText.font = "normal 20px verdana";
    gInstructionText.innerHTML = "Use arrow keys or WASD to move, spacebar to jump.  Launch yourself off the center divide to blast enemies for points, make it to the top to win.  Walljumping off the outer side is also possible by moving into the wall and pressing spacebar.  Right click on one side of the mirror to shift your controls to match that half.";
    gInstructionText.style.width = CANVAS_WIDTH+"px";
    gInstructionText.style.height = "30px";

    gHealthText.style.position = "absolute";
    gHealthText.style.color = "#ffffff";
    gHealthText.font = "normal 20px verdana";
    gHealthText.innerHTML = "100 Health";
    gHealthText.style.width = CANVAS_WIDTH+"px";
    gHealthText.style.height = "30px";

    gPointsText.style.position = "absolute";
    gPointsText.style.color = "#ffffff";
    gPointsText.font = "normal 20px verdana";
    gPointsText.innerHTML = "0 Points";
    gPointsText.style.width = CANVAS_WIDTH+"px";
    gPointsText.style.height = "30px";

    gSideText.style.position = "absolute";
    gSideText.style.color = "#ffffff";
    gSideText.font = "normal 20px verdana";
    gSideText.innerHTML = "Currently controlling left mirror";
    gSideText.style.width = CANVAS_WIDTH+"px";
    gSideText.style.height = "30px";

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

    //---
    // register events
    window.onresize = OnWindowResize;
    document.onkeydown = OnKeyDown;
    document.onkeyup = OnKeyUp;
    document.onmousedown = OnMouseDown;

    // fix issues with events not firing after mousedown on Chrome??
    // (this is probably a hack)
    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
    gPlayerHealth = 100;
    gPlayerPoints = 0;
    gHealthText.innerHTML = gPlayerHealth+" Health";
    gPlayer = new Player();

    // ground
    gPlatforms[gPlatforms.length] =
    new Platform
    (
        0,
        CANVAS_HEIGHT - MAX_PLATFORM_HEIGHT,
        HALF_CANVAS_WIDTH,
        HALF_CANVAS_HEIGHT
    );

    // first platform (always the same)
    gPlatforms[gPlatforms.length] =
    new Platform
    (
        HALF_CANVAS_WIDTH/2 - MAX_PLATFORM_WIDTH/2,
        CANVAS_HEIGHT - MAX_PLATFORM_HEIGHT - 100,
        MAX_PLATFORM_WIDTH,
        MAX_PLATFORM_HEIGHT
    );

    // all other platforms...
    for (i=0; i<NUMBER_OF_PLATFORMS; ++i)
    {
        tmp = gPlatforms[gPlatforms.length-1];

        if (i%50===0 && i!==0)
        {
            gPlatforms[gPlatforms.length] =
            new Platform
            (
                0,
                tmp.y - 100,
                HALF_CANVAS_WIDTH,
                MAX_PLATFORM_HEIGHT
            );
            continue;
        }

        if (tmp.y!==gPlatforms[gPlatforms.length-2].y)
            tmpY = (Math.random()>0.25 ? tmp.y - 100 : tmp.y);
        else
            tmpY = tmp.y - 100;

        tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
        if (tmpY===tmp.y)
        {
            while ( (tmpX < 0) || (tmpX+MAX_PLATFORM_WIDTH > HALF_CANVAS_WIDTH) || (Math.abs(tmpX-tmp.x) < MAX_PLATFORM_WIDTH*1.6))
            {
                tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
            }
        }
        else
        {
            tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
            while (tmpX < 0 || tmpX+MAX_PLATFORM_WIDTH > HALF_CANVAS_WIDTH)
                tmpX = (tmp.x - 80 - MAX_PLATFORM_WIDTH) + Math.random()*(MAX_PLATFORM_WIDTH + 160 + MAX_PLATFORM_WIDTH);
        }

        gPlatforms[gPlatforms.length] =
        new Platform
        (
            tmpX,
            tmpY,
            Math.random() * (MAX_PLATFORM_WIDTH-MIN_PLATFORM_WIDTH) + MIN_PLATFORM_WIDTH,
            MAX_PLATFORM_HEIGHT
        );
    }
    //---

    //---
    // one-time enemy setup
    //var numChaos = Math.round(Math.random()*40)+40;
    var numChaos=75;
    for (i=0; i<numChaos; ++i)
    {
        gChaos[gChaos.length] = new Chaos
        (
            Math.random()*(HALF_CANVAS_WIDTH-CHAOS_WIDTH),
            (Math.random()*(gPlatforms[gPlatforms.length-1].y)+100)-100,
            Math.floor(Math.random()*2)+1
        );
    }
    //---

    //---
    // start timer
    gGameStartTime = gLastUpdateTime = new Date().getTime();
    gTimer = setInterval(OnUpdate,1000/60);
    //---
};


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


function Chaos(x,y,side)
{
    var i;

    this.x = x;
    this.y = y;

    this.maxY = y + 400;
    this.minY = y - 400;

    this.xv = Math.random()*200-100;
    this.yv = Math.random()*50-25;

    this.side = side; // 1 = left, 2 = right

    this.exploding = false;
    this.exploded = false;

    var parts = [];

    for (i=0; i<40; ++i)
    {
        parts[parts.length] =
        {
            w : Math.round(Math.random()*7+2),
            h : Math.round(Math.random()*7+2),
            x : Math.random()*(CHAOS_WIDTH-14),
            y : Math.random()*(CHAOS_HEIGHT-14),
            xv : Math.random()*40-20,
            yv : Math.random()*40-20
        };
    }

    // cache it for performance
    // (avoid global scope lookup table)
    var ctx = gContext;

    this.move = function()
    {
        var tmp;
        if (Math.abs(this.y-gPlayer.y) < CANVAS_HEIGHT)
        {
            for (i=0; i<parts.length; ++i)
            {
                tmp = parts[i];
                tmp.x += gFracOfSec * tmp.xv;
                tmp.y += gFracOfSec * tmp.yv;

                if (!this.exploding)
                {
                    if (tmp.x+tmp.w > CHAOS_WIDTH)
                    {
                        tmp.x = CHAOS_WIDTH-tmp.w;
                        tmp.xv *= -1;
                    }
                    else if (tmp.x < 0)
                    {
                        tmp.x = 0;
                        tmp.xv *= -1;
                    }

                    if (tmp.y+tmp.h > CHAOS_HEIGHT)
                    {
                        tmp.y = CHAOS_HEIGHT-tmp.h;
                        tmp.yv *= -1;
                    }
                    else if (tmp.y < 0)
                    {
                        tmp.y = 0;
                        tmp.yv *= -1;
                    }
                }
                else
                {
                    if (this.x+tmp.x+tmp.w > HALF_CANVAS_WIDTH)
                    {
                        parts.splice(i,1); --i;
                    }
                    else if (this.x+tmp.x < 0)
                    {
                        parts.splice(i,1); --i;
                    }
                    if (this.y+tmp.y+tmp.h > this.maxY)
                    {
                        parts.splice(i,1); --i;
                    }
                    else if (this.y+tmp.y < this.minY)
                    {
                        parts.splice(i,1); --i;
                    }
                }
            }

            if (parts.length===0)
                this.exploded = true;
        }

        // ---
        if (Math.abs(this.y-gPlayer.y) < CANVAS_HEIGHT*2)
        {
            this.x += gFracOfSec * this.xv;
            this.y += gFracOfSec * this.yv;

            if (this.x+CHAOS_WIDTH > HALF_CANVAS_WIDTH)
            {
                this.x = HALF_CANVAS_WIDTH-CHAOS_WIDTH;
                this.xv *= -1;
            }
            else if (this.x < 0)
            {
                this.x = 0;
                this.xv *= -1;
            }

            if (this.y+CHAOS_HEIGHT > this.maxY)
            {
                this.y = this.maxY-CHAOS_HEIGHT;
                this.yv *= -1;
            }
            else if (this.y < this.minY)
            {
                this.y = this.minY;
                this.yv *= -1;
            }
        }
    };

    this.draw = function()
    {
        if (Math.abs(this.y-gPlayer.y) > CANVAS_HEIGHT)
            return;

        if (side===1)
            ctx.fillStyle = "#ffffff";
        else
            ctx.fillStyle = "#000000";

        var tmp;
        for (i=0; i<parts.length; ++i)
        {
            tmp = parts[i];
            if (side===1)
                ctx.fillRect(this.x+tmp.x,this.y+tmp.y,tmp.w,tmp.h);
            else
                ctx.fillRect(HALF_CANVAS_WIDTH+this.x+tmp.x,this.y+tmp.y,tmp.w,tmp.h);
        }
    };

    this.explode = function()
    {
        this.exploding = true;

        var tmp,vecX,vecY,mag;
        for (i=0; i<parts.length; ++i)
        {
            tmp = parts[i];

            vecX = Math.random()-0.5;
            vecY = Math.random()-0.5;
            mag = Math.sqrt(vecX*vecX + vecY*vecY);
            vecX /= mag;
            vecY /= mag;
            mag = (Math.random()>0.5 ? Math.random()*200+200 : -1*(Math.random()*200+200));    //(Math.random()*400)-200;
            vecX *= mag;
            vecY *= mag;

            tmp.xv = vecX;
            tmp.yv = vecY;
        }
        this.xv = 0;
        this.yv = 0;
    };
}


function Platform(x,y,w,h)
{
    this.x = Math.round(x);
    this.y = Math.round(y);
    this.w = Math.round(w);
    this.h = Math.round(h);

    // cache it for performance
    // (avoid global scope lookup table)
    var ctx = gContext;

    this.draw = function()
    {
        // very simple culling
        if (Math.abs(this.y-gPlayer.y) > CANVAS_HEIGHT)
            return;

        ctx.fillStyle = "#000000";

        ctx.fillRect
        (
            this.x + HALF_CANVAS_WIDTH,
            this.y,
            this.w,
            this.h
        );

        ctx.fillStyle = "#ffffff";

        ctx.fillRect
        (
            HALF_CANVAS_WIDTH - this.x - this.w,
            this.y,
            this.w,
            this.h
        )
    };
}


function Player()
{
    var i,tmp;

    this.w = 26;
    this.h = 66;
    //this.x = HALF_CANVAS_WIDTH;
    this.x = 0;//Math.round(HALF_CANVAS_WIDTH/2 - 13);
    this.y = CANVAS_HEIGHT - 66 - MAX_PLATFORM_HEIGHT - 1;//HALF_CANVAS_HEIGHT-33+100;
    this.xv = 0;
    this.yv = 0;

    this.wallHit = -1;
    this.justHit = -1;

    this.jumping = false;
    this.falling = false;

    var nextAnim = 0;
    var curAnim = 0;
    var curFrame = 0;
    var elapsed = 0;
    var tmp;

    var checkFall;



    // cache it for performance
    // (avoid global scope lookup table)
    // TODO: do this with other globals
    var ctx = gContext;

    this.move = function()
    {
        if (this.jumping || this.falling)
        {
            this.yv -= gFracOfSec * 450; // FIX MAGIC#

            if (gKeyStates[0])
            {
                this.xv -= gFracOfSec * 200; // FIX MAGIC#
            }
            else if (gKeyStates[2])
            {
                this.xv += gFracOfSec * 200; // FIX MAGIC#
            }
        }
        else if (gKeyStates[0])
        {
            this.xv = -100; // FIX MAGIC#
        }
        else if (gKeyStates[2])
        {
            this.xv = 100; // FIX MAGIC#
        }
        else
        {
            this.xv = 0;
        }

        if (this.yv < -1000)
            this.yv = -1000;

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

        // trigger walk anim
        if (this.yv === 0 && this.xv !==0 && curAnim!==4)
        {
            nextAnim = 4;
        }
    };

    this.checkCollisions = function()
    {
        var cTime;

        // with walls...
        if (this.x+this.w > HALF_CANVAS_WIDTH)
        {
            this.x = HALF_CANVAS_WIDTH-this.w;
            this.xv = 0;
            if (nextAnim===4)
                nextAnim = 0;
        }
        else if (this.x <= 0)
        {
            this.x = 0;
            this.xv = 0;
            if (nextAnim===4)
                nextAnim = 0;

            // explode!
            this.jumping = true;
            this.yv = 300; // FIX MAGIC#
            this.xv = 300; // FIX MAGIC#
            this.wallHit = new Date().getTime();
        }

        // with bottom of canvas -- (no longer necessary)
        //if (this.y+this.h > CANVAS_HEIGHT)
        //{
            //this.y = CANVAS_HEIGHT-this.h;
        //}

        // ----

        // if player is falling...
        if (this.yv < 0)
        {
            for (i=0; i<gPlatforms.length; ++i)
            {
                tmp = gPlatforms[i];

                // and there is a collision with a platform...
                if ( !(tmp.x > this.x+20
                || tmp.x+tmp.w < this.x+6
                || tmp.y > this.y+66
                || tmp.y+tmp.h < this.y+60) )
                {
                    if (this.jumping)
                        nextAnim = 3;
                    this.jumping = false;
                    this.falling = false;
                    this.y = tmp.y - this.h - 1;

                    if (this.yv < -950)
                    {
                        gPlayerHealth = 0;
                        gHealthText.innerHTML = gPlayerHealth+" Health";
                    }
                    else if (this.yv < -750)
                    {
                        if (gPlayerHealth-20 < 0)
                            gPlayerHealth = 0;
                        else
                            gPlayerHealth -= 20;
                        gHealthText.innerHTML = gPlayerHealth+" Health";
                    }
                    else if (this.yv < -600)
                    {
                        if (gPlayerHealth-10 < 0)
                            gPlayerHealth = 0;
                        else
                            gPlayerHealth -= 10;
                        gHealthText.innerHTML = gPlayerHealth+" Health";
                    }

                    this.yv = 0;
                    this.xv = 0;
                }
            }
        }

        // if player WAS on a platform...
        if (this.yv===0)
        {
            checkFall = true;
            for (i=0; i<gPlatforms.length; ++i)
            {
                tmp = gPlatforms[i];

                // check if player is STILL on a platform...
                if ( !(tmp.x > this.x+20
                || tmp.x+tmp.w < this.x+6
                || tmp.y > this.y+67
                || tmp.y+tmp.h < this.y+60) )
                {
                    checkFall = false;
                    break;
                }
            }

            // if not, start falling!
            if (checkFall)
            {
                this.falling = true;
                this.xv /= 2;
            }
        }

        // enemy collisions
        cTime = new Date().getTime();
        for (i=0; i<gChaos.length; ++i)
        {
            tmp = gChaos[i];

            if (tmp.exploding) continue;

            if (tmp.side===2)
            {
                if ( !(tmp.x > this.x+this.w
                    || tmp.x+CHAOS_WIDTH < this.x
                    || tmp.y > this.y+this.h
                    || tmp.y+CHAOS_HEIGHT < this.y) )
                {
                    //console.log("ow!2");
                    if (cTime-this.wallHit > 1500 && cTime-this.justHit>1000)
                    {
                        if (gPlayerHealth-10 < 0)
                            gPlayerHealth = 0;
                        else
                            gPlayerHealth -= 10;
                        gHealthText.innerHTML = gPlayerHealth+" Health";
                        this.justHit = new Date().getTime();
                    }
                    else if (cTime-this.justHit>1000)
                    {
                        //gChaos.splice(i,1); --i;
                        tmp.explode();
                        gPlayerPoints += 10;
                        gPointsText.innerHTML = gPlayerPoints+" Points";
                    }
                }
            }
            else
            {
                if ( !(tmp.x > HALF_CANVAS_WIDTH-this.x
                    || tmp.x+CHAOS_WIDTH < HALF_CANVAS_WIDTH-this.x-this.w
                    || tmp.y > this.y+this.h
                    || tmp.y+CHAOS_HEIGHT < this.y) )
                {
                    //console.log("ow!1");
                    if (cTime-this.wallHit > 1500 && cTime-this.justHit>1000)
                    {
                        if (gPlayerHealth-10 < 0)
                            gPlayerHealth = 0;
                        else
                            gPlayerHealth -= 10;
                        gHealthText.innerHTML = gPlayerHealth+" Health";
                        this.justHit = new Date().getTime();
                    }
                    else if (cTime-this.justHit>1000)
                    {
                        //gChaos.splice(i,1); --i;
                        tmp.explode();
                        gPlayerPoints += 10;
                        gPointsText.innerHTML = gPlayerPoints+" Points";
                    }
                }
            }
        }

        if (gPlayerHealth === 0)
            nextAnim = 5;
    };

    // ------------------------------------------ //
    // -- enormous freaking list of animations -- //
    // ------------------------------------------ //

    var anims =
    [
        { // ---- idle ---- // 0
            frames :
            [
                {
                    t : 0.00,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        4,42, 6, 10, // left leg
                        7,54, 5, 3,
                        7,59, 8, 3,
                        6,61, 14, 5,

                        12,22, 5, 4, // left arm
                        17,27, 3, 3,
                        19,31, 6, 6
                    ]
                }
            ]
        },

        { // ---- jump ---- // 1
            frames :
            [
                {
                    t : 0.05,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        9,39, 6, 8, // left leg
                        13,49, 5, 3,
                        11,54, 8, 3,
                        10,56, 14, 5,

                        12,22, 5, 4, // left arm
                        18,23, 3, 3,
                        19,25, 6, 6
                    ]
                },
                {
                    t : 0.15,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        8,38, 6, 5, // left leg
                        12,44, 5, 3,
                        10,49, 8, 3,
                        9,51, 14, 5,

                        12,22, 5, 4, // left arm
                        18,23, 3, 3,
                        19,16, 6, 6
                    ]
                }
            ]
        },

        { // ---- idlejump ---- // 2
            frames :
            [
                {
                    t : 0.05,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        8,38, 6, 5, // left leg
                        12,44, 5, 3,
                        10,49, 8, 3,
                        9,51, 14, 5,

                        12,22, 5, 4, // left arm
                        18,23, 3, 3,
                        19,16, 6, 6
                    ]
                }
            ]
        },

        { // ---- endjump ---- // 3
            frames :
            [
                {
                    t : 0.025,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        9,39, 6, 8, // left leg
                        13,49, 5, 3,
                        11,54, 8, 3,
                        10,56, 14, 5,

                        12,22, 5, 4, // left arm
                        18,23, 3, 3,
                        19,25, 6, 6
                    ]
                }
            ]
        },

        { // ---- walk ---- // 4
            frames :
            [
                {
                    t : 0.05,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        9,39, 6, 8, // left leg
                        13,49, 5, 3,
                        11,54, 8, 3,
                        10,56, 14, 5,

                        12,22, 5, 4, // left arm
                        17,27, 3, 3,
                        19,31, 6, 6
                    ]
                },
                {
                    t : 0.05,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        8,38, 6, 5, // left leg
                        12,44, 5, 3,
                        10,49, 8, 3,
                        9,51, 14, 5,

                        12,22, 5, 4, // left arm
                        17,27, 3, 3,
                        19,31, 6, 6
                    ]
                },
                {
                    t : 0.1,
                    rects :
                    [
                        0,0, 8, 16, // head

                        0,19, 11, 16, //body
                        0,34, 9, 3,
                        0,36, 7, 4,

                        4,42, 6, 10, // left leg
                        7,54, 5, 3,
                        7,59, 8, 3,
                        6,61, 14, 5,

                        12,22, 5, 4, // left arm
                        17,27, 3, 3,
                        19,31, 6, 6
                    ]
                }
            ]
        }
    ];

    this.draw = function()
    {
        var cTime;

        elapsed += gFracOfSec;

        // if the current animation frame is finished...
        if (elapsed > anims[curAnim].frames[curFrame].t)
        {
            curFrame = (curFrame+1)%(anims[curAnim].frames.length);

            // handle finished animation
            if (curFrame===0)
            {
                curAnim = nextAnim;
                if (this.jumping)
                    nextAnim = 2;
                else
                    nextAnim = 0;
            }
            elapsed = 0;
        }

        tmp = anims[curAnim].frames[curFrame].rects;

        cTime = new Date().getTime();
        var immune = (cTime-this.wallHit < 1500 || cTime-gGameStartTime < 2100);
        var flash = 0;

        if (cTime-this.justHit<200)
            flash = 1;
        else if (cTime-this.justHit<400)
            flash = 0;
        else if (cTime-this.justHit<600)
            flash = 1;
        else if (cTime-this.justHit<800)
            flash = 0;
        else if (cTime-this.justHit<1000)
            flash = 1;

        // draw the black side
        if (immune)
            ctx.fillStyle="#777777";
        else if(flash===1)
            ctx.fillStyle="#eeeeee";
        else
            ctx.fillStyle="#000000";

        for (i=0; i<tmp.length; i+=4)
        {
            ctx.fillRect
            (
                //this.x+tmp[i],
                this.x + HALF_CANVAS_WIDTH + tmp[i],
                this.y+tmp[i+1],
                tmp[i+2],
                tmp[i+3]
            );
        }

        // draw the white side as a mirror of the black side
        if (immune)
            ctx.fillStyle="#777777";
        else if(flash===1)
            ctx.fillStyle="#111111";
        else
            ctx.fillStyle="#ffffff";

        for (i=0; i<tmp.length; i+=4)
        {
            ctx.fillRect
            (
                HALF_CANVAS_WIDTH - this.x - tmp[i] - tmp[i+2],
                this.y+tmp[i+1],
                tmp[i+2],
                tmp[i+3]
            );
        }
    };

    // perform a jump if possible
    this.jump = function()
    {
        //if (curAnim!==0 && curAnim!==4 || (this.falling===true || this.jumping===true))
        if (this.x+this.w!==HALF_CANVAS_WIDTH || !gKeyStates[2])
        {
            if (this.yv!==0 || this.falling===true || this.jumping===true)
                return;
        }

        this.jumping = true;
        nextAnim = 1;

        if (this.x+this.w===HALF_CANVAS_WIDTH && gKeyStates[2])
        {
            this.yv = 400; // FIX MAGIC#
            this.xv = -150; // FIX MAGIC#
        }
        else
        {
            this.yv = 300; // FIX MAGIC#

            if (gKeyStates[0])
            {
                this.xv = -50; // FIX MAGIC#
            }
            else if (gKeyStates[2])
            {
                this.xv = 50; // FIX MAGIC#
            }
        }
    };
}


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