diff --git a/(5.) Snake Game/Resources.txt b/(5.) Snake Game/Resources.txt new file mode 100644 index 00000000..91a3a0dc --- /dev/null +++ b/(5.) Snake Game/Resources.txt @@ -0,0 +1 @@ +https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout \ No newline at end of file diff --git a/(5.) Snake Game/bg.jpg b/(5.) Snake Game/bg.jpg new file mode 100644 index 00000000..a9e41de6 Binary files /dev/null and b/(5.) Snake Game/bg.jpg differ diff --git a/(5.) Snake Game/food.mp3 b/(5.) Snake Game/food.mp3 new file mode 100644 index 00000000..076198c9 Binary files /dev/null and b/(5.) Snake Game/food.mp3 differ diff --git a/(5.) Snake Game/gameover.mp3 b/(5.) Snake Game/gameover.mp3 new file mode 100644 index 00000000..414bf651 Binary files /dev/null and b/(5.) Snake Game/gameover.mp3 differ diff --git a/(5.) Snake Game/index.html b/(5.) Snake Game/index.html new file mode 100644 index 00000000..c8773301 --- /dev/null +++ b/(5.) Snake Game/index.html @@ -0,0 +1,33 @@ + + + + + + + Snake Mania + + + +
+
+ SNAKE
MANIA +
+
+
+ (1.)Use Arrow keys to direct
the snake. +
+ (2.)Eat the food to increase snake
length and make high score. +
+ (3.)Try not to bump in walls or
into yourself. +
+ Have Fun !! +
+
+
+
+
Score: 0
+
High-Score: 0
+
+ + + \ No newline at end of file diff --git a/(5.) Snake Game/move.mp3 b/(5.) Snake Game/move.mp3 new file mode 100644 index 00000000..4d3d245d Binary files /dev/null and b/(5.) Snake Game/move.mp3 differ diff --git a/(5.) Snake Game/music.mp3 b/(5.) Snake Game/music.mp3 new file mode 100644 index 00000000..f1507af3 Binary files /dev/null and b/(5.) Snake Game/music.mp3 differ diff --git a/(5.) Snake Game/script.js b/(5.) Snake Game/script.js new file mode 100644 index 00000000..4d63a645 --- /dev/null +++ b/(5.) Snake Game/script.js @@ -0,0 +1,143 @@ +// Game Constants and variables +let inputDir = {x: 0, y: 0}; +const foodSound = new Audio('food.mp3'); +const gameOverSound = new Audio('gameover.mp3'); +const moveSound = new Audio('move.mp3'); +const musicSound = new Audio('music.mp3'); +let speed = 6; +let score = 0; +let lastPaintTime = 0; +let snakeArr = [ // array + {x: 13, y: 15} +] +let food = {x: 6, y:7}; // object + +// Game Functions +function main(ctime){ + window.requestAnimationFrame(main); + // console.log(ctime); + if((ctime - lastPaintTime)/1000 < 1/speed){ + return; + } + lastPaintTime = ctime; + + gameEngine(); +} + +function isCollide(sarr){ + // if snake bump into himself + for (let i = 1; i < snakeArr.length; i++) { + if(sarr[i].x === sarr[0].x && sarr[i].y === sarr[0].y){ + return true; + } + } + // if snake bump into wall + if(sarr[0].x >= 18 || sarr[0].x <= 0 || sarr[0].y >= 18 || sarr[0].y <= 0){ + return true; + } +} + +function gameEngine(){ + // Part 1: 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(); + score = 0; + scoreBoard.innerHTML = "Score: " + score; + } + + // If you have eaten the food , increment the score and regenrate the food + if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){ + foodSound.play(); + score += 1; + if(score > hiscore){ + hiscoreval = score; + localStorage.setItem('hiscore', JSON.stringify(hiscoreval)); + highScoreBoard.innerHTML = "HighScore: "+ hiscoreval; + } + scoreBoard.innerHTML = "Score: " + score; + snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); + // generating random number between a and b + // Math.round(a + (b - a)*Math.random()) + let a = 2; + let b = 16; + food = {x: Math.round(a + (b - a)*Math.random()), y: Math.round(a + (b - a)*Math.random())}; + } + + // Moving the snake + for (let i = snakeArr.length - 2; i >= 0; i--) { + snakeArr[i + 1] = {...snakeArr[i]}; + } + + snakeArr[0].x += inputDir.x; + snakeArr[0].y += inputDir.y; + + // Part 2: Display the snake and food + // Display Snake + board.innerHTML = ""; + snakeArr.forEach((e,index)=>{ + snakeElement = document.createElement('div'); + snakeElement.style.gridRowStart = e.y; + snakeElement.style.gridColumnStart = e.x; + if(index === 0){ + snakeElement.classList.add('head'); + } + else{ + snakeElement.classList.add('snake'); + } + board.appendChild(snakeElement); + }) + + // Display Food + foodElement = document.createElement('div'); + foodElement.style.gridRowStart = food.y; + foodElement.style.gridColumnStart = food.x; + foodElement.classList.add('food'); + board.appendChild(foodElement); +} + + +// Main logic starts here +let hiscore = localStorage.getItem('hiscore'); +// localStorage.clear() -> to clear local storage / high score +if(hiscore == null){ + hiscoreval = 0; + localStorage.setItem('hiscore', JSON.stringify(hiscoreval)); +} +else{ + highscoreval = JSON.parse(localStorage.getItem(hiscore)); + highScoreBoard.innerHTML = "HighScore: "+ hiscore; +} +window.requestAnimationFrame(main); +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 "ArrowRight": + inputDir.x = 1; + inputDir.y = 0; + break; + + case "ArrowLeft": + inputDir.x = -1; + inputDir.y = 0; + break; + + default: + break; + } +}); \ No newline at end of file diff --git a/(5.) Snake Game/style.css b/(5.) Snake Game/style.css new file mode 100644 index 00000000..f80517b4 --- /dev/null +++ b/(5.) Snake Game/style.css @@ -0,0 +1,87 @@ +@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&family=Varela+Round&display=swap'); + +*{ + padding: 0; + margin: 0; +} + +body{ + overflow: hidden; +} + +.body{ + background-image: url("bg.jpg"); + min-height: 100vh; + background-size: 100vw 100vh; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; +} + +#board{ + background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167)); + width: 90vmin; + height: 92vmin; + border: 2px solid black; + display: grid; + grid-template-rows: repeat(18, 1fr); + grid-template-columns: repeat(18, 1fr); +} + +#scoreBoard{ + position: absolute; + top: 65px; + font-size: 40px; + right: 100px; + font-weight: bolder; + border: 4px dotted rgb(1, 48, 1); + padding: 10px; + font-family: 'New Tegomin', serif; +} + +#highScoreBoard{ + position: absolute; + top: 160px; + font-size: 40px; + right: 100px; + font-weight: bolder; + border: 4px dotted rgb(1, 48, 1); + padding: 10px; + font-family: 'New Tegomin', serif; +} + +#gameName{ + position: absolute; + top: 65px; + font-size: 70px; + left: 25px; + font-weight: bolder; + padding: 10px; + font-family: 'New Tegomin', serif; + height: 100vh; +} + +#rules{ + font-size: 20px; + line-height: 200%; +} + +.head{ + background: radial-gradient(circle, green, pink, lightgreen, red); + border: .25vmin solid rgb(48, 68, 48); + border-radius: 12px; + transform: scale(1.02); +} + +.snake{ + background-color: purple; + border: .25vmin solid white; + border-radius: 12px; +} + +.food{ + background: linear-gradient(green, blue); + border-radius: 50%; + border: .25vmin dotted purple; +} \ No newline at end of file