Well while checking the simplicity of jQuery , tried making snake game which is quite popular on mobiles or cellphones. Since I made it quickly and might miss some shorthand or small syntax. Please make me correct if I have made any mistake in the code. So lets start will simple thing , the html.

Why not to check the DEMO before moving on.

I scored 900 points as my highest score. Post in your highest score and I will try to beat that. 🙂

HTML

<body> <div id="scoreBoard">Your Score : 0</div> <div class="gameOver" style="display:none">Oops! Game Over</div> </body>

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> < script type = "text/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' ) ; } ) ; 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 += 100 ; $ ( '#scoreBoard' ) . html ( 'Your Score : ' + score ) ; speed = speed - 10 > 5 ? speed - 10 : speed ; clearInterval ( ticker ) ; startGame ( ) ; } for ( var i = ( snakeCells. length - 1 ) ; i > 0 ; i -- ) { snakeCells [ i ] = snakeCells [ i - 1 ] ; } snakeCells [ 0 ] = snakeHead = snakeNewHead ; renderSnake ( ) ; } } } function getRandomNumber ( limit ) { return parseInt ( Math . random ( ) * limit % limit ) ; } function getNewDirection ( keyCode ) { var codes = { 37 : 'left' , 38 : 'up' , 39 : 'right' , 40 : 'down' } ; if ( typeof codes [ keyCode ] != 'undefined' ) { var newDirection = codes [ keyCode ] , changeDirection = true ; switch ( direction ) { case 'up' : changeDirection = newDirection != 'down' ; break ; case 'down' : changeDirection = newDirection != 'up' ; break ; case 'right' : changeDirection = newDirection != 'left' ; break ; case 'left' : changeDirection = newDirection != 'right' ; break ; } direction = changeDirection ? newDirection : direction ; } } function renderBoard ( ) { var rowhtml = '' ; for ( var i = 0 ; i < size ; i ++ ) { rowhtml += '<td cellpadding="0" cellspacing="0"></td>' } html = [ ] ; for ( var i = 0 ; i < size ; i ++ ) { html. push ( '<tr cellpadding="0" cellspacing="0">' + rowhtml + '</tr>' ) ; } $ ( document. body ) . append ( '<table>' + html. join ( '

' ) + '</table>' ) ; getFruitCell ( ) ; } function renderFruitCell ( ) { $ ( 'td' ) . removeClass ( 'fruitCell' ) ; $ ( 'tr' ) . eq ( fruitCell [ 0 ] ) . find ( 'td' ) . eq ( fruitCell [ 1 ] ) . addClass ( 'fruitCell' ) ; } function startGame ( ) { ticker = setInterval ( updateSnakeCell , speed ) ; } $ ( document ) . ready ( function ( ) { renderBoard ( ) ; renderFruitCell ( ) ; $ ( document ) . bind ( 'keydown' , function ( e ) { getNewDirection ( e. keyCode ) ; } ) ; startGame ( ) ; } ) ; </ script >

CSS

* { margin : 0 ; padding : 0 ; font-family : trebuchet ms ; } body { width : 900px ; position : realtive ; margin : 0 auto ; } 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 ; }

Here is the DEMO.

That’s all folks! Updations and errors are welcome.