Fun Zombie Game

Just Killing Zombies

by vishalvasani

HTML

<div id="HUD"><span id="Score">Score: <span class="digits">0</span></span> <span id="Level">Level: <span class="digits">0</span></span></div>
<div id="Graveyard"></div>

CSS

body,html { height:100%; min-height:100%; background:#000;}
#Graveyard { background: #393; min-height:90%; position:relative; }
.zombie { background:url(http://www.cs.unc.edu/~gb/media/2009/07/zombiewalking.gif); color:white; cursor:crosshair;height:44px; left: 0; position:absolute; top: 0; width:46px; }
.zombie .health { position:absolute;top:-13px;left:0;}
.digits { font-weight: 700; font-size:121% }

.ui-button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffc3bd;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffc3bd;
    box-shadow:inset 0px 1px 0px 0px #ffc3bd;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d61200), color-stop(1, #750000) );
    background:-moz-linear-gradient( center top, #d61200 5%, #750000 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d61200', endColorstr='#750000');
    background-color:#d61200;
    cursor: pointer;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #a81a0d;
    display:inline-block;
    color:#ffbdc1;
    font-family:Verdana;
    font-size:19px;
    font-weight:bold;
    padding:6px 14px;
    text-decoration:none;
    text-shadow:1px 1px 0px #42100d;
}
.ui-button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c41000), color-stop(1, #d61200) );
    background:-moz-linear-gradient( center top, #c41000 5%, #d61200 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c41000', endColorstr='#d61200');
    background-color:#c41000;
}
.ui-button:active {
    position:relative;
    top:1px;
}
#HUD { position:fixed;bottom:0;left:0;width:100%;background:#000; color:#FFF; }
#Score { margin-left:10px; }
#Level { float:right; margin-right:10px; }
#Start {position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
margin-top: -20px;}

JavaScript

/* Shared utility functions */
window.Utils = {
    Random: function (input){
        input = input || 1;
        return Math.floor(Math.random()*input)+1;
    }
};

/** Total Score */
window.Score = 0;

/** @constructor */
window.Stage = function (startLevel){
    var i;
    this.level = startLevel || 1;
    this.zombies = [];
    this.DOM = $('#Graveyard');
    this.weapon = new Weapons.Hammer();
    $('#Level').find('.digits').animate({text:this.level});
    for (i = 0; i < this.level; i++){
        this.zombies.push( new Zombie(this, i) );
    }
};

/** Stage Prototype */
Stage.prototype = (function ($){
    function checkCollision(){
        var collision = false;
        var stageBottom = this.DOM.offset().top+this.DOM.height();
        //console.log(stageBottom);
        for (var i=0;i<this.zombies.length;i++){
            if (this.zombies[i] !== null){
                if (this.zombies[i].DOM.offset().top+this.zombies[i].DOM.height() >= stageBottom){
                    collision = true;
                    break;
                }
            }
        }
        return collision;
    }
    var publicObject = {
            enemiesLeft: function (){
                var count = 0,
                    i;
                for (i=0;i<this.zombies.length;i++){
                    if(this.zombies[i] !== null) {
                        count++;
                    }
                }
                return count;
            },
            status: function (){
                if (checkCollision.call(this)){
                    this.lose();
                }else if (!this.enemiesLeft()){
                    this.win();
                }
            },
            nextStage: function (){
                console.log("You Survived Level "+this.level);
                window.game = new Stage(this.level+1);
            },
            updateScore: function (amount){
                Score += amount;
                $('#Score').find('.digits').text(Score);
            },
  ...