Merge pull request #40 from Akash20x/master

Snake Game Javascript Project
swapnilsparsh · Oct 4, 2021 · bc2f651 · bc2f651
2 parents 4d88cb1 + fdc154f
commit bc2f651
Show file tree

Hide file tree

Showing 11 changed files with 278 additions and 0 deletions.
diff --git a/30DaysOfJavaScript/assets/38.png b/30DaysOfJavaScript/assets/38.png
diff --git a/38 - Snake-Game/assets/snake-game.png b/38 - Snake-Game/assets/snake-game.png
diff --git a/38 - Snake-Game/audio/food.mp3 b/38 - Snake-Game/audio/food.mp3
diff --git a/38 - Snake-Game/audio/gameover.mp3 b/38 - Snake-Game/audio/gameover.mp3
diff --git a/38 - Snake-Game/audio/move.mp3 b/38 - Snake-Game/audio/move.mp3
diff --git a/38 - Snake-Game/audio/music.mp3 b/38 - Snake-Game/audio/music.mp3
diff --git a/38 - Snake-Game/index.html b/38 - Snake-Game/index.html
@@ -0,0 +1,35 @@
+<!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">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <link rel="shortcut icon" href="assets/snake-game.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+    <title>Snake Game</title>
+</head>
+
+<body>
+    <h1>Snake Game</h1>
+    <div class="main">
+        <div class="content">
+        <div id="board"></div>
+    </div>
+    <div id="scoreBox">Score: 0</div>
+    <div id="hiscoreBox">Hi Score: 0</div>
+    </div>
+
+<footer>
+    <p>&#x3c; &#47; &#x3e; with ❤️ by 
+        <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
+        <br> 
+        <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
+        </a>
+    </p>
+    </footer>
+<script src="script.js"></script>
+</body>
+
+</html>
diff --git a/38 - Snake-Game/script.js b/38 - Snake-Game/script.js
@@ -0,0 +1,125 @@
+let inputDir = { x: 0, y: 0 };
+const moveSound = new Audio('audio/move.mp3');
+const foodSound = new Audio('audio/food.mp3');
+const gameOverSound = new Audio('audio/gameover.mp3');
+let speed = 5;
+let lastPaintTime = 0;
+let snakeArr = [{ x: 13, y: 15 }]
+food = { x: 6, y: 7 };
+let score = 0;
+// Game Functions
+function main(ctime) {
+    window.requestAnimationFrame(main);
+    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() {
+    // Updating the snake array & Food
+    if (isCollide(snakeArr)) {
+        gameOverSound.play();
+        inputDir = { x: 0, y: 0 };
+        alert("Game Over. Press Any Key To Continue");
+        snakeArr = [{ x: 13, y: 15 }];
+        score = 0;
+        scoreBox.innerHTML = 'Score: ' + score;
+    }
+    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));
+            hiscoreBox.innerHTML = "Hi Score: " + 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 - 1) * Math.random()), y: Math.round(a + (b - 1) * 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;
+
+    // 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
+let hiscore = localStorage.getItem("hiscore");
+if (hiscore === null) {
+    hiscoreval = 0;
+    localStorage.setItem("hiscore", JSON.stringify(hiscoreval));
+} else {
+    hiscoreval = JSON.parse(hiscore);
+    hiscoreBox.innerHTML = "Hi Score: " + hiscore;
+}
+
+window.requestAnimationFrame(main);
+window.addEventListener('keydown', e => {
+    inputDir = { x: 0, y: 1 };
+    moveSound.play();
+    switch (e.key) {
+        case "ArrowUp":
+            console.log(e.key);
+            inputDir.x = 0;
+            inputDir.y = -1;
+            break;
+        case "ArrowDown":
+            console.log(e.key);
+            inputDir.x = 0;
+            inputDir.y = 1;
+            break;
+        case "ArrowLeft":
+            console.log(e.key);
+            inputDir.x = -1;
+            inputDir.y = 0;
+            break;
+        case "ArrowRight":
+            console.log(e.key);
+            inputDir.x = 1;
+            inputDir.y = 0;
+            break;
+        default:
+            break;
+    }
+});
diff --git a/38 - Snake-Game/style.css b/38 - Snake-Game/style.css
@@ -0,0 +1,108 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    overflow: hidden;
+    background: #19172e;
+    font-size: 40px;
+  }
+
+.main {
+    background: #614385;
+    background: -webkit-linear-gradient(to right, #516395, #614385);
+    background: linear-gradient(to right, #516395, #614385);
+    background-repeat: no-repeat;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+}
+
+.content {
+    width: 300px;
+    height: 365px;
+    padding-top: 8px;
+}
+h1 {
+    color: #fff;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 30px;
+    padding-top: 10px;
+    font-size: 2rem !important;
+  }
+
+#board {
+    background-color: #260e44;
+    width: 260px;
+    height: 285px;
+    border: 4px solid white;
+    border-radius: 4px;
+    display: grid;
+    grid-template-rows: repeat(18, 1fr);
+    grid-template-columns: repeat(18, 1fr);
+    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
+    margin-left: 18px;
+    margin-top:5px;
+
+}
+
+#scoreBox {
+    position: absolute;
+    font-size: 14px;
+    color: white;
+    bottom: 11%;
+    left: 30%;
+    font-family: 'Press Start 2P', cursive;
+}
+
+#hiscoreBox {
+    position: absolute;
+    font-size: 14px;
+    color: white;
+    bottom: 5%;
+    left: 16%;
+    font-family: 'Press Start 2P', cursive;
+}
+
+
+.head {
+    background: yellow;
+    border: 2px solid rgb(26, 1, 26);
+    transform: scale(1.02);
+    border-radius: 9px;
+}
+
+.snake {
+    background-color: rgb(0, 225, 255);
+}
+
+.food {
+    background: red;
+    border: .25vmin solid black;
+    border-radius: 8px;
+}
+
+footer {
+    text-align: center;
+    color: white;
+    font-size: 1rem !important;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-bottom: 0;
+    padding: 5px;
+  }
+
+  footer a:visited {
+    color: inherit;
+  }
diff --git a/README.md b/README.md
@@ -103,6 +103,9 @@ Repo containing all the projects made in 30 Days while completing the <b>30 Days
 
 ## [Day 33 - Feedback UI](https://30daysofjs.netlify.app/33%20-%20feedback%20ui/index.html)
 ![Feedback UI](https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/33.png)
+
+## [Day 38 -  Snake Game](https://30daysofjs.netlify.app/32%20-%20Snake%20Game/index.html)
+![Snake Game](https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/38.png)
 ## License
 
 This project follows the [MIT License](/LICENSE).

diff --git a/index.html b/index.html
@@ -264,6 +264,13 @@ <h4>Rock Paper Scissors Game</h4>
         <img src="30DaysOfJavaScript/assets/37.png" alt="Rock Paper Scissors Game" />
       </a>
     </div>
+
+     <div class="item">
+      <a target="_blank" href="38 - Snake-Game/index.html">
+        <h4>Snake Game</h4>
+        <img src="30DaysOfJavaScript/assets/38.png" alt="Snake Game" />
+      </a>
+    </div>
 
   </div>
 </div>