Features: New speeds, Instructions page, and update on background

index.html

@@ -34,6 +34,17 @@ <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('insane')">Insane</button>
+            <button onclick="startGame('random')">Random</button>
+        </div>
+    </div>
+
+    <div class="difficulty-modal" id="next">
+        <div class="difficulty-content">
+            <h2>Instructions:</h2>
+            <p>Use arrows to move the snake and eat the red apples to grow the snake. Hitting a wall or yourself will result in death.💀</p>
+            <br>
+            <button onclick="next('next')">Next</button>
         </div>
     </div>
 </body>

script.js

@@ -67,16 +67,22 @@ 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 'insane':
+            gameSpeed = 30; // Faster speed for hard
+            break;
+        case 'random':
+            gameSpeed = Math.floor(Math.random()*200);
+            break;
     }
-
+   
     // Hide the difficulty modal
     document.getElementById("difficultyModal").style.display = "none";
 
@@ -87,6 +93,10 @@ const startGame = (difficulty) => {
     gameInterval = setInterval(initGame, gameSpeed);
 }
 
+const next = (next) => {
+    document.getElementById("next").style.display = "none";
+    }
+
 // Main function to update the game state
 const initGame = () => {
     // Save the current tail position

style.css

@@ -39,7 +39,8 @@ body {
     display: grid;
     grid-template-rows: repeat(30, 1fr);
     grid-template-columns: repeat(30, 1fr);
-    background-color: #212837;
+    background: repeating-conic-gradient(rgb(14, 149, 81) 0% 25%, rgb(14, 113, 62) 0% 50%);
+    background-size: 39.5px 39.5px
 }
 
 .play-board .food {