Snake bug fixes, stil WIP. Moved page logic into a separate JS file.

snake/snake-levels.js

@@ -7,7 +7,7 @@
 
 
     // Level 1: Hello Snake!
-    small.push({
+    small.levels.push({
         "name": "Hello Snake!", "rows":10, "cols":10,
         "easy":   { "fps": 2,  "targetScore":  5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps": 4,  "targetScore":  7, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -26,7 +26,7 @@
             1,1,1,1,1,1,1,1,1,1]});
 
     // Level 2: Room to Grow
-    small.push({
+    small.levels.push({
         "name": "Room to Grow", "rows":16, "cols":16,
         "easy":   { "fps":3, "targetScore": 7, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 7, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -51,7 +51,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 3: North and South
-    small.push({
+    small.levels.push({
         "name": "North and South", "rows":15, "cols":15,
         "easy":   { "fps":3, "targetScore": 6, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 6, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -75,7 +75,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 4: Four Small Rooms
-    small.push({
+    small.levels.push({
         "name": "Four Small Rooms","rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -99,7 +99,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 5: Polka Dots
-    small.push({
+    small.levels.push({
         "name": "Polka Dots" ,"rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -123,7 +123,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 6: Toaster Face
-    small.push({
+    small.levels.push({
         "name": "Toaster Face","rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -147,7 +147,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 7: Wierd Walls
-    small.push({
+    small.levels.push({
         "name": "Wierd Walls","rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -171,7 +171,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 8: Feast and Famine
-    small.push({
+    small.levels.push({
         "name": "Feast and Famine","rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -195,7 +195,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 1: Maze 1
-    mazes.push({
+    mazes.levels.push({
         "name": "Maze 1","rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -219,7 +219,7 @@
             1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
 
     // Level 2: Spiral
-    mazes.push({
+    mazes.levels.push({
         "name": "Spiral","rows":15,"cols":15,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -244,7 +244,7 @@
 
     
     // Level 3: Maze 2
-    mazes.push({
+    mazes.levels.push({
         "name": "Maze 2","rows":17,"cols":17,
         "easy":   { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
         "medium": { "fps":3, "targetScore": 5, "growthFactor": 2, "growthFactorIncrease": 1},
@@ -267,8 +267,7 @@
             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]}
+            1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]});
-        ]);
 
     window.SnakeLevels = {
         "Small Rooms": small,

snake/snake-page.js

@@ -0,0 +1,47 @@
+var $canvas = $("#snakeCanvas");
+var canvasEl = $canvas[0];
+var $scoreValue = $("#score span.value");
+var $levelSelectSection = $("#levelSelect");
+
+canvasEl.width = canvasEl.clientWidth;
+canvasEl.height = canvasEl.clientHeight;
+
+var initializePage = function() {
+
+    // Load the snake levels onto the page UI.
+    _.each(SnakeLevels, function(levelSet, setName) {
+        var newHtml = "<h5>" + setName + "</h5>" +
+                      "<ol levelSet='" + setName + "'>";
+
+        _.each(levelSet, function(levelData, levelIdx) {
+            newHtml += "<li levelNum='" + levelIdx + "'>" +
+                levelData.name + "</li>"; });
+
+        newHtml += "</ol>"; });
+};
+
+var loadLevel = function(ev) { }
+
+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.on('score', updateScore);
+
+
+// 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")});
+
+
+window.onload = initializePage;
+

snake/snake-redesign.html

@@ -4,8 +4,6 @@
         <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">
-        <script src="snake.js" type="application/javascript"></script> 
-        <script src="snake-levels.js" type="application/javascript"></script> 
     </head>
     <body>
         <div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
@@ -23,21 +21,6 @@
 
          --><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>
@@ -91,40 +74,11 @@
             <span class=ultralarge-only>ultralarge</span>
         </div>
 
-        <script type="application/javascript">
+        <script src="../resources/js/jquery-2.1.1.min.js" type="application/javascript"></script>
-            var canvas = document.getElementById("snakeCanvas");
+        <script src="../resources/js/underscore-1.7.0.min.js" type="application/javascript"></script>
-            var scoreValue = document.querySelector("#score span.value");
+        <script src="snake.js" type="application/javascript"></script> 
-            canvas.width = canvas.clientWidth;
+        <script src="snake-levels.js" type="application/javascript"></script> 
-            canvas.height = canvas.clientHeight;
+        <script src="snake-page.js" type="application/javascript"></script> 
 
-            var loadLevel = function(ev) {
-                var levelEl = ev.target;
-                document.querySelector("#levelSelect li.selected").className = "";
-                levelEl.className = "selected";
-                var levelNum = parseInt(levelEl.getAttribute("levelNum"));
-                Snake.initialize(levelData[levelNum]); };
-
-            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);
-
-
-            // 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>

snake/snake.js

@@ -119,8 +119,7 @@
             g.fillStyle = "black";
             g.fillText("Press Space to begin.", 50, Math.floor(canvas.height/2), canvas.width - 100);
 
-            skipTicks = Math.ceil(1000 / fps);
+            skipTicks = Math.ceil(1000 / fps); }
-            else skipTicks = 150; }
 
         // They want the editor
         else {
@@ -362,7 +361,7 @@
             growthFactor: startGrowthFactor,
             growthFactorIncrease: startGFIncrease,
             targetScore: targetScore,
-            fps: fps)}); }
+            fps: fps}); }
 
     // Load the editor data as a JSON string from the textarea.
     function loadEditorLevelData() { }