How to make Snake Game using jQuery


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. 🙂


Your Score : 0




*{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.

  • March 29, 2012
8 Best Free Stock Video Websites for Tiktok, Reels, and Shorts Top 5 PHP Frameworks: Fast and Secure