[Game] Flappy Bird with JavaScript

http://blog.kangrian.com

by SHELDON PASCIAK

HTML

<canvas id="gameCanvas"  />

CSS

html, body{
  margin : 0px;
  width : 100%;
  height : 100%;
  overflow: hidden;
}

#gameCanvas{
  position: absolute;
}

JavaScript

//Entry for http://jams.gamejolt.io/lowrezjam2014/games
//sprite sheet : http://sakri.net/stuff/canvas/FlappyBird32x32Tall.png

var readyStateCheckInterval = setInterval( function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        initGame();
    }
}, 100);

//SPRITE SHEET ASSET LOCATION RECTANGLES
var bgLoc = {x:0, y:0, width:32, height:32};
var groundLoc = {x:0, y:31, width:35, height:1};
var instructionsLoc = {x:6, y:49, width:17, height:21};
var gameOverLoc = {x:6, y:32, width:21, height:17};
var birdLocs = [{x:6, y:70, width:5, height:3}, {x:11, y:70, width:5, height:3}, {x:16, y:70, width:5, height:3}];
var tubeLoc = {x:0, y:32, width:6, height:44};
var scoreLocs = [
    {x:32, y:68, width:15, height:9},
    {x:27, y:32, width:5, height:9},
    {x:32, y:32, width:5, height:9},
    {x:27, y:41, width:5, height:9},
    {x:32, y:41, width:5, height:9},
    {x:27, y:50, width:5, height:9},
    {x:32, y:50, width:5, height:9},
    {x:27, y:59, width:5, height:9},
    {x:32, y:59, width:5, height:9},
    {x:27, y:68, width:5, height:9}
];

var flappyBirdSource = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAABNCAYAAAAhOa00AAACFElEQVRoge2YO27DMAyGdZWga86RMWOQk3Tplq3IHXKYAB2LHKDt0gAd3DME6tDYlaWfD8mynQY0QMgWZfLjT9l5uKeXVz+nOXQYlEEZlEEZlEEZlEEZlEEZ1G1CNZe3zuIbQ592jdYPoVDCKQ1CPX/t/ZxmUAZlUAYlQT0el/7QbP2n3/spzw/NNvElYK1js1uETp9h0nrkp+7hocKDug4DUuvieGiuNy9BUUnjJBxsqEoMBeeHQnFjkBzFLIdCCmjGKDkJVdy+0lELFSpWBIWUi1sAE6VtotfWaB+CAi1E81ntQ++PqYyG0qgU+yklqkJpRpScO6egVe0bA4rzV4OiVJgVCiWSFOSKyYaS2gIrJjYzq95mt/Ax1BVMbEXsp6CE9rlkHQdVwRKlYKtSePYoBcmJh3x8ENQi7rpSkXIQtKeEfaQusqCwv0A1oVykDJi7E6ghe2rS9imrhOpkqt0PJFhWrKFQrr1hQNvIOANiVauupuq/Ae8WStU+5gNZhCrZU3FRZIEj/pphFSuCQk9cXG3sV6onqy5980SSowoz9tkwpW4SCt08BlTV9oXBYHACSjAVVE85hUIUlP6pVbwScgKKbUPbQtW+03HpW/u+fHSJtHMcVDgSc/T/U22y83rlz+uVD0HbObRuVCjnnHvfPSRJwrnT9U95tI6CQu3Lgqp8wCd5bqgO7l9AKd9v40Jx9gPPtP268oor4QAAAABJRU5ErkJggg==";
var spriteSheetImage = new...