134 lines
10 KiB
HTML
134 lines
10 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
|
|
<link href="snake.css" type="text/css" rel="stylesheet">
|
|
<script src="snake.js" type="application/javascript"></script>
|
|
</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>
|
|
<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>
|
|
</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 type="application/javascript">
|
|
var canvas = document.getElementById("snakeCanvas");
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
|
|
var loadLevel = function(event) {
|
|
var levelEl = event.target;
|
|
document.querySelector("#levelSelect li.selected").className = "";
|
|
levelEl.className = "selected";
|
|
var levelNum = parseInt(levelEl.getAttribute("levelNum"));
|
|
Snake.initialize(levelData[levelNum]); };
|
|
|
|
var levelData = [
|
|
// Level 1: Hello Snake!
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,2,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1],"rows":10,"cols":10,"fps":2},
|
|
// Level 2: Room to Grow
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":16,"cols":16,"fps":3},
|
|
// Level 3: North and South
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,2,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 4: Four Small Rooms
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 5: Polka Dots
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,2,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,3,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 6: Toaster Face
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,0,1,0,0,0,1,0,1,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,1,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,2,0,0,0,0,1,0,0,1,1,1,0,0,1,1,1,0,0,0,1,1,1,0,0,1,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,0,1,1,1,1,1,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 7: Wierd Walls
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,1,1,1,1,1,1,1,0,1,1,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1,0,1,0,0,0,1,1,1,0,1,1,0,1,0,1,0,1,0,1,0,0,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,0,0,1,0,1,0,1,0,1,0,1,1,0,1,1,1,0,0,0,1,0,1,0,1,0,1,1,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,0,1,1,1,1,1,1,1,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 8: Maze 1
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,1,1,1,1,0,1,0,1,1,0,1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,0,1,2,0,0,0,0,0,0,0,0,1,0,1,1,0,1,0,1,1,1,0,1,1,1,0,1,0,1,1,0,1,0,0,1,0,0,0,0,1,0,0,0,1,1,0,1,1,0,1,0,1,1,0,0,0,1,0,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,1,1,0,1,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,0,1,1,1,0,1,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 9: Spiral
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,1,1,0,1,1,1,1,1,1,1,1,0,1,0,0,1,1,0,1,0,0,0,0,0,0,1,0,1,0,0,1,1,0,1,0,1,1,1,1,0,1,0,1,0,0,1,1,0,1,0,1,3,0,1,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,0,0,0,1,0,0,1,1,0,1,0,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 10: Feast and Famine
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,2,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,3,0,3,0,3,1,1,0,0,0,0,0,0,1,0,0,3,0,3,0,1,1,0,0,0,0,0,0,1,0,3,0,3,0,3,1,1,0,0,0,0,0,0,1,0,0,3,0,3,0,1,1,0,0,0,0,0,0,0,0,3,0,3,0,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
|
// Level 11: Maze 2
|
|
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1,0,1,0,0,0,1,1,0,1,0,0,1,1,0,1,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,0,0,1,0,0,1,0,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,1,1,1,0,0,0,1,0,0,1,1,1,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1,1,1,1,1,0,1,1,0,0,1,0,0,0,1,1,0,1,0,0,0,0,0,1,1,1,0,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,1,1,0,1,1,1,1,0,0,0,0,1,1,1,1,1,0,1,1,0,1,0,0,0,1,1,1,1,0,0,0,1,0,0,1,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":17,"cols":17,"fps":3}];
|
|
|
|
// 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>
|
|
</body>
|
|
</html>
|