wait for button press, before starting game

_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,13 +76,19 @@ function detectEnd(){
     }
 
     if(gameFinished){
+        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(){
+    if(firstButtonPressed) {
         for (let y: number = 0; y < snake.length; y++) {
             let currentSnake = snake[y];
             if (currentSnake[0] == target[0] && currentSnake[1] == target[1]) {
@@ -91,10 +100,12 @@ let mainLoop = window.setInterval(function(){
         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

_src/snake.html

@@ -24,13 +24,16 @@
 </header>
 <main id="content">
     <div class="snake-textbox" id="text-Left">
+        <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>