86 lines
3.5 KiB
HTML
86 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P|PT+Mono' rel='stylesheet' type='text/css'>
|
|
<link href="snake.css" type="text/css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
|
|
<div id=container>
|
|
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
|
|
<header><h1>SNAKE</h1></header><!--
|
|
|
|
--><section id=description>
|
|
<h4>Play SNAKE!</h4>
|
|
<p>You are the <span style="color: #88F">BLUE</span>
|
|
snake. Eat the <span style="color: green">GREEN</span> food to
|
|
grow longer! But be careful! Don't run into the walls or
|
|
yourself!</p>
|
|
</section><!--
|
|
|
|
--><section id=levelSelect>
|
|
<h4>Level Select</h4>
|
|
</section><!--
|
|
|
|
--><section id=gameContainer>
|
|
<canvas id=snakeCanvas tabIndex=1></canvas>
|
|
</section><!--
|
|
|
|
--><section id=controls>
|
|
<h4>Controls</h4>
|
|
<ul><li><img src="arrow.svg" class="arrow up">
|
|
<img src="arrow.svg" class="arrow down">
|
|
<img src="arrow.svg" class="arrow left">;
|
|
<img src="arrow.svg" class="arrow right">: Move </li>
|
|
<li>SPACE: (Re)start.</li>
|
|
<li>PAUSE: (Un)Pause</li>
|
|
</ul>
|
|
</section><!--
|
|
|
|
--><section id=options>
|
|
<h4>Options</h4>
|
|
<button>Level Editor
|
|
<div class=corner></div><div class=corner></div>
|
|
<div class=corner></div><div class=corner></div></button>
|
|
</section><!--
|
|
|
|
--><section id=editorControls>
|
|
<label>Speed</label><input type=text id=speed>
|
|
<label>Rows</label><input type=text id=rows>
|
|
<label>Columns</label><input type=text id=cols>
|
|
<input type=checkbox id=hasGoal><label>Winning Score</label><!--
|
|
--><input type=text id=targetScore>
|
|
<label>Growth</label><input type=text id=growthFactor>
|
|
<label>Growth Increase</label><!--
|
|
--><input type=text id=growthFactorIncrease>
|
|
</section><!--
|
|
|
|
--><section id=score>
|
|
<h4>Score</h4>
|
|
<span class=value>0</span>
|
|
</section>
|
|
</div>
|
|
<div class=debug-aspect>
|
|
<span class=wide-only>wide</span>
|
|
<span class=landscape-only>landscape</span>
|
|
<span class=even-only>even</span>
|
|
<span class=portrait-only>portrait</span>
|
|
<span class=tall-only>tall</span>
|
|
</div>
|
|
<div class=debug-size>
|
|
<span class=small-only>small</span>
|
|
<span class=medium-only>medium</span>
|
|
<span class=large-only>large</span>
|
|
<span class=ultralarge-only>ultralarge</span>
|
|
</div>
|
|
|
|
<script src="../resources/js/jquery-2.1.1.min.js" type="application/javascript"></script>
|
|
<script src="../resources/js/underscore-1.7.0.min.js" type="application/javascript"></script>
|
|
<script src="snake.js" type="application/javascript"></script>
|
|
<script src="snake-levels.js" type="application/javascript"></script>
|
|
<script src="snake-page.js" type="application/javascript"></script>
|
|
|
|
</body>
|
|
</html>
|