diff --git a/_src/assets/ts/snake.ts b/_src/assets/ts/snake.ts
index 09691feecdebf67b943488ef24cf1d14ad67e5b7..4ef58022045e9592d418f9460d041cb2e287ae94 100644
--- a/_src/assets/ts/snake.ts
+++ b/_src/assets/ts/snake.ts
@@ -2,10 +2,13 @@ let fieldSize = 20;
let snakeField:HTMLElement = document.getElementById("snakeField");
let scoreField:HTMLElement = document.getElementById("score");
+let highscoreField:HTMLElement = document.getElementById("highscore");
let snake:number[][] = [[10, 10], [10, 11], [10, 12]];
let snakedir:number = 2;
let target:number[] = []
-let score = 0;
+let score:number = 0;
+let highscore:number = Number(localStorage.getItem("lastname"));
+let firstButtonPressed:boolean = false;
function getRandomInt(max:number) {
return Math.floor(Math.random() * Math.floor(max)) + 1;
@@ -73,28 +76,36 @@ function detectEnd(){
}
if(gameFinished){
- alert("Game Over, your score: " + score);
+ if(highscore < score){
+ localStorage.setItem("lastname", String(score));
+ alert("Game Over, your score: " + score + "\n This is your new highscore");
+ } else {
+ alert("Game Over, your score: " + score);
+ }
clearInterval(mainLoop);
location.reload();
}
}
let mainLoop = window.setInterval(function(){
- for(let y:number = 0; y<snake.length; y++){
- let currentSnake = snake[y];
- if(currentSnake[0] == target[0] && currentSnake[1] == target[1]){
- score++;
- scoreField.innerText = String(score);
- target = [getRandomInt(fieldSize), getRandomInt(fieldSize)];
+ if(firstButtonPressed) {
+ for (let y: number = 0; y < snake.length; y++) {
+ let currentSnake = snake[y];
+ if (currentSnake[0] == target[0] && currentSnake[1] == target[1]) {
+ score++;
+ scoreField.innerText = String(score);
+ target = [getRandomInt(fieldSize), getRandomInt(fieldSize)];
+ }
}
+ moveSnake();
+ detectEnd()
+ drawField();
}
- moveSnake();
- detectEnd()
- drawField();
}, 600);
//keypress handler
document.addEventListener('keydown', function(event) {
+ firstButtonPressed = true;
const key:string = event.key;
switch (key){
case "ArrowRight":
@@ -111,5 +122,6 @@ document.addEventListener('keydown', function(event) {
}
});
+highscoreField.innerText = String(highscore);
target = [getRandomInt(fieldSize), getRandomInt(fieldSize)];
drawField();
\ No newline at end of file
diff --git a/_src/snake.html b/_src/snake.html
index 364433b3b424323d967f76fa0b40afe8cd6ce68e..ab53d1f486aac9c043616f864b49ab815e466877 100644
--- a/_src/snake.html
+++ b/_src/snake.html
@@ -24,13 +24,16 @@
</header>
<main id="content">
<div class="snake-textbox" id="text-Left">
- <h1>Score: <span id="score">0</span></h1>
+ <span>
+ <h1>Score: <span id="score">0</span></h1>
+ <h2>Highscore: <span id="highscore">0</span></h2>
+ </span>
</div>
<div id="snakeField"></div>
<div class="snake-textbox" id="text-Right">
<span>
<h2>Usage:</h2>
- <p>Use your arrow buttons to navigate the snake onto the red target</p>
+ <p>To start the game press any key, then use your arrow buttons to navigate the snake.</p>
</span>
</div>
</main>