Snake Game in JavaScript & YUI

**JavaScriptBank** · Jun 16th, 2011, 8:30 pm

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/framework/snake-game-in-javascript--yui.jpg[/IMG]
Demo: JavaScript Snake Game in JavaScript & YUI

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<style type="text/css">
/*
     This script downloaded from w w w.JavaScriptBank. com
     Come to view and download over 2000+ free javascript at w w w.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: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script src="yahoo-dom-event.js"></script>
<script src="container-min.js"></script>
<script src="snake.js"></script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<!--
/*
     This script downloaded from w w w.JavaScriptBank. com
     Come to view and download over 2000+ free javascript at w w w.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="hxxp ://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>