diff --git a/simplesnake/simplesnake.appcache b/simplesnake/simplesnake.appcache index af99157..b4395e2 100755 --- a/simplesnake/simplesnake.appcache +++ b/simplesnake/simplesnake.appcache @@ -2,6 +2,6 @@ CACHE MANIFEST # Last Modified: 2017 Apr 15 CACHE: -simplesnake.html simplesnake.css simplesnake.js +simplesnake.html diff --git a/simplesnake/simplesnake.css b/simplesnake/simplesnake.css index 4cd2dcb..d778068 100755 --- a/simplesnake/simplesnake.css +++ b/simplesnake/simplesnake.css @@ -65,3 +65,17 @@ body { border: solid 1px silver; } +.simplesnake[score]:after { + position: absolute; + display: block; + text-align: center; + width: 100vw; + color: gray; + font-size: 2vh; + line-height: 3vh; + + content: "Top score: " attr(snake) ": " attr(score) " " attr(state); + + opacity: 0.9; +} + diff --git a/simplesnake/simplesnake.js b/simplesnake/simplesnake.js index 5b36401..6a68ea0 100755 --- a/simplesnake/simplesnake.js +++ b/simplesnake/simplesnake.js @@ -407,6 +407,21 @@ function setup(snake, timer, size){ __HANDLER_SET = true } + function showScore(color, age){ + score = snake.__top_score = + (!snake.__top_score || snake.__top_score.score < age) ? + { + color: color || '', + score: age || 0, + } + : snake.__top_score + snake._field.setAttribute('score', score.score) + snake._field.setAttribute('snake', score.color) + snake._field.setAttribute('state', ( + score.score == age && score.color == color) ? '(current)' : '') + } + + // setup the game... return snake .setup('.simplesnake', size) .randomLevel() @@ -415,19 +430,19 @@ function setup(snake, timer, size){ // stuff... .appleEaten(function(color, age){ - // XXX show score... - console.log(`Apple eaten by: ${color}: ${age}`) this.apple() + showScore(color, age) }) .apple() .apple() // players... .snakeKilled(function(color, age){ - console.log(`Killed: ${color}: ${age}`) this .pause() - .snake(color, 3) }) + .snake(color, 3) + showScore(color, 3) + }) .snake('blue', 3) }