| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <title>jQuery Snakey</title> |
| <!--<base href="http://jquery-snakey.googlecode.com/svn/trunk/" />--> |
| <link rel="stylesheet" type="text/css"media="screen" href="css/jq.css" /> |
| <link rel="stylesheet" type="text/css"media="screen" href="css/tabs.css" /> |
| <link rel="stylesheet" type="text/css"media="screen" href="css/snake.css" /> |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> |
| <!--<script type="text/javascript" src="js/jquery.js"></script>--> |
| <script type="text/javascript" src="js/jquery.ui.core.js"></script> |
| <script type="text/javascript" src="js/jquery.snake.js"></script> |
| <script type="text/javascript" src="js/common.js"></script> |
| </head> |
| <body> |
| <div> |
| <a id="logo" href="http://jquery.com"title="Powered By jQuery"></a> |
| </div> |
| <h1 id="banner"> |
| jQuery Snakey |
| </h1> |
| <div id="main"> |
| |
| <ul id="nav" class="anchors"> |
| <li><a href="#overview">Overview</a></li> |
| </ul> |
| <div id="overview" class="tabContent"> |
| |
| <div id="snake-col-info" class="col-r"> |
| |
| <div id="marginLeft"> |
| |
| <h2><a href="#instructions"class="accordian open">Instructions</a></h2> |
| <div id="instructions"> |
| <p> |
| Use the keyboard arrow keys to control the snake. Eat the specified amount of cherries to advance to the next level, |
| without slithering into yourself or a wall. The speed and length of the snake will increase with every cherry eaten. |
| The game ends when you have used up all your lives, or when you finish all levels. Have fun! |
| </p> |
| </div> |
| |
| <h2><a href="#shortcut-keys"class="accordian open">Shortcut Keys</a></h2> |
| <div id="shortcut-keys"> |
| <ul> |
| <li>P : Pause/Resume Game</li> |
| <li>N : New Game</li> |
| <li>G : Toggle Grid</li> |
| </ul> |
| </div> |
| |
| <h2><a href="#high-scores"class="accordian">High Scores</a></h2> |
| <div id="high-scores" class="scores hidden"> |
| (coming soon..) |
| <!-- |
| <span class="head"> |
| <span class="col1"> |
| Pos. |
| </span> |
| <span class="col2"> |
| Score |
| </span> |
| <span class="col3"> |
| Name |
| </span> |
| </span> |
| --> |
| </div> |
| |
| <h2><a href="#bugs"class="accordian">Bugs & Todo</a></h2> |
| <div id="bugs" class="hidden"> |
| <ul> |
| <li class="strike">TODO: Make snake grow in length</li> |
| <li class="strike">TODO: Introduce levels</li> |
| <li class="strike">TODO: Introduce wall obstacles</li> |
| <li class="strike">TODO: Game over when snake slithers into itself</li> |
| <li class="strike">BUG: new game, need to reset segment object using initial values</li> |
| <li class="strike">BUG: cherries cannot be positioned under snake or wall segments</li> |
| <li>BUG: snake needs to grow from tail and not from head</li> |
| <li class="strike">TODO: add multiple wall obstacles</li> |
| <li>TODO: Track/store high scores</li> |
| </ul> |
| </div> |
| |
| <h2><a href="#source"class="accordian">Source</a></h2> |
| <div id="source" class="hidden"style="margin-top:0px"> |
| <ul> |
| <li> |
| <a href="http://jquery-snakey.googlecode.com/svn/trunk/js/jquery.snake.js">jquery.snake.js</a> |
| (Uncompressed & commented) |
| </li> |
| </ul> |
| </div> |
| |
| <h2><a href="#info"class="accordian">Info/Contact</a></h2> |
| <div id="info" class="hidden"> |
| <ul> |
| <li> |
| <p>Tested on all major browsers:</p> |
| |
| <p class="browser-icons"> |
| <a class="firefox" title="Firefox 2 & 3"href="http://www.mozilla.com/firefox/"> </a> |
| <a class="explorer" title="Explorer 6, 7 & 8"href="http://www.microsoft.com/windows/products/winfamily/ie/"> </a> |
| <a class="safari" title="Safari 3"href="http://www.apple.com/safari/"> </a> |
| <a class="opera" title="Opera 9"href="http://www.opera.com"> </a> |
| <a class="chrome" title="Chrome"href="http://www.google.com/chrome"> </a> |
| </p> |
| </li> |
| <li> |
| <p> |
| Please use the <a href="http://code.google.com/p/jquery-snakey/issues/list">issue tracker</a> to log any bugs. Any feedback can be sent to: |
| |
| </p> |
| <p> |
| <img src="img/gmail.png"alt="my email" /> |
| </p> |
| </li> |
| <li> |
| <p> |
| This isn't a particularly large project, but it was fun making it! <br/> |
| You can check out the project, including all source code & |
| repository at <a href="http://jquery-snakey.googlecode.com">jquery-snakey.googlecode.com</a> |
| </p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div id="snake-col-map" class="col-l"> |
| |
| <!-- |
| <noscript class="error"> |
| You need javascript enabled on your browser to be able to play this game. |
| </noscript> |
| --> |
| |
| <div id="map1"> |
| <span id="map-msg"> |
| <!-- click to give focus to the document --> |
| <a href="#start"id="start-game"> |
| <img src="img/snake/start_game.jpg"alt="Start Game!" /> |
| </a> |
| </span> |
| </div> |
| <div id="stats"> |
| <span class="right">Eaten: |
| <span id="stats-eaten">0</span> / |
| <span id="stats-totcherries">0</span> |
| </span> |
| Level: <span id="stats-level">0</span> | |
| Lives: <span id="stats-lives">0</span> | |
| Score: <span id="stats-score">0</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
|