jQuery Game

by Daniel Hall

HTML

<div id="container">
    <h3>Mario VS. Bowser</h3>
    <div id="game">
        <div id="score">0</div>
        <div id="game-over">You WIN!</div>
        <img id="sun"       src="http://www.cavabouger.com/mario/images/sun.gif"/>       
        <div class="mario mario-walk-right"></div>  
        <img id="ball"      src="http://www.cavabouger.com/mario/images/fireball.gif"/>          
        <img id="boss"      src="http://www.cavabouger.com/mario/images/boss.gif"/>
        <img id="explosion" src="http://www.cavabouger.com/mario/images/explosion.gif"/>        
    </div>    
    <button><blink>Click to Start</blink></button>
    <div id="footer">Space: Shoot, Left: Move Left, Up: Jump, Right: Move Right</div>
</div>

CSS

@font-face {
  font-family: 'Carter One';
  font-style : normal;
  font-weight: normal;
  src        : local('CarterOne'), url('http://themes.googleusercontent.com/static/fonts/carterone/v2/VjW2qt1pkqVtO22ObxgEBRsxEYwM7FgeyaSgU71cLG0.woff') format('woff');
}
body {
    width: 1024px;
    
    background : url(http://www.cavabouger.com/mario/images/super-mario.jpg) top left no-repeat;
    font-family: "Carter One", impact;
    font-size  : 16px; 
    text-align : center;    
}

/** Mario Game **/
#container {
    margin: 25px auto 0 auto;     
    border: 10px double #000; padding: 20px;
    height: 380px; width: 480px;
        
    background-image: -webkit-linear-gradient(20deg, #FFF, #EEE);
    background-image: -moz-linear-gradient(20deg, #FFF, #EEE);
    background-image: -ms-linear-gradient(20deg, #FFF, #EEE);
    background-image: -o-linear-gradient(20deg, #FFF, #EEE);    

    -webkit-box-shadow: 5px 5px 10px #000;    
    -moz-box-shadow   : 5px 5px 10px #000;
    -ms-box-shadow    : 5px 5px 10px #000;
    -o-box-shadow     : 5px 5px 10px #000;    
    box-shadow        : 5px 5px 10px #000;
    
    -webkit-transform: rotate(2deg);     
    -moz-transform   : rotate(2deg);
    -ms-transform    : rotate(2deg); 
    -o-transform     : rotate(2deg); 

    -webkit-border-radius: 3px;          
    -moz-border-radius   : 3px;      
    -ms-border-radius    : 3px;      
    -o-border-radius     : 3px;          
    border-radius        : 3px;     
}
h3 {
    color    : red;  
    font-size: 20px;
    -webkit-transform: rotate(-2deg);    
    -moz-transform   : rotate(-2deg);
    -ms-transform    : rotate(-2deg); 
    -o-transform     : rotate(-2deg);    
}
#footer {
    display: block;  
    margin : 0 0 5px 0;
    -webkit-transform: rotate(-2deg);    
    -moz-transform   : rotate(-2deg);
    -ms-transform    : rotate(-2deg);
    -o-transform     : rotate(-2deg);       
    
}
button {
    position: absolute; top: 200px; left: 200px; height: 40px; width:...

JavaScript

// http://api.jquery.com/animate/
jQuery(document).ready(function() {    
    // Cache DOM Elements for quick access
    var score      = jQuery("#score");
    var scoreCount = 1;
    
    var gameOver = jQuery("#game-over");    
    var sun      = jQuery("#sun");    
    
    var mario        = jQuery(".mario");
    var marioDirLeft = false;
    
    var ball     = jQuery("#ball");
    var ballSize = {
        height: ball.height(),
        width : ball.width()
    }; 
    
    var boss     = jQuery("#boss");
    var bossSize = {
        height: boss.height(),
        width : boss.width()
    };
    
    var explosion = jQuery("#explosion");
     
    // Not all browsers support OGG (http://html5doctor.com/native-audio-in-the-browser/)    
    var sndTheme      = new Audio("http://cavabouger.com/mario/sounds/theme.ogg");    
    var sndExplosion  = new Audio("http://cavabouger.com/mario/sounds/explosion.ogg");
    var sndFireBall   = new Audio("http://cavabouger.com/mario/sounds/fireball.ogg");
    var sndJump       = new Audio("http://cavabouger.com/mario/sounds/jump.ogg");
    var sndGameOver   = new Audio("http://cavabouger.com/mario/sounds/game-over.ogg");
           
    // Generate Random Range (for speed & direction)
    function randomMinMax(min, max) {
        return Math.floor(min + (1 + max- min) * Math.random());
    }
    
    // Collision Testing
    // item1 position & item1 size
    // item2 position & item2 size
    function testCollision(position1, size1, position2, size2) {
        if (((position1.left + size1.width)  > position2.left) &&
            ((position1.top  + size1.height) > position2.top)  &&
            ((position2.left + size2.width)  > position1.left) &&
            ((position2.top  + size2.height) > position1.top)) {
            
            // BadaBoom !
            triggerExplosion(position1.top, position1.left);
        }
    }
    
    // Boss Blink Animation (count must be even number)
    function blinkBoss(count) {
      ...