ISSUE: Snake collides with itself because inputs are too fast. Fixed. Also implemented wrapped and walls mode modal.

index.html

@@ -34,8 +34,18 @@ <h2>Select Difficulty</h2>
             <button onclick="startGame('easy')">Easy</button>
             <button onclick="startGame('medium')">Medium</button>
             <button onclick="startGame('hard')">Hard</button>
+            <button onclick="startGame('impossible')">Impossible</button>
         </div>
     </div>
+    <!-- Walls or Wrap Selection Modal -->
+    <div class="difficulty-modal" id="wallsWrapModal">
+        <div class="difficulty-content">
+            <h2>Select Mode</h2>
+            <button onclick="changeModeWall()">Walls</button>
+            <button onclick="changeModeWrap()">Wrapped</button>
+        </div>
+    </div>
+
 </body>
 
 </html>

script.js

@@ -8,6 +8,7 @@ let highScore = localStorage.getItem("highScore") || 0;
 let gameInterval;
 let GameOver = false;
 let gameSpeed = 125; // Default game speed
+let changingDirection = false;
 
 // Function to change the food position to a random location
 const changeFoodPosition = () => {
@@ -18,18 +19,22 @@ const changeFoodPosition = () => {
 // Function to change the direction of the snake based on arrow keys
 const changeDirection = (e) => {
     // Prevent the snake from reversing direction
-    if (e.key === "ArrowUp" && velocityY !== 1) {
+    if (e.key === "ArrowUp" && velocityY !== 1 && changingDirection == false) {
         velocityX = 0;
         velocityY = -1;
-    } else if (e.key === "ArrowDown" && velocityY !== -1) {
+        changingDirection = true;
+    } else if (e.key === "ArrowDown" && velocityY !== -1 && changingDirection == false) {
         velocityX = 0;
         velocityY = 1;
-    } else if (e.key === "ArrowRight" && velocityX !== -1) {
+        changingDirection = true;
+    } else if (e.key === "ArrowRight" && velocityX !== -1 && changingDirection == false) {
         velocityX = 1;
         velocityY = 0;
-    } else if (e.key === "ArrowLeft" && velocityX !== 1) {
+        changingDirection = true;
+    } else if (e.key === "ArrowLeft" && velocityX !== 1 && changingDirection == false) {
         velocityX = -1;
         velocityY = 0;
+        changingDirection = true;
     }
 }
 
@@ -42,7 +47,7 @@ const gameOver = () => {
 }
 
 // Function to restart the game
-const restartGame = () => {
+const restartGame = () => { 
     // Reset game state
     snakeX = 5;
     snakeY = 10;
@@ -67,19 +72,48 @@ const restartGame = () => {
 const startGame = (difficulty) => {
     switch (difficulty) {
         case 'easy':
-            gameSpeed = 200; // Slower speed for easy
+            gameSpeed = 125; // Slower speed for easy
             break;
         case 'medium':
-            gameSpeed = 125; // Medium speed
+            gameSpeed = 100; // Medium speed
             break;
         case 'hard':
             gameSpeed = 75; // Faster speed for hard
             break;
+        case 'impossible':
+            gameSpeed = 30; // Faster speed for impossible
+            break;
     }
 
     // Hide the difficulty modal
     document.getElementById("difficultyModal").style.display = "none";
 
+    // Show the mode modal
+
+    document.getElementById("wallsWrapModal").style.display = "block";
+
+}
+
+let gameWalls = false;
+
+function changeModeWall() {
+    gameWalls = true;
+    console.log('wall');
+    document.getElementById("wallsWrapModal").style.display = "none";
+
+    // Initialize the food position
+    changeFoodPosition();
+
+    // Start the game with the selected speed
+    gameInterval = setInterval(initGame, gameSpeed);
+}
+
+
+function changeModeWrap() {
+    gameWalls = false;
+    console.log('wrap');
+    document.getElementById("wallsWrapModal").style.display = "none";
+
     // Initialize the food position
     changeFoodPosition();
 
@@ -98,11 +132,37 @@ const initGame = () => {
     snakeY += velocityY;
 
     // Check for border collision (game over condition)
-    if (snakeX < 1 || snakeX > 30 || snakeY < 1 || snakeY > 30) {
-        gameOver();
-        return;
+
+    if (gameWalls) {
+        if (snakeX < 1 || snakeX > 30 || snakeY < 1 || snakeY > 30) {
+            gameOver();
+            return;
+
+        }
+    } else {
+        if (snakeX < 1) {
+            snakeX = 30
+            velocityX = -1;
+            velocityY = 0;
+        }
+        if (snakeX > 30) {
+            snakeX = 1
+            velocityX = 1;
+            velocityY = 0;
+        }
+        if (snakeY < 1) {
+            snakeY = 30
+            velocityX = 0;
+            velocityY = -1;
+        }
+        if (snakeY > 30) {
+            snakeY = 1
+            velocityX = 0;
+            velocityY = 1;
+        }
     }
 
+
     // Check for self-collision (game over condition)
     for (let i = 0; i < snakeBody.length; i++) {
         if (snakeX === snakeBody[i][0] && snakeY === snakeBody[i][1]) {
@@ -143,10 +203,16 @@ const initGame = () => {
         htmlMarkup += `<div class="body" style='grid-area: ${snakeBody[i][1]} / ${snakeBody[i][0]}'></div>`;
     }
 
+    changingDirection = false;
+
     // Update the play board with the new positions
     playBoard.innerHTML = htmlMarkup;
 }
 
+// Hide the mode modal on page load
+
+document.getElementById("wallsWrapModal").style.display = "none";
+
 // Show the difficulty selection modal on page load
 document.getElementById("difficultyModal").style.display = "flex";
 

style.css

@@ -39,7 +39,7 @@ body {
     display: grid;
     grid-template-rows: repeat(30, 1fr);
     grid-template-columns: repeat(30, 1fr);
-    background-color: #212837;
+    background-color: #129204;
 }
 
 .play-board .food {
@@ -121,6 +121,7 @@ body {
     justify-content: center;
 }
 
+
 .difficulty-content {
     background-color: #fefefe;
     margin: auto;