diff --git a/index.css b/index.css index 94c9c93..4712a28 100644 --- 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%; */ -} \ No newline at end of file +} diff --git a/index.html b/index.html index 5520a54..98caf8b 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,23 @@ - - Document + Snake Game -
+
+ + + +
Score: 0
Max Score: 0
-
-
+
- - \ No newline at end of file + diff --git a/index.js b/index.js index 9bf6393..7caa6b9 100644 --- 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(); + } + } +}