maulanaakbardj · ShubhamGoyal7125 · Oct 25, 2022
diff --git a/Javascript/snakeGame/css/style.css b/Javascript/snakeGame/css/style.css
@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Dongle&family=New+Tegomin&family=Poppins:wght@300;400;500;600&family=Roboto&display=swap');
+
+*{
+    padding: 0%;
+    margin: 0%;
+    font-family: 'New Tegomin', serif;
+}
+
+.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;
+}
+
+#board{
+    width: 90vmin;
+    height: 92vmin;
+    border: 4px solid black;
+    background: linear-gradient(rgb(190, 233, 190), rgb(237, 237, 190));
+    display: grid;
+    grid-template-columns: repeat(18, 1fr);
+    grid-template-rows: repeat(18, 1fr);
+}
+
+#score{
+    position: absolute;
+    top: 9px;
+    right: 200px;
+    font-weight: bold;
+    font-size: 40px;
+}
+
+#hiScore{
+    position: absolute;
+    top: 100px;
+    right: 200px;
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.head{
+    background: linear-gradient(red, yellow);
+    border: 3px solid purple;
+    border-radius: 8px;
+    transform: scale(1.02);
+}
+
+.snakeBody{
+    background: purple;
+    border: .25vmin solid white;
+    border-radius: 12px;
+}
+
+.food{
+    background: linear-gradient(red, purple);
+    border: .5vmin solid black;
+    border-radius: 8px;
+}
diff --git a/Javascript/snakeGame/img/bg.jpg b/Javascript/snakeGame/img/bg.jpg
diff --git a/Javascript/snakeGame/index.html b/Javascript/snakeGame/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="body">
+        <div id="score">Score: 0</div>
+        <div id="hiScore">High Score: 0</div>
+        <div id="board"></div>
+    </div>
+
+</body>
+<script src="./js/index.js"></script>
+</html>
diff --git a/Javascript/snakeGame/js/index.js b/Javascript/snakeGame/js/index.js
@@ -0,0 +1,172 @@
+// Game Constants and 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 board = document.getElementById("board");
+let scoreId = document.getElementById("score");
+let highScoreBox = document.getElementById("hiScore");
+let speed = 5;
+let lastPaintTime = 0;
+let score = 0;
+let hiscoreval = 0;
+let snakeArr = [
+    {x: 13, y: 14}//Initial position of snake head;
+];
+let food = {x: 10, y: 12}
+
+// Game Functions
+function main(ctime){
+    window.requestAnimationFrame(main);
+    // console.log(ctime);
+    if((ctime - lastPaintTime)/1000 < 1/speed){ //It determines the refresh rate of the game.
+        return;
+    }
+    lastPaintTime = ctime;
+    gameEngine();
+}
+
+function isCollide(snake){
+    //1: If you bump into yourself
+    for (let i = 1; i < snake.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;
+    }
+}
+
+function gameEngine(){
+    //Part 1: Updating the snake (snake array) and food
+
+    //If snake collide
+    if(isCollide(snakeArr)){
+        gameOverSound.play();
+        musicSound.pause();
+        inputDir = {x: 0, y: 0};
+        alert("Game Over. Press any key to restart the game.");
+        score = 0;
+        scoreId.innerHTML = `Score: ${score}`;
+        snakeArr = [
+            {x: 13, y: 14}//Initial position of snake head;
+        ];
+        musicSound.play();
+    }
+
+    //If you have eaten the food, increment the score, regenerate the food and increase the length of snake;
+    if(snakeArr[0].x == food.x && snakeArr[0].y == food.y){
+        foodSound.play();
+        score += 1;
+        if(score > hiscoreval){
+            hiscoreval = score;
+            localStorage.setItem("hiScore", JSON.stringify(hiscoreval));
+            highScoreBox.innerHTML = `High Score: ${hiscoreval}`;
+        }
+        scoreId.innerHTML = `Score: ${score}`;
+
+        // unshift - Inserts new elements at the start of an array, and returns the new length of the array.
+        snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y});
+
+        // Math.round(a + (b - a)*Math.random()) - formula to produce random numbers between a and b
+        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 by 1 position
+    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
+    board.innerHTML = "";
+
+    //2.1: Display the snake
+    snakeArr.forEach((e, index)=>{
+        let snakeElement = document.createElement('div');
+        snakeElement.style.gridColumnStart = e.x;
+        snakeElement.style.gridRowStart = e.y;
+        if(index === 0){
+            snakeElement.classList.add('head');
+        }
+        else{
+            snakeElement.classList.add('snakeBody');
+        }
+        board.appendChild(snakeElement);
+    });
+
+
+    //2.2: Display the food
+    let foodElement = document.createElement('div');
+    foodElement.style.gridColumnStart = food.x;
+    foodElement.style.gridRowStart = food.y;
+    foodElement.classList.add('food');
+    board.appendChild(foodElement);
+
+}
+
+
+
+
+
+
+
+
+
+
+
+// Main logic starts here
+let hiScore = localStorage.getItem("hiScore");
+if(hiScore === null){
+    hiscoreval = 0;
+    localStorage.setItem("hiScore", JSON.stringify(hiscoreval));
+}
+else{
+    hiscoreval = JSON.parse(hiScore);
+    highScoreBox.innerHTML = `High Score: ${hiscoreval}`;
+}
+
+window.requestAnimationFrame(main);
+
+window.addEventListener('keydown', e=>{
+    inputDir = {x: 0, y: 1}; //Starts the engine
+    moveSound.play();
+    musicSound.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;
+
+    }
+})
diff --git a/Javascript/snakeGame/music/food.mp3 b/Javascript/snakeGame/music/food.mp3
diff --git a/Javascript/snakeGame/music/gameover.mp3 b/Javascript/snakeGame/music/gameover.mp3
diff --git a/Javascript/snakeGame/music/move.mp3 b/Javascript/snakeGame/music/move.mp3
diff --git a/Javascript/snakeGame/music/music.mp3 b/Javascript/snakeGame/music/music.mp3