From 2670d761c8be366f1c93ab58d90d4e62e1a808c1 Mon Sep 17 00:00:00 2001 From: TanishMoral <134790673+TanishMoral11@users.noreply.github.com> Date: Fri, 15 Mar 2024 03:42:55 +0530 Subject: [PATCH 1/3] implemented the score and max score featured implemented the score and max score featured, so basically , when someone is playing this snake game , then it update score immediately, and also update highest score --- index.js | 153 ++++++++++++++++++++++++++----------------------------- 1 file changed, 73 insertions(+), 80 deletions(-) diff --git a/index.js b/index.js index da3dfa7..ccec847 100644 --- a/index.js +++ b/index.js @@ -1,115 +1,122 @@ -let board = document.getElementById('board') -let scoreCont = document.getElementById('score') -let maxScoreCont = document.getElementById('maxScoreCont'); -let HeadEle; -// console.log(HeadEle); -let inputDir = { x: 0, y: 0 }; - -const foodSound = new Audio('music/food.mp3'); -const gameOverSound = new Audio('music/gameOver.mp3'); -const moveSound = new Audio('music/move.mp3'); -const musicSound = new Audio('music/music.mp3'); -let speed = 5; -let lastPaintTime = 0; -let snakeArr = [ - { x: 13, y: 15 } -] -let food = { - x: 6, y: 7 -}; - -// Game Functions +// HTML DOM elements +let board = document.getElementById('board'); // Reference to the game board +let scoreCont = document.getElementById('score'); // Reference to the element displaying current score +let maxScoreCont = document.getElementById('maxScoreCont'); // Reference to the element displaying maximum score +let inputDir = { x: 0, y: 0 }; // Direction of snake movement + +// Audio elements +const foodSound = new Audio('music/food.mp3'); // Sound when snake eats food +const gameOverSound = new Audio('music/gameOver.mp3'); // Sound when game ends +const moveSound = new Audio('music/move.mp3'); // Sound when snake moves +const musicSound = new Audio('music/music.mp3'); // Background music + +// Game parameters +let speed = 5; // Initial speed of the snake +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 + +// Function to update and store the maximum score in local storage +function updateMaxScore(score) { + let maxScore = localStorage.getItem('maxScore'); + if (!maxScore || score > maxScore) { + localStorage.setItem('maxScore', score); + } +} + +// Function to display the current score and the maximum score on the interface +function displayScores() { + scoreCont.innerText = "Score: " + score; + maxScoreCont.innerText = "Max Score: " + localStorage.getItem('maxScore'); +} + +// Retrieving the maximum score from local storage or setting it to 0 if not found +let maxScore = localStorage.getItem('maxScore') || 0; +displayScores(); // Displaying initial scores + +// Main game loop function main(ctime) { window.requestAnimationFrame(main); if ((ctime - lastPaintTime) / 1000 < (1 / speed)) { return; } - // console.log(ctime); lastPaintTime = ctime; gameEngine(); - // console.log(ctime); } + +// Function to check collision function isCollide(snake) { - // return false; - //if you into yourself - if (snake[0].x > 18 || snake[0].x < 0 || snake[0].y > 18 || snake[0].y < 0) { return true; } } + +// Function to end the game +function endGame() { + gameOverSound.play(); + musicSound.pause(); + inputDir = { x: 0, y: 0 }; + updateMaxScore(score); // Update maximum score + alert("Game over. Press any key to play again"); + score = 0; // Reset score + displayScores(); // Display scores + snakeArr = [{ x: 13, y: 15 }]; // Reset snake position +} + +// Game engine function gameEngine() { - //part1: updating the snake array and food if (isCollide(snakeArr)) { - gameOverSound.play(); - musicSound.pause(); - inputDir = { x: 0, y: 0 }; - alert("Game over. Press any key to play again"); - snakeArr = [{ x: 13, y: 15 }]; - // musicSound.play(); + endGame(); + return; } - //IF you have eaten the food, increment the score and regenerate the food if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) { - // console.log("food") foodSound.play(); - + score++; // Increment score when snake eats food snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y }); - // console.log(snakeArr) let a = 2; let b = 16; - food = { x: 2 + Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) } + food = { x: 2 + Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }; } - //Moving the snake - // console.log("-----") - // console.log(snakeArr.l) for (let i = snakeArr.length - 2; i >= 0; i--) { - // const element = array[i]; - // console.log("hello"); snakeArr[i + 1] = { ...snakeArr[i] }; - // console.log(snakeArr[i + 1].x); - } snakeArr[0].x += inputDir.x; snakeArr[0].y += inputDir.y; - //part2: display the snake and food - //display the snake + // Displaying the snake and food board.innerHTML = ""; snakeArr.forEach((e, index) => { - snakeElement = document.createElement('div'); + let snakeElement = document.createElement('div'); snakeElement.style.gridRowStart = e.y; snakeElement.style.gridColumnStart = e.x; if (index === 0) { - eyes = document.createElement('div'); + let eyes = document.createElement('div'); eyes.classList.add('eyes'); - eyes2 = document.createElement('div'); + let eyes2 = document.createElement('div'); eyes2.classList.add('eyes'); snakeElement.classList.add('head'); - // HeadEle = document.querySelectorAll('.head'); - // console.log(e.x, e.y, typeof e.x, typeof e.y) if (inputDir.x === 0 && inputDir.y === -1) { snakeElement.style.setProperty('--top', '15%'); snakeElement.style.setProperty('--bottom', '75%'); snakeElement.style.setProperty('--left', '2%'); snakeElement.style.setProperty('--right', '2%'); snakeElement.style.setProperty('--direction', 'row'); - } - else if (inputDir.x === 0 && inputDir.y === 1) { + } else if (inputDir.x === 0 && inputDir.y === 1) { snakeElement.style.setProperty('--top', '75%'); snakeElement.style.setProperty('--bottom', '15%'); snakeElement.style.setProperty('--left', '2%'); snakeElement.style.setProperty('--right', '2%'); snakeElement.style.setProperty('--direction', 'row'); - } - else if (inputDir.x === -1 && inputDir.y === 0) { + } else if (inputDir.x === -1 && inputDir.y === 0) { snakeElement.style.setProperty('--top', '2%'); snakeElement.style.setProperty('--bottom', '2%'); snakeElement.style.setProperty('--left', '15%'); snakeElement.style.setProperty('--right', '75%'); snakeElement.style.setProperty('--direction', 'column'); - } - else if (inputDir.x === 1 && inputDir.y === 0) { + } else if (inputDir.x === 1 && inputDir.y === 0) { snakeElement.style.setProperty('--top', '2%'); snakeElement.style.setProperty('--bottom', '2%'); snakeElement.style.setProperty('--left', '75%'); @@ -119,52 +126,39 @@ function gameEngine() { board.appendChild(snakeElement); snakeElement.appendChild(eyes); snakeElement.appendChild(eyes2); - } - else { + } else { snakeElement.classList.add('snake'); - board.appendChild(snakeElement) + board.appendChild(snakeElement); } - }) - - //part2: display the snake + }); - foodElement = document.createElement('div'); + let foodElement = document.createElement('div'); foodElement.style.gridRowStart = food.y; foodElement.style.gridColumnStart = food.x; foodElement.classList.add('food'); board.appendChild(foodElement); + displayScores(); // Update and display scores } - - - - - - - - - -//Main logic starts here +// Start the game loop window.requestAnimationFrame(main); + +// Event listener for keyboard input window.addEventListener('keydown', e => { - // inputDir = { x: 0, y: 1 } //start the game moveSound.play(); switch (e.key) { case "ArrowUp": inputDir.x = 0; inputDir.y = -1; - break; case "ArrowDown": inputDir.x = 0; inputDir.y = 1; - break; case "ArrowLeft": inputDir.x = -1; inputDir.y = 0; - break; case "ArrowRight": inputDir.x = 1; @@ -174,4 +168,3 @@ window.addEventListener('keydown', e => { break; } }); - From a5298384369abfa527340e1a35e19a4984d3b186 Mon Sep 17 00:00:00 2001 From: TanishMoral11 Date: Sat, 16 Mar 2024 13:15:10 +0530 Subject: [PATCH 2/3] add popup --- index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index ccec847..9bf6393 100644 --- a/index.js +++ b/index.js @@ -58,7 +58,11 @@ function endGame() { musicSound.pause(); inputDir = { x: 0, y: 0 }; updateMaxScore(score); // Update maximum score - alert("Game over. Press any key to play again"); + if (score > maxScore) { + alert("Congratulations🎉! You have achieved a new high score! Press any key to play again"); + } else { + alert("Game over. Press any key to play again"); + } score = 0; // Reset score displayScores(); // Display scores snakeArr = [{ x: 13, y: 15 }]; // Reset snake position From 1a67dce9891623f7db2f63d29e92a64864c559c4 Mon Sep 17 00:00:00 2001 From: TanishMoral11 Date: Sat, 16 Mar 2024 15:11:21 +0530 Subject: [PATCH 3/3] add features #5 --- index.css | 27 ++++++++++++++++++-------- index.html | 15 ++++++++------- index.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 81 insertions(+), 17 deletions(-) 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(); + } + } +}