add features iiitl#5

TanishMoral11 · Mar 16, 2024 · 1a67dce · 1a67dce
1 parent a529838
commit 1a67dce
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 17 deletions.
diff --git a/index.css b/index.css
@@ -12,6 +12,24 @@
     background-repeat: no-repeat;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+    position: relative;
+}
+.buttons {
+    position: absolute;
+    top: 1px;
+    display: flex;
+    gap: 10px;
+
+}
+.buttons button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    background-color: rgb(236, 236, 167); /* Similar color shade */
+    color: black;
+    cursor: pointer;
 }
 #score{
     position: absolute;
@@ -20,7 +38,6 @@
     font-size: 3vw;
     font-weight: bold;
     font-family: cursive;
-
 }
 #maxScoreCont{
     position: absolute;
@@ -50,9 +67,6 @@
     transform: scale(1.02);
     border-radius: 9px;
     display: flex;
-    /* align-items: space-evenly;
-    justify-content: space-evenly; */
-    /* gap: 20px; */
     flex-direction: var(--direction);
     padding-top: var(--top);
     padding-bottom:var(--bottom);
@@ -63,10 +77,8 @@
     background-color: purple;
     border: .25vmin solid white;
     border-radius: 12px;
-    /* z-index: 50; */
 }
 .food{
-    /* background-color: rgb(255, 98, 0); */
     background: linear-gradient(red,purple);
     border: .25vmin solid black;
     border-radius: 8px;
@@ -79,5 +91,4 @@
     z-index: 100;
     border-radius: 50%;
     margin: auto;
-    /* border-radius: 50%; */
-}
+}
diff --git a/index.html b/index.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Snake Game</title>
     <link rel="stylesheet" href="index.css">
 </head>
-
 <body>
     <div class="body">
+        <div class="buttons">
+            <button id="pauseBtn">Pause</button>
+            <button id="muteBtn">Mute</button>
+            <button id="fullScreenBtn">Full Screen</button>
+        </div>
         <div id="score">Score: 0</div>
         <div id="maxScoreCont">Max Score: 0</div>
-        <div id="board">
-        </div>
+        <div id="board"></div>
     </div>
     <script src="index.js"></script>
 </body>
-
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -16,6 +16,7 @@ let lastPaintTime = 0; // Time of last frame
 let snakeArr = [{ x: 13, y: 15 }]; // Initial snake position
 let food = { x: 6, y: 7 }; // Initial food position
 let score = 0; // Initial score
+let animationId; // Variable to store animation frame ID
 
 // Function to update and store the maximum score in local storage
 function updateMaxScore(score) {
@@ -37,7 +38,7 @@ displayScores(); // Displaying initial scores
 
 // Main game loop
 function main(ctime) {
-    window.requestAnimationFrame(main);
+    animationId = window.requestAnimationFrame(main);
     if ((ctime - lastPaintTime) / 1000 < (1 / speed)) {
         return;
     }
@@ -146,7 +147,7 @@ function gameEngine() {
 }
 
 // Start the game loop
-window.requestAnimationFrame(main);
+main();
 
 // Event listener for keyboard input
 window.addEventListener('keydown', e => {
@@ -172,3 +173,54 @@ window.addEventListener('keydown', e => {
             break;
     }
 });
+
+// Define variables for buttons
+const pauseBtn = document.getElementById('pauseBtn');
+const muteBtn = document.getElementById('muteBtn');
+const fullScreenBtn = document.getElementById('fullScreenBtn');
+
+// Add event listeners for buttons
+pauseBtn.addEventListener('click', togglePause);
+muteBtn.addEventListener('click', toggleMute);
+fullScreenBtn.addEventListener('click', toggleFullScreen);
+
+// Define variables for game state
+let isPaused = false;
+let isMuted = false;
+
+// Function to toggle pause
+function togglePause() {
+    isPaused = !isPaused;
+    if (isPaused) {
+        cancelAnimationFrame(animationId); // Stop game loop
+    } else {
+        animationId = requestAnimationFrame(main); // Resume game loop
+    }
+}
+
+// Function to toggle mute
+function toggleMute() {
+    isMuted = !isMuted;
+    if (isMuted) {
+        foodSound.muted = true;
+        gameOverSound.muted = true;
+        moveSound.muted = true;
+        musicSound.muted = true;
+    } else {
+        foodSound.muted = false;
+        gameOverSound.muted = false;
+        moveSound.muted = false;
+        musicSound.muted = false;
+    }
+}
+
+// Function to toggle full screen
+function toggleFullScreen() {
+    if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+    }
+}