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.

Recently Published


Is Your Business Site Fully Accessible?

Does your business site have full accessibility? Even with the ADA ...


Secure Web: 5 Best Practices For Application Development

There are several essential best practices for secure web ...


Laravel PHP Framework: Features and benefits for web development

Companies and organizations are focusing on developing custom web ...


Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...


Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...


Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...


Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...


Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...


Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...