ChromeGaming · Amancoder-01 · May 28, 2024 · May 22, 2024 · May 24, 2024
diff --git a/README.md b/README.md
@@ -246,6 +246,9 @@ ________________________________________________________________________________
 |  189   | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) |
 |  190   | [Pop My Balloon](<MultiPlayer - Games/Pop_My_Balloon>) |
 |  191   | [Doraemon Run](.SinglePlayer%20-%20Games/DoraemonRun) |
+|  192   | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) |
+|  193   | [SnakeBites Game](./SinglePlayer%20-%20Games/SnakeBites) |
+
 
 
 

diff --git a/SinglePlayer - Games/Banner - image/Snake-game.png b/SinglePlayer - Games/Banner - image/Snake-game.png
diff --git a/SinglePlayer - Games/Banner - image/snake.webp b/SinglePlayer - Games/Banner - image/snake.webp
diff --git a/SinglePlayer - Games/Banner - image/snakebite-slot-feat.webp b/SinglePlayer - Games/Banner - image/snakebite-slot-feat.webp
diff --git a/SinglePlayer - Games/Banner - image/snakebites.png b/SinglePlayer - Games/Banner - image/snakebites.png
diff --git a/SinglePlayer - Games/SnakeBites/README.md b/SinglePlayer - Games/SnakeBites/README.md
@@ -0,0 +1,42 @@
+# **SnakeBites Game** 
+
+---
+
+<br>
+
+## **Description 📃** 
+- This project is built on a basic web tech stacks such as HTML, CSS and Javascript.
+- This game is just for fun.
+
+## **functionalities 🎮** 
+- This game is a single player game.
+- Using Up, Down, Left and Right Arrows, move the snake.
+- By eating food, score will increase.
+- High score will be updated when current score will be more than the high score.
+
+## ** Additional Features **
+- Displaying the current score and high score of the player.
+- Implementing a graphical user interface (GUI) for a more interactive experience.
+- Adding background sound and moving snake and eating food sounds.
+
+<br>
+
+## **How to play? 🕹️**
+- This is a single player game.
+- Using Up, Down, Left and Right Arrows, move the snake in such a way it does not touch the boundaries and also not the snake body.
+- If head of the snake smash into their body and the boundaries, will result into **"GAME OVER"**
+- By eating the food, score will increase.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![image](../SnakeBites/images/Snake-game.png)
+
+<br>
+
+## **Working video 📹**
+<!-- add your working video over here -->
+
diff --git a/SinglePlayer - Games/SnakeBites/Snake_Bites.css b/SinglePlayer - Games/SnakeBites/Snake_Bites.css
@@ -0,0 +1,111 @@
+:root{
+    --background: #d9d9d9;
+    --color: #ffc300;
+    --accent: #000814;
+    --shade: #001d3d;
+}
+*{
+    padding: 0;
+    margin: 0;   
+    box-sizing: border-box;
+    text-align: center;
+    font-family: 'Lato', sans-serif;
+}
+body{
+    background-color:#fdf0d5; 
+}
+.body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+img{
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    height:300px;
+    object-fit: cover;
+}
+h1{
+    position: absolute;
+    top: 15px;
+    left: 20px;
+    font-size: 50px;
+    font-family: 'Rubik', sans-serif;
+    color: var(--accent);  
+}
+#scoreBox{
+    position: absolute;
+    top: 80px;
+    left: 20px;
+    font-size: 20px;
+}
+#hiscoreBox{
+    position: absolute;
+    top: 80px;
+    left: 200px;
+    font-size: 20px;
+}
+#board{
+    background: linear-gradient(var(--accent), #669bbc);
+    width: 90vmin;
+    height: 92vmin;
+    margin-top: 25px;
+    box-shadow: 0px 0px 10px 2px rgb(25, 26, 27) ;
+    display:grid;
+    grid-template-rows: repeat(18, 1fr);
+    grid-template-columns: repeat(18, 1fr);
+}
+.head{
+    background: linear-gradient(#780000, #c1121f);
+    box-shadow: 0px 0px 5px 2px rgb(25, 26, 27) ;
+    border: 0.25vmin solid black;
+    border-radius: 9px;
+    transform:scale(1.02);
+
+}
+.snake{
+    background-color: #c1121f;
+    box-shadow: 0px 0px 5px 2px rgb(25, 26, 27) ;
+    border-radius: 12px;
+}
+.food{
+    background: linear-gradient(#ee9b00, #e9d8a6);
+    border: 0.5vmin solid #e76f51;
+    border-radius: 8px;
+}
+.back{
+    all: unset;
+    position:fixed;
+    top:25px;
+    right:30px;
+    background-color: var(--accent);
+    color: var(--color);
+    padding: 15px;
+    border-radius: 1rem;
+}
+
+@media  screen and (max-width:1000px) {
+    .body{
+        flex-direction: column;
+        margin: 8% 0;
+    }
+    img{
+        display: none;
+    }
+    h1{
+        position: relative;
+        text-align: center;
+    }
+    #scoreBox{   
+        left: 5px;
+    }
+    #hiscoreBox{
+        left:100px;
+    }
+    .back{
+        top:70px;
+        right:25px;
+        font-size: 10px;
+    }
+}
diff --git a/SinglePlayer - Games/SnakeBites/Snake_Bites.html b/SinglePlayer - Games/SnakeBites/Snake_Bites.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@800&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="Snake_Bites.css">
+    <link rel="icon" href="images/logo.jpeg">
+    <title>Snake-Bites</title>
+</head>
+
+<body>
+    <div class="main">
+        <h1>Snake Bites</h1>
+
+    <img src="images/snake.gif">
+    <div class="body">
+        <div class="score" id="scoreBox">Score: 0</div>
+        <div class="score" id="hiscoreBox">High Score: 0</div>
+        <div id="board"></div>
+    </div>
+    </div>
+
+    <script src="Snake_Bites.js"></script>
+</body>
+
+</html>
diff --git a/SinglePlayer - Games/SnakeBites/Snake_Bites.js b/SinglePlayer - Games/SnakeBites/Snake_Bites.js
@@ -0,0 +1,141 @@
+// Game Constants & Variables
+let inputDir = {x: 0, y: 0}; 
+const foodSound = new Audio('food.mp3');
+const gameOverSound = new Audio('gameover.mp3');
+const moveSound = new Audio('move.mp3');
+const musicSound = new Audio('music.mp3');
+let speed = prompt("Enter speed of the Snake you want: (5: easy, 10: medium, >15: hard)");
+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);
+    if((ctime - lastPaintTime)/1000 < 1/speed){
+        return;
+    }
+    musicSound.play();
+    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}];
+        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":
+            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;
+        default:
+            break;
+    }
+
+});
diff --git a/SinglePlayer - Games/SnakeBites/food.mp3 b/SinglePlayer - Games/SnakeBites/food.mp3
diff --git a/SinglePlayer - Games/SnakeBites/gameover.mp3 b/SinglePlayer - Games/SnakeBites/gameover.mp3
diff --git a/SinglePlayer - Games/SnakeBites/images/Snake-game.png b/SinglePlayer - Games/SnakeBites/images/Snake-game.png
diff --git a/SinglePlayer - Games/SnakeBites/images/logo.jpeg b/SinglePlayer - Games/SnakeBites/images/logo.jpeg
diff --git a/SinglePlayer - Games/SnakeBites/images/snake.gif b/SinglePlayer - Games/SnakeBites/images/snake.gif
diff --git a/SinglePlayer - Games/SnakeBites/move.mp3 b/SinglePlayer - Games/SnakeBites/move.mp3
diff --git a/SinglePlayer - Games/SnakeBites/music.mp3 b/SinglePlayer - Games/SnakeBites/music.mp3
diff --git a/SinglePlayer - Games/SnakeBites/snakebites.mp4 b/SinglePlayer - Games/SnakeBites/snakebites.mp4