There are already many versions of
snake classic games available on the Internet. Now this Snake game was just some fun ...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes How to setup Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
body {
background-color:#EEF3E2;
margin:0;
padding:0;
font:13px arial;
}
#arena {
border:1px solid #000;
width:644px;
height:444px;
margin:20px 0 0 24px;
float:left;
}
#info {
float:left;
margin:20px 0 0 40px;
}
#info ul {
margin-left:0;
padding-left:16px;
}
#info #title {
color:#228B22;
font-size:20px;
}
#info #instructions ul#colorCodes {
padding:0;
}
#info #instructions #colorCodes li {
list-style-type:none;
}
#info #instructions #colorCodes span {
width:14px;
height:12px;
display:inline-block;
color:#FFF;
margin-right:4px;
}
#info #instructions #colorCodes span.foodColor {
background-color:#228B22;
}
#info #instructions #colorCodes span.bonusColor {
background-color:#FFB90F;
}
#info #score {
border:0px solid #000;
width:100px;
height:20px;
margin-top:20px;
color:#8B4513;
font-weight:bold;
font-size:15px;
}
#info #addninfo {
margin-top:20px;
font-size:12px;
font-style:italic;
}
.cell {
border:0px solid #000;
width:14px;
height:12px;
background-color: #FFF;
float:left;
}
.clear {
clear:both;
}
</style>
<link rel="stylesheet" type="text/css" href="container.css">
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script src="yahoo-dom-event.js"></script>
<script src="container-min.js"></script>
<script src="snake.js"></script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<!--
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<body class="yui-skin-sam">
<div id="wrapper">
<div id="arena"></div>
<div id="info">
<div id="title">SNAKE</div>
<div id="score">Score: <i>0</i></div>
<div id="instructions">
<ul>
<li>Press ARROW keys to move the snake.</li>
<li>Press P to pause or resume.</li>
<li>Earlier you eat the food, more points you get.</li>
<li>Snake gets killed if it collides with the walls or its own body.</li>
<li>Color codes:
<ul id=colorCodes>
<li><span class=foodColor></span>Food (Max 250 points, length increases by 4 units)</li>
<li><span class=bonusColor></span>Bonus (500 points, disappears if not eaten within 10 seconds)</li>
</ul>
</li>
</ul>
</div>
<div id=credits>
This game is created in Javascript using YUI 2 framework.
</br>
Author: <a href="http://odhyan.com">Saurabh Odhyan</a>
</br>
</div>
<div id="addninfo">
Works well on FF, Chrome and Safari. Didn't have the patience to debug on IE.
</div>
</div>
<div class="clear"></div>
</div>
</body>
Step 4: downloads
Files
container-min.js container.css snake.js yahoo-dom-event.js 
Snake Game in JavaScript & YUI 
Linear Mode
