<!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> | |
写的一段js贪吃蛇代码,希望大家喜欢
最新推荐文章于 2024-08-19 15:50:15 发布