fineanmol · fineanmol · Oct 21, 2021 · Oct 21, 2021 · Oct 21, 2021 · Oct 21, 2021
diff --git a/Contributors.html b/Contributors.html
@@ -376,7 +376,8 @@
     <a class="box-item" href="https://github.com/Japoncio3k"><span>Gustavo Kamihara</span></a>
       <a class="box-item" href="https://github.com/anilectjose"><span>Anilect Jose</span></a>
         <a class="box-item" href="https://github.com/jyoti88"><span>Jyoti88</span></a>
-        <a class="box-item" href="https://github.com/GraniteMask"><span>Ratnadeep Das Choudhury</span></a>
+        <a class="box-item" href="https://github.com/ankitkumar5358"><span>Ankit Kumar</span></a>
+    <a class="box-item" href="https://github.com/GraniteMask"><span>Ratnadeep Das Choudhury</span></a>
 
       <!-- Please maintain the alignment... -->
 

diff --git a/Snake Food Game in Frontend/bg.jpg b/Snake Food Game in Frontend/bg.jpg
diff --git a/Snake Food Game in Frontend/css/style.css b/Snake Food Game in Frontend/css/style.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+}
+.body{
+    background: 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(166, 231, 166), rgb(219, 219, 137));
+    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(71, 0, 18), rgb(255, 255, 8));
+    border: 2px solid purple;
+    border-radius: 9px;
+    transform: scale(1.02);
+}
+
+.snake{
+    background-color: purple;
+    border: .25vmin solid white;
+    border-radius: 12px;
+
+}
+
+.food{
+    background: linear-gradient(red, purple);
+    /* border: .25vmin solid black; */
+    border-radius: 50%;
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    display: inline-block;
+
+}
+#scoreBox{
+    position: absolute;
+    top: 9px;
+    right: 200px;
+    font-size: 39px;
+    font-weight: bold;
+    font-family: 'Philosopher', sans-serif;
+}
+#hiscoreBox{
+    float: left;
+    /* margin-top: 200px ; */
+    /* position: absolute; */
+    font-size: 39px;
+    font-weight: bold;
+    font-family: 'Philosopher', sans-serif;
+}
diff --git a/Snake Food Game in Frontend/food.wav b/Snake Food Game in Frontend/food.wav
diff --git a/Snake Food Game in Frontend/gameover.mp3 b/Snake Food Game in Frontend/gameover.mp3
diff --git a/Snake Food Game in Frontend/index.html b/Snake Food Game in Frontend/index.html
@@ -0,0 +1,20 @@
+<!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">
+    <title>SnakeMania| Ek Gaming Katha</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="body">
+        <div id="scoreBox"> Score: 0</div>
+        <div id="hiscoreBox">High Score: 0</div>
+        <div id="board"></div>
+    </div>
+
+</body>
+    <script src="js/script.js">
+    </script>
+</html>
diff --git a/Snake Food Game in Frontend/js/script.js b/Snake Food Game in Frontend/js/script.js
@@ -0,0 +1,142 @@
+//game constants & variconsconst
+let inputDir = {x:0, y:0};
+const foodSound = new Audio('food.wav');
+const gameOverSound = new Audio('gameover.mp3');
+const moveSound  = new Audio('move.mp3');
+const musicSound = new Audio('music.mp3');
+let speed =  4;
+let score = 0;
+let lastPaintTime = 0;
+let snakeArr = [
+    {x:13, y:15}
+];
+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(); 
+    // console.log(ctime);
+}
+function isCollide(snake){
+        //if snake bump into its own body
+        for(let i = 1; i < snakeArr.length; i++){
+            if(snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
+                return true;
+            }
+        }
+        //if snake bump into wall
+            if(snake[0].x >= 18 || snake[0].x <= 0 ||  snake[0].y >= 18 || snake[0].y <= 0){
+                return true;
+            }
+        }
+
+
+function gameEngine(){
+    //part 1: update snake array
+    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 snake eaten the food, increment the score & regerate the foods
+    if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){
+        foodSound.play();
+        score += 1;
+        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 & food
+    //Display the snake
+    board.innerHTML = "";
+    snakeArr.forEach((e,index)=>{
+        snakeElement = document.createElement('div');
+        snakeElement.style.gridRowStart = e.y;
+        snakeElement.style.gridColumnStart = e.x;
+        snakeElement.classList.add('snake');
+        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 logics starts here
+
+let hiscore = localStorage.getItem("hiscore");
+if(hiscore == null){
+    hiscoreval  = 0;
+    localStorage.setItem("hiscore",JSON.stringify(hiscoreval))
+}
+else{
+    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;        
+
+    }
+});
diff --git a/Snake Food Game in Frontend/move.mp3 b/Snake Food Game in Frontend/move.mp3
diff --git a/Snake Food Game in Frontend/music.mp3 b/Snake Food Game in Frontend/music.mp3