Snake: Added scoring and display.

snake/snake-page.js

@@ -59,6 +59,7 @@ var loadLevel = function(levelSetName, levelNum) {
     // TODO: Show start overlay UI
 
     // Initialize the board using the level data.
+    $scoreValue.text("0");
     Snake.initialize(levelData);
 
 };
@@ -66,9 +67,9 @@ var loadLevel = function(levelSetName, levelNum) {
 var nextLevel = function() { };
 
 var updateScore = function(ev) {
-    var curScore = parseInt($scoreValue.textContent);
-    curScore += ev.detail.bodyLength;
-    curScore.textContent = curScore;
+    var evDetail = ev.originalEvent.detail;
+    var curScore = parseInt($scoreValue.text());
+    $scoreValue.text(curScore + (evDetail.bodyLength * evDetail.fps));
 
     if (evDetail.score == Snake.currentLevel.targetScore)
         nextLevel(); };

snake/snake.js

@@ -234,9 +234,12 @@
             growthCounter += growthFactor;
             growthFactor += growthFactorIncrease;
 
+            var scoreDetails = collectLevelData();
+            scoreDetails.score = score;
+            scoreDetails.bodyLength = body.length;
+
             // Alert anyone listening to us.
-            var scoreEvent = new CustomEvent('score',
-                {detail: {'score': score, 'bodyLength': body.length}});
+            var scoreEvent = new CustomEvent('score', {detail: scoreDetails});
 
             canvas.dispatchEvent(scoreEvent); }
 
@@ -363,14 +366,19 @@
 
     // Write out the editor level data as a JSON string to the textarea.
     function emitEditorLevelData() {
-        editorDataTextarea.value = JSON.stringify({
+        editorDataTextarea.value = JSON.stringify(collectLevelData()); }
+
+    function collectLevelData() {
+        return {
             board: board,
             rows: ROWS,
             cols: COLS,
             growthFactor: startGrowthFactor,
             growthFactorIncrease: startGFIncrease,
             targetScore: targetScore,
-            fps: fps}); }
+            fps: fps
+        };
+    }
 
     // Load the editor data as a JSON string from the textarea.
     function loadEditorLevelData() { }

snake/snake.scss

@@ -142,6 +142,8 @@ button {
             bottom: -0.25rem; left: -0.25rem;
             border-width: 0 0 0.25rem 0.25rem; } } }
 
+#score .value { margin-left: 1rem; }
+
 @include forAspect(wide) {
     body {
         margin-top: 2rem;
@@ -175,8 +177,8 @@ button {
             section#controls { left: 0.5rem; top: 13.5rem; }
             section#options { left: 0.5rem; top: 20rem; }
 
+            section#score { right: 0.5rem; top: 3rem; }
             section#levelSelect { right: 0.5rem; top: 8rem; }
-            section#score { right: 0.5rem; }
 
             section#levelSelect { height: 25rem; }
             section#levelSelect h5 { margin-top: 1rem; } } }