diff --git a/SnakeGame/css/style.css b/SnakeGame/css/style.css new file mode 100644 index 0000000..2a99401 --- /dev/null +++ b/SnakeGame/css/style.css @@ -0,0 +1,62 @@ +@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); +*{ + padding: 0; + margin: 0; +} + +.body{ + background: url("../img/bg.jpg"); + min-height: 100vh; + background-size: 100vw 100vh; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; +} + +#scoreBox{ + position: absolute; + top: 9px; + right: 200px; + font-size: 39px; + font-weight: bold; + font-family: 'New Tegomin', serif; +} + +#hiscoreBox{ + position: absolute; + top: 59px; + right: 140px; + font-size: 39px; + font-weight: bold; + font-family: 'New Tegomin', serif; +} + +#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); +} + +.head{ + background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129)); + border: 2px solid rgb(34, 4, 34); + transform: scale(1.02); + border-radius: 9px; +} + +.snake{ + background-color: purple; + border: .25vmin solid white; + border-radius: 12px; +} + +.food{ + background: linear-gradient(red, purple); + border: .25vmin solid black; + border-radius: 8px; +} \ No newline at end of file diff --git a/SnakeGame/img/bg.jpg b/SnakeGame/img/bg.jpg new file mode 100644 index 0000000..a9e41de Binary files /dev/null and b/SnakeGame/img/bg.jpg differ diff --git a/SnakeGame/index.html b/SnakeGame/index.html new file mode 100644 index 0000000..0b8c681 --- /dev/null +++ b/SnakeGame/index.html @@ -0,0 +1,18 @@ + + + + + + + SnakeMania - Ek Gaming Katha + + + +
+
Score: 0
+
HiScore: 0
+
+
+ + + \ No newline at end of file diff --git a/SnakeGame/js/index.js b/SnakeGame/js/index.js new file mode 100644 index 0000000..2a55155 --- /dev/null +++ b/SnakeGame/js/index.js @@ -0,0 +1,149 @@ +// Game Constants & Variables +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 = 19; +let score = 0; +let lastPaintTime = 0; +let snakeArr = [ + {x: 13, y: 15} +]; + +let food = {x: 6, y: 7}; + +// Game Functions +function main(ctime) { + window.requestAnimationFrame(main); + // console.log(ctime) + if((ctime - lastPaintTime)/1000 < 1/speed){ + return; + } + lastPaintTime = ctime; + gameEngine(); +} + +function isCollide(snake) { + // If you bump into yourself + for (let i = 1; i < snakeArr.length; i++) { + if(snake[i].x === snake[0].x && snake[i].y === snake[0].y){ + return true; + } + } + // If you bump into the wall + if(snake[0].x >= 18 || snake[0].x <=0 || snake[0].y >= 18 || snake[0].y <=0){ + return true; + } + + return false; +} + +function gameEngine(){ + // Part 1: Updating the snake array & 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; + } + + // If you have eaten the food, increment the score and regenerate the food + if(snakeArr[0].y === food.y && snakeArr[0].x ===food.x){ + foodSound.play(); + score += 1; + if(score>hiscoreval){ + hiscoreval = score; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); + hiscoreBox.innerHTML = "HiScore: " + hiscoreval; + } + scoreBox.innerHTML = "Score: " + score; + snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); + 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 the 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 the 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 +musicSound.play(); +let hiscore = localStorage.getItem("hiscore"); +if(hiscore === null){ + hiscoreval = 0; + localStorage.setItem("hiscore", JSON.stringify(hiscoreval)) +} +else{ + hiscoreval = JSON.parse(hiscore); + hiscoreBox.innerHTML = "HiScore: " + hiscore; +} + +window.requestAnimationFrame(main); +window.addEventListener('keydown', e =>{ + inputDir = {x: 0, y: 1} // Start the game + moveSound.play(); + switch (e.key) { + case "ArrowUp": + console.log("ArrowUp"); + inputDir.x = 0; + inputDir.y = -1; + break; + + case "ArrowDown": + console.log("ArrowDown"); + inputDir.x = 0; + inputDir.y = 1; + break; + + case "ArrowLeft": + console.log("ArrowLeft"); + inputDir.x = -1; + inputDir.y = 0; + break; + + case "ArrowRight": + console.log("ArrowRight"); + inputDir.x = 1; + inputDir.y = 0; + break; + default: + break; + } + +}); \ No newline at end of file diff --git a/SnakeGame/music/food.mp3 b/SnakeGame/music/food.mp3 new file mode 100644 index 0000000..076198c Binary files /dev/null and b/SnakeGame/music/food.mp3 differ diff --git a/SnakeGame/music/gameover.mp3 b/SnakeGame/music/gameover.mp3 new file mode 100644 index 0000000..414bf65 Binary files /dev/null and b/SnakeGame/music/gameover.mp3 differ diff --git a/SnakeGame/music/move.mp3 b/SnakeGame/music/move.mp3 new file mode 100644 index 0000000..4d3d245 Binary files /dev/null and b/SnakeGame/music/move.mp3 differ diff --git a/SnakeGame/music/music.mp3 b/SnakeGame/music/music.mp3 new file mode 100644 index 0000000..f1507af Binary files /dev/null and b/SnakeGame/music/music.mp3 differ