2014-12-11 22:52:55 -06:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-12-12 05:01:43 -06:00
|
|
|
<meta charset=utf-8>
|
2014-12-14 08:51:19 -06:00
|
|
|
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P|PT+Mono' rel='stylesheet' type='text/css'>
|
2014-12-11 22:52:55 -06:00
|
|
|
<link href="snake.css" type="text/css" rel="stylesheet">
|
2014-12-12 05:01:43 -06:00
|
|
|
<script src="snake.js" type="application/javascript"></script>
|
2014-12-14 08:51:19 -06:00
|
|
|
<script src="snake-levels.js" type="application/javascript"></script>
|
2014-12-11 22:52:55 -06:00
|
|
|
</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>
|
2014-12-12 05:01:43 -06:00
|
|
|
<header><h1>SNAKE</h1></header><!--
|
|
|
|
|
|
|
|
|
|
--><section id=description>
|
|
|
|
|
<h4>Play SNAKE!</h4>
|
|
|
|
|
<p>You are the <span style="color: #88F">BLUE</span>
|
2014-12-11 22:52:55 -06:00
|
|
|
snake. Eat the <span style="color: green">GREEN</span> food to
|
|
|
|
|
grow longer! But be careful! Don't run into the walls or
|
2014-12-12 05:01:43 -06:00
|
|
|
yourself!</p>
|
|
|
|
|
</section><!--
|
|
|
|
|
|
|
|
|
|
--><section id=levelSelect>
|
|
|
|
|
<h4>Level Select</h4>
|
|
|
|
|
<h5>Beginner</h5>
|
|
|
|
|
<ol>
|
|
|
|
|
<li levelNum=0 class=selected>Hello Snake!</li>
|
|
|
|
|
<li levelNum=1>Room to Grow</li>
|
|
|
|
|
<li levelNum=2>North and South</li>
|
|
|
|
|
<li levelNum=3>4 Small Rooms</li>
|
|
|
|
|
<li levelNum=4>Polka Dots</li>
|
|
|
|
|
<li levelNum=5>Toaster Face</li>
|
|
|
|
|
<li levelNum=6>Wierd Walls</li>
|
|
|
|
|
<li levelNum=7>Maze 1</li>
|
|
|
|
|
<li levelNum=8>Spiral</li>
|
|
|
|
|
<li levelNum=9>Feast and Famine</li>
|
|
|
|
|
<li levelNum=10>Maze 2</li>
|
|
|
|
|
</ol>
|
|
|
|
|
<h5>Classic Nibbles</h5>
|
|
|
|
|
</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>ENTER: (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>
|
2014-12-14 08:51:19 -06:00
|
|
|
</section><!--
|
|
|
|
|
|
|
|
|
|
--><section id=score>
|
|
|
|
|
<h4>Score</h4>
|
2014-12-11 22:52:55 -06:00
|
|
|
</section>
|
|
|
|
|
</div>
|
2014-12-12 05:01:43 -06:00
|
|
|
<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 type="application/javascript">
|
|
|
|
|
var canvas = document.getElementById("snakeCanvas");
|
2014-12-14 08:51:19 -06:00
|
|
|
var scoreValue = document.querySelector("#score span.value");
|
2014-12-12 05:01:43 -06:00
|
|
|
canvas.width = canvas.clientWidth;
|
|
|
|
|
canvas.height = canvas.clientHeight;
|
|
|
|
|
|
2014-12-14 08:51:19 -06:00
|
|
|
var loadLevel = function(ev) {
|
|
|
|
|
var levelEl = ev.target;
|
2014-12-12 05:01:43 -06:00
|
|
|
document.querySelector("#levelSelect li.selected").className = "";
|
|
|
|
|
levelEl.className = "selected";
|
|
|
|
|
var levelNum = parseInt(levelEl.getAttribute("levelNum"));
|
|
|
|
|
Snake.initialize(levelData[levelNum]); };
|
|
|
|
|
|
2014-12-14 08:51:19 -06:00
|
|
|
var nextLevel = function() {
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var updateScore = function(ev) {
|
|
|
|
|
var curScore = parseInt(scoreValue.textContent);
|
|
|
|
|
curScore += ev.detail.bodyLength;
|
|
|
|
|
curScore.textContent = curScore;
|
|
|
|
|
|
|
|
|
|
if (evDetail.score == Snake.currentLevel.targetScore)
|
|
|
|
|
nextLevel(); };
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener('score', updateScore);
|
|
|
|
|
|
2014-12-12 05:01:43 -06:00
|
|
|
|
|
|
|
|
// Add listeners for each of the level list items.
|
|
|
|
|
var levelLis = document.querySelectorAll("#levelSelect li");
|
|
|
|
|
for (var i = 0; i < levelLis.length; ++i) {
|
|
|
|
|
levelLis[i].addEventListener("click", loadLevel); }
|
|
|
|
|
|
|
|
|
|
loadLevel({target: document.querySelector("#levelSelect li.selected")});
|
|
|
|
|
</script>
|
2014-12-11 22:52:55 -06:00
|
|
|
</body>
|
|
|
|
|
</html>
|
