JavaScriptBank
06-16-2011, 11:47 PM
Good and Nice JavaScripts
Snake Game in JavaScript & YUI
There are already many versions of snake classic games (http://www.javascriptbank.com/cross-browser-black-snake-game.html) available on the Internet. Now this Snake game was just some fun ... detail (http://www.javascriptbank.com/snake-game-in-javascript--yui.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/framework/snake-game-in-javascript--yui.jpg (http://www.javascriptbank.com/javascript/framework/yui/snake-game-in-javascript--yui/preview/en/)
Demo: JavaScript Snake Game in JavaScript & YUI (http://www.javascriptbank.com/snake-game-in-javascript--yui.html/en/)
How to setup
Step 1: Use CSS code below for styling the script
CSS
<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: Place JavaScript below in your HEAD section
JavaScript
<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
<!--
/*
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: must download files below
Files
container-min.js (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/container-min.js)
container.css (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/container.css)
snake.js (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/snake.js)
yahoo-dom-event.js (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/yahoo-dom-event.js)
Command to print web page in javascript (http://www.javascriptbank.com/window-print-method.html) - Javascript Time Picker (http://www.javascriptbank.com/time-picker-with-child-window.html) - JavaScript Go To URL Box (http://www.javascriptbank.com/go-to-url.html)
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.
Snake Game in JavaScript & YUI
There are already many versions of snake classic games (http://www.javascriptbank.com/cross-browser-black-snake-game.html) available on the Internet. Now this Snake game was just some fun ... detail (http://www.javascriptbank.com/snake-game-in-javascript--yui.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/framework/snake-game-in-javascript--yui.jpg (http://www.javascriptbank.com/javascript/framework/yui/snake-game-in-javascript--yui/preview/en/)
Demo: JavaScript Snake Game in JavaScript & YUI (http://www.javascriptbank.com/snake-game-in-javascript--yui.html/en/)
How to setup
Step 1: Use CSS code below for styling the script
CSS
<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: Place JavaScript below in your HEAD section
JavaScript
<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
<!--
/*
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: must download files below
Files
container-min.js (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/container-min.js)
container.css (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/container.css)
snake.js (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/snake.js)
yahoo-dom-event.js (http://www.javascriptbank.com/javascript/framework/Snake_Game_in_JavaScript__YUI/yahoo-dom-event.js)
Command to print web page in javascript (http://www.javascriptbank.com/window-print-method.html) - Javascript Time Picker (http://www.javascriptbank.com/time-picker-with-child-window.html) - JavaScript Go To URL Box (http://www.javascriptbank.com/go-to-url.html)
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.