12.12.2024 | Score Erweiterung im Snake Spiel

U-Bodigat · Dec 12, 2024 · 3674741 · 3674741
1 parent a755fe4
commit 3674741
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 36 deletions.
diff --git a/games/snake/index.html b/games/snake/index.html
@@ -67,7 +67,7 @@
     <!-- End Google Tag Manager (noscript) -->
     <main>
         <header>
-            <p><a id="überschriftlink" href="https://ubodigat.com">U:Bodigat.com</a> | Snake Spiel</p>
+            <p><a id="überschriftlink" href="https://ubodigat.com">U:Bodigat.com</a> | <span id="highScoresLink" style="cursor: pointer; color: #00ff6e;">High Scores</span></p>
             <div id="headerinput">
                 <a href="https://ubodigat.com/datenschutz" target="_blank"> <button class="button">Datenschutz</button></a>
                 <a href="/games/gamemenü"> <button class="button">Zum Gamemenü</button></a>
@@ -91,6 +91,13 @@ <h4 id="tastenbelegungenüberschrift">Tastenbelegungen</h4>
             </div>
         </div>
 
+        <div id="highScoresModal">
+            <div id="highScoresContent">
+                <span class="close">&times;</span>
+                <h2>All High Scores</h2>
+                <h4 id="allHighScores"></h4>
+            </div>
+        </div>
     </main>
 
     <script src="scripts.js"></script>

diff --git a/games/snake/scripts.js b/games/snake/scripts.js
@@ -2,72 +2,64 @@ let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 let rows = 25;
 let cols = 50;
-let snake = [{
-    x: 19,
-    y: 3
-}];
-
+let snake = [{ x: 19, y: 3 }];
 let food;
-
 let cellWidth = canvas.width / cols;
 let cellHeight = canvas.height / rows;
 let direction = 'LEFT';
 let foodCollected = false;
+let score = 0;
+let highScores = JSON.parse(localStorage.getItem('highScores')) || [];
 
 placeFood();
 
 setInterval(gameLoop, 300);
 document.addEventListener('keydown', keyDown);
 
-
 draw();
 
 function draw() {
     ctx.fillStyle = '#066e46';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = 'white';
 
-
     snake.forEach(part => add(part.x, part.y));
 
     ctx.fillStyle = '#00ff40';
     add(food.x, food.y); // Food
 
+    ctx.fillStyle = 'white';
+    ctx.font = '20px Arial';
+    ctx.fillText('Score: ' + score, 10, 20);
+    highScores.slice(0, 3).forEach((highScore, index) => {
+        ctx.fillText((index + 1) + '. ' + highScore, 10, 50 + index * 20);
+    });
+
     requestAnimationFrame(draw);
 }
 
 function testGameOver() {
-
     let firstPart = snake[0];
     let otherParts = snake.slice(1);
     let duplicatePart = otherParts.find(part => part.x == firstPart.x && part.y == firstPart.y);
 
-    // 1. Schlange läuft gegen die Wand
-    if (snake[0].x < 0 ||
-        snake[0].x > cols - 1 ||
-        snake[0].y < 0 ||
-        snake[0].y > rows - 1 ||
-        duplicatePart
-    ) {
+    if (snake[0].x < 0 || snake[0].x > cols - 1 || snake[0].y < 0 || snake[0].y > rows - 1 || duplicatePart) {
+        highScores.push(score);
+        highScores.sort((a, b) => b - a);
+        highScores = highScores.slice(0, 5); // Keep only top 5 scores
+        localStorage.setItem('highScores', JSON.stringify(highScores)); // Save to localStorage
+        score = 0;
         placeFood();
-        snake = [{
-            x: 19,
-            y: 3
-        }];
+        snake = [{ x: 19, y: 3 }];
         direction = 'LEFT';
     }
-
 }
 
-
 function placeFood() {
     let randomX = Math.floor(Math.random() * cols);
     let randomY = Math.floor(Math.random() * rows);
 
-    food = {
-        x: randomX,
-        y: randomY
-    };
+    food = { x: randomX, y: randomY };
 }
 
 function add(x, y) {
@@ -86,12 +78,9 @@ function shiftSnake() {
 function gameLoop() {
     testGameOver();
     if (foodCollected) {
-        snake = [{
-            x: snake[0].x,
-            y: snake[0].y
-        }, ...snake];
-
+        snake = [{ x: snake[0].x, y: snake[0].y }, ...snake];
         foodCollected = false;
+        score++;
     }
 
     shiftSnake();
@@ -112,13 +101,10 @@ function gameLoop() {
         snake[0].y++;
     }
 
-    if (snake[0].x == food.x &&
-        snake[0].y == food.y) {
+    if (snake[0].x == food.x && snake[0].y == food.y) {
         foodCollected = true;
-
         placeFood();
     }
-
 }
 
 function keyDown(e) {
@@ -134,4 +120,27 @@ function keyDown(e) {
     if (e.keyCode == 40) {
         direction = 'DOWN';
     }
+}
+
+document.getElementById('highScoresLink').onclick = function() {
+    let modal = document.getElementById('highScoresModal');
+    let allHighScores = document.getElementById('allHighScores');
+    allHighScores.innerHTML = '';
+    highScores.forEach((highScore, index) => {
+        let li = document.createElement('li');
+        li.textContent = (index + 1) + '. ' + highScore;
+        allHighScores.appendChild(li);
+    });
+    modal.style.display = 'block';
+}
+
+document.getElementsByClassName('close')[0].onclick = function() {
+    document.getElementById('highScoresModal').style.display = 'none';
+}
+
+window.onclick = function(event) {
+    let modal = document.getElementById('highScoresModal');
+    if (event.target == modal) {
+        modal.style.display = 'none';
+    }
 }
diff --git a/games/snake/style.css b/games/snake/style.css
@@ -140,6 +140,44 @@ header:hover {
     background-position: center;
 }
 
+#highScoresModal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.454);
+    padding-top: 60px;
+}
+
+#highScoresContent {
+    background-color: #333;
+    color: #fff;
+    margin: 5% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 25%;
+    max-width: 600px;
+    border-radius: 10px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 
 /*Responsive header*/