Added snake game

games/javascript/Veronica-the-TreeBoa-snake-game-Js/README.md

@@ -0,0 +1,4 @@
+# Veronica-the-TreeBoa
+A simple snake game made using Vanilla Js
+
+Incase if you want to reset the highscore ,just clear out the local storage and you are good to go!

games/javascript/Veronica-the-TreeBoa-snake-game-Js/app.js

@@ -0,0 +1,221 @@
+//Game Background 
+var myVar = setInterval(setColor, 300);
+
+function setColor() {
+    var x = document.body;
+    x.style.backgroundColor = x.style.backgroundColor == "coral" ? "royalblue" : "coral";
+}
+
+
+
+
+//Game variables
+let inputDir = { x: 0, y: 0 };
+let speed = 15;
+let score = 0;
+let lastPaintTime = 0;
+const foodSound = new Audio("music/food.mp3")
+const gameOverSound = new Audio("music/crash-sound.mp3")
+const musicSound = new Audio("music/Don't Stop.mp3")
+
+
+let snakeArr = [
+    { x: 13, y: 15 }
+];
+food = { x: 3, y: 5 }
+
+
+
+
+
+//Game functions
+function main(ctime) {
+    window.requestAnimationFrame(main);
+    if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
+        return
+    }
+    lastPaintTime = ctime
+    gameEngine()
+
+
+}
+
+function isCollide(snake) {
+    //If snake bumps into itself
+    for (let i = 1; i < snakeArr.length; i++) {
+        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
+            return true;
+        }
+    }
+    //If the snake bumps 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 & food array
+    if (isCollide(snakeArr)) {
+        musicSound.pause()
+        gameOverSound.play();
+        inputDir = { x: 0, y: 0 }
+        alert("Game Over! Press any key to continue,NOOB.")
+        snakeArr = [{ x: 13, y: 15 }]
+        musicSound.play()
+        score = 0
+    }
+
+
+
+
+    //If snake has eaten the food  increment the score by 1 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 = ' Hi Score : ' + hiscoreval
+        }
+
+        scoreBox.innerHTML = "Score: " + score;
+        snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y })
+        let a = 9;
+        let b = 15;
+
+        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 array
+    //Displaying 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);
+    })
+
+
+
+
+
+    //Displaying food
+    foodElement = document.createElement("div");
+    foodElement.style.gridRowStart = food.y;
+    foodElement.style.gridColumnStart = food.x;
+    foodElement.classList.add('food');
+    board.appendChild(foodElement);
+}
+
+
+
+
+
+
+//Game Logic
+
+let hiscore = localStorage.getItem('hiscore')
+if (hiscore === null) {
+    hiscoreval = 0
+    localStorage.setItem('hiscore', JSON.stringify(hiscoreval))
+} else {
+    hiscoreval = JSON.parse(localStorage.getItem(hiscore))
+    hiscoreBox.innerHTML = ' Hi Score : ' + hiscore
+}
+
+
+window.requestAnimationFrame(main);
+window.addEventListener('keydown', e => {
+    inputDir = { x: 0, y: 1 } //Starts the game
+    musicSound.play()
+
+    switch (e.key) {
+        case "ArrowUp":
+
+            inputDir.x = 0;
+            inputDir.y = -1;
+            break;
+
+        case "ArrowDown":
+
+            inputDir.x = 0;
+            inputDir.y = 1;
+            break;
+
+        case "ArrowLeft":
+
+            inputDir.x = -1;
+            inputDir.y = 0;
+            break;
+
+        case "ArrowRight":
+
+            inputDir.x = 1;
+            inputDir.y = 0;
+            break;
+
+        case "w":
+
+            inputDir.x = 0;
+            inputDir.y = -1;
+            break;
+
+        case "s":
+
+            inputDir.x = 0;
+            inputDir.y = 1;
+            break;
+
+        case "a":
+
+            inputDir.x = -1;
+            inputDir.y = 0;
+            break;
+
+        case "d":
+
+            inputDir.x = 1;
+            inputDir.y = 0;
+            break;
+
+        case "l":
+            score += 1;
+            break;
+
+        default:
+            break;
+    }
+
+
+})

games/javascript/Veronica-the-TreeBoa-snake-game-Js/index.html

@@ -0,0 +1,29 @@
+<!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="style.css">
+    <title>Veronica the Tree Boa</title>
+</head>
+
+<body>
+
+    <div class="container">
+
+        <div id="scoreBox">Score : 0</div>
+        <div id="hiscoreBox">Hi Score : 0</div>
+        <div class="body">
+            <div id="board"> </div>
+        </div>
+
+    </div>
+
+
+</body>
+
+<script src="app.js"></script>
+Made by Manish
+</html>

games/javascript/Veronica-the-TreeBoa-snake-game-Js/style.css

@@ -0,0 +1,72 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+.body {
+    min-height: 100vh;
+    background-size: 100vw 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* color: ; */
+}
+
+#board {
+    background: linear-gradient(rgb(96, 23, 214), rgb(0, 0, 0));
+    /* background-image: url("snake1.png"); */
+    background-size: cover;
+    background-position: center center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    width: 90vmin;
+    height: 90vmin;
+    border: 1px solid rgb(0, 0, 0);
+    display: grid;
+    grid-template-rows: repeat(18, 1fr);
+    grid-template-columns: repeat(18, 1fr);
+}
+
+.head {
+    background: linear-gradient( rgb(26, 104, 17), rgb(165, 211, 38));
+    border: dashed .25vmin rgb(9, 243, 9);
+    border-radius: 13px;
+    transform: scale(1.1);
+    /* color: ; */
+}
+
+.food {
+    background: linear-gradient(rgb(189, 209, 7), rgb(228, 10, 10));
+    border: outset .4vmin rgb(22, 185, 226);
+    border-radius: 13px;
+    transform: scale(1.1);
+}
+
+.snake {
+    background: linear-gradient( rgb(4, 43, 3), rgb(20, 175, 33));
+    border: dashed .3vmin rgb(17, 206, 32);
+    border-radius: 15px;
+}
+
+#scoreBox {
+    display: flex;
+    font-size: xx-large;
+    font-weight: bold;
+    color: purple;
+}
+
+#hiscoreBox {
+    display: flex;
+    font-size: xx-large;
+    font-weight: bold;
+    color: purple;
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: center;
+    align-items: center;
+    flex-direction: row;
+}