Cobra

Snake Game

by Anil D

HTML

<body>
    <div id="scoreBoard">Developed by Anil Divse &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Your score : <span id="score">0</span></div>
    <div class="gameOver" style="display:none">Oops! Game Over</div>
    
      <div id="btnDiv">
      <table>
      <tr>
        <td></td>
        <td><button id="upbtn" class="btn btn-6 btn-6d">up</button></td>
        <td></td>
      </tr>
      <tr>
        <td><button id="lftbtn" class="btn btn-6 btn-6d">left</button></td>
        <td></td>
        <td><button id="rtbtn" class="btn btn-6 btn-6d">right</button></td>
      </tr>
      <tr>
        <td></td>
        <td><button id="dnbtn" class="btn btn-6 btn-6d">down</button></td>
        <td></td>
      </tr>          
      </table>
     </div>
 </body>

CSS

*{margin:0;padding:0;font-family:trebuchet ms;}
body{width:900px;position:realtive;margin:0 auto;}
/* Button 6d */
.btn-6d {
    border: 2px dashed #226fbe;
    width: 40px;
}
 
.btn-6d:hover {
    background: transparent;
    color: #226fbe;
}
#score {
    color : red;
}
		table{margin:0 auto 10px auto;border:1px solid #ccc;box-shadow:3px 3px 10px #999;}
		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:482px;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;}

JavaScript

var direction = 'right', speed = 100, ticker = null, fruitCell = [], score = 0, size = 50;
		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() {
			$('div.gameOver').show('fast', function() {
				$( this ).animate({top:250}, 'slow');
			});
            $( 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( score );
						speed = speed - 10 > 5 ? speed - 10 : speed;
						clearInterval( ticker...