Snake

by juvian

HTML

<div id='game'>
    
</div>
<div id='snake'></div>
<div id='cell'></div>
<div id='msg' class='hide'><p>Paused <br/> Score:<p class='score'>0</p></p></div>

CSS

.snake{
    background-color:red;
    z-index:9998;
}
.snake_head{
    background-color:purple;
    background-image:none !important;
}
.coin{
    background-image:url('http://www.superluigibros.com/images/media/artwork/gameboy/sml2/items_coins/turtle_gold_coin.png');
    z-index:9998;
    background-size:   cover;                      /* <------ */
    background-repeat: no-repeat;    
}
.cell{
    
}
.pig{
    background-image:url('http://www.maximumpc.com/files/u69/angry_birds_money.jpg');
    z-index:9000;
    background-size:   cover;                      /* <------ */
    background-repeat: no-repeat;
}
.circle{
    border-radius: 50%;
}

body{
  

}
#game{
    text-align:center;
    border:1px solid;
    position:absolute;
}

.food{
    background-color:blue;
    z-index:9000;
}
.paused{
    display:block;
    opacity:0.7;
    background-color: #777;
}
#msg{
    z-index:9999;
    text-align: center;
    vertical-align: middle;
    color:red;
    font-size:50px;
    display:inline-block;
}
#msg p{
    line-height:1.2em;
}
.hide{
    display:none !important;
}
.show{
    display:inline-block;
}

JavaScript

$(function(){

var Game=function(){
    this.snake;
    this.width;
    this.height;
    this.cell_width=20;
    this.cell_height=20;
    this.board;
    this.running=false;
    this.keyboard;
    this.container=$('#game');
    this.interval;
    this.fps=60;
    this.msg=$('#msg');
    this.over=false;
    
    var game=this;
    var snake=this.snake;
    var board=this.board;
    var keyboard=this.keyboard;
    
    this.pause=function(){
        if(game.over) return 0;
        if(game.running){
            clearInterval(game.interval);
            game.running=false; 
            game.container.addClass('paused');
            game.container.children('#msg').attr('class','show').find('.score').text(snake.childs.length-4);
        }else{
            game.container.removeClass('paused');
            game.container.children('#msg').attr('class','hide');
            game.start();
        }
    }
    
    this.restart=function(){
        game.end();
        game.container.removeClass('paused');
        game.over=false;
        game.loadGame();
    }
    
    this.end=function(){
        clearInterval(game.interval);
        game.running=false;
        game.over=true;
        console.log('ended')
        game.container.children('#msg').attr('class','show').html('<p>Game Over <br/> Press R</p>')
    }
    
    this.KeyboardManager=function(){
        
        var keys={"37": "L", "38":"U", "39":"R", "40":"D" };
        var key;
        var opposites={'R':'L','L':'R','U':'D','D':'U'};
        this.getKey=function(){return key}
        this.setKey=function(_key){key=_key}
        this.blocked=false;
        $(document).keydown(function(e) {
            if(game.running){
                    if(keys.hasOwnProperty(e.keyCode)){
                        if(keys[e.keyCode] != opposites[key]){
                            if(!board.blocked){
                                key=keys[e.keyCode];
                                board.blocked=true;
                           ...