diff --git a/index.html b/index.html index 2216810..927ac30 100644 --- a/index.html +++ b/index.html @@ -34,8 +34,18 @@

Select Difficulty

+ + +
+
+

Select Mode

+ + +
+
+ diff --git a/script.js b/script.js index f54a3a4..b3a3f41 100644 --- a/script.js +++ b/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 += `
`; } + 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"; diff --git a/style.css b/style.css index fce24b5..7a5e732 100644 --- a/style.css +++ b/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;