Cobra

A snake game

by Anil D

HTML

<body>
    <div id="scoreBoard">
        Press Tap/Click to Start<br/>
        Your score : <span id="score">0</span><br/>
        <span style="font-size:10px">Developed by Anil Divse</span>
     </div>
    <div id="board">
    </div>
 </body>

CSS

*{margin:0;padding:0;font-family:trebuchet ms;}
body{width:90%;position:realtive;margin:0 auto;}

/* Button 6d */
.btn-6d {
    background: none repeat scroll 0 0 #FFFF90;
    border: 2px dashed #226FBE;
    color: #FF0000;
    font-size: 28px;
    font-weight: bold;
    height: 40px;
    text-align: center;
    width: 300px;
}
 
.btn-6d:hover {
    background: transparent;
    background-color: turquoise;
}
#score {
    color : red;
}
		table{margin:0 auto 10px auto;}
		td{width:6px;height:6px;border:1px solid #fff;cellpadding:0;cellspacing:0;}
		td.snakeCell{background:#000;-moz-border-radius:5px;border:1px solid #000;box-shadow:1px 1px 1px #aaa;}
		td.snakeHead{background:red;-moz-border-radius:5px;border:1px solid red;}	
		td.fruitCell{background:green;-moz-border-radius:5px;border:1px solid green;box-shadow:1px 1px 1px #aaa;}
 
		#scoreBoard{text-shadow:2px 2px 1px #fff;box-shadow:0 -3px 5px #aaa;width:282px;margin:50px auto 0 auto;border:1px solid #ccc;background:#eee;font-weight:bold;padding:10px;}
		.gameOver{font-weight:bold;text-shadow:2px 2px 1px #fff;position:absolute;top:0;left:550px;background:#eee;color:red;width:70px;border:50px solid #eee;text-align:center;-moz-border-radius:90px;-webkit-border-radius:90px;border-radius:90px;box-shadow:3px 3px 10px #999;}

#boardtable{border:1px solid #ccc;box-shadow:3px 3px 10px #999;background: none repeat scroll 0 0 #40E0D0;}

JavaScript

var direction = 'right', speed = 1000, ticker = null, fruitCell = [], score = 0, size = 30;
		var snakeCells = [
			[ 10, 14 ],
			[ 10, 13 ],
			[ 10, 12 ],
			[ 10, 11 ],
			[ 10, 10 ],
			[ 10, 9 ],
			[ 10, 8 ],
			[ 10, 7 ]
		];
		var snakeHead = [ 10, 14 ];
 
		function renderSnake (){
			$('td').removeClass('snakeCell snakeHead');
			for (var cell in snakeCells ){
				$('tr').eq( snakeCells[cell][0] ).find('td').eq(snakeCells[cell][1]).addClass('snakeCell');
			}
			$('tr').eq( snakeHead[0] ).find('td').eq(snakeHead[1]).addClass('snakeHead');
		}
 
		function getFruitCell() {
			fruitCell = [ getRandomNumber( $( 'tr' ).length ), getRandomNumber( $( 'tr:eq(0)>td' ).length ) ];
		}
 
		function gameOver() {
			$('#boardtable').css('background', "url('https://lh4.googleusercontent.com/-iQe47HkkFgk/AAAAAAAAAAI/AAAAAAAAAA0/-_-Pf6DyCxo/photo.jpg') repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);");
            $( document ).unbind('keydown');
			clearInterval( ticker );
		}
 
		function updateSnakeCell(){
			var snakeNewHead = [];
			switch(direction){
				case 'right':
					snakeNewHead = [ snakeHead[0], snakeHead[1]+1 ];
					break;
				case 'left':
					snakeNewHead = [ snakeHead[0], snakeHead[1]-1 ];
					break;
				case 'up':
					snakeNewHead = [ snakeHead[0]-1, snakeHead[1] ];
					break;
				case 'down':
					snakeNewHead = [ snakeHead[0]+1, snakeHead[1] ];
					break;
			}
			var newCell = {length:0}
			if( snakeNewHead[0] < 0 || snakeNewHead[1] < 0 ) {
				gameOver();
				return;
			} else if( snakeNewHead[0] >= size || snakeNewHead[1] >= size ) {
				gameOver();
				return;
			}
			var newCell = $('tr').eq( snakeNewHead[0] ).find('td').eq(snakeNewHead[1]);
			if( newCell.length == 0 ) {
				gameOver();
			} else {
				if ( newCell.hasClass('snakeCell') ) {
					gameOver();
				} else {
					if( newCell.hasClass( 'fruitCell' ) ) {
						snakeCells.push( [] );
						getFruitCell();
						renderFruitCell();
						score += 1;
						$( '#score' ).text(...