Added Belt_Black game.

kunjgit · Aug 5, 2024 · 1cd37a5 · 1cd37a5
1 parent 4391f95
commit 1cd37a5
Show file tree

Hide file tree

Showing 22 changed files with 398 additions and 1 deletion.
diff --git a/Games/Belt_Black/README.md b/Games/Belt_Black/README.md
@@ -0,0 +1,32 @@
+# **Belt_Black** 
+
+---
+
+<br>
+
+## **Description 📃** 
+- Belt_Bleck is a fighting game inspired from taken3.
+
+## **functionalities 🎮** 
+- Player can move in horizontal directions.
+- Player can shoot using bullets & hit with two random moves.
+- There will be a lifespan for each player.
+<br>
+
+## **How to play? 🕹️**
+
+- Start the game by clicking on the "Play Now" button.
+- Enemy will randomly attack you.
+- Use your Left-Arrow or Right-Arrow keys to move.
+- Each successful hit on a enemy will reduce enemy's points.
+- The game ends when you defeat the enemy or lose.
+<br>
+
+## **Screenshots 📸**
+<br>
+
+![image](./assets/images/Belt_Black.png)
+
+<br>
+
+Made with ❤️ by [Anurag Vishwakarma](https://vishanurag.github.io/)
diff --git a/Games/Belt_Black/assets/images/Belt_Black.png b/Games/Belt_Black/assets/images/Belt_Black.png
diff --git a/Games/Belt_Black/assets/images/background.png b/Games/Belt_Black/assets/images/background.png
diff --git a/Games/Belt_Black/assets/images/logo.png b/Games/Belt_Black/assets/images/logo.png
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/1.gif b/Games/Belt_Black/assets/ninjas-imgs/1/1.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/2.gif b/Games/Belt_Black/assets/ninjas-imgs/1/2.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/3.gif b/Games/Belt_Black/assets/ninjas-imgs/1/3.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/4.gif b/Games/Belt_Black/assets/ninjas-imgs/1/4.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/5.gif b/Games/Belt_Black/assets/ninjas-imgs/1/5.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/6.gif b/Games/Belt_Black/assets/ninjas-imgs/1/6.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/1/tmp.gif b/Games/Belt_Black/assets/ninjas-imgs/1/tmp.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/2/1.gif b/Games/Belt_Black/assets/ninjas-imgs/2/1.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/2/2.gif b/Games/Belt_Black/assets/ninjas-imgs/2/2.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/2/3.gif b/Games/Belt_Black/assets/ninjas-imgs/2/3.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/2/4.gif b/Games/Belt_Black/assets/ninjas-imgs/2/4.gif
diff --git a/Games/Belt_Black/assets/ninjas-imgs/2/tmp1.gif b/Games/Belt_Black/assets/ninjas-imgs/2/tmp1.gif
diff --git a/Games/Belt_Black/assets/sound/fight.mp3 b/Games/Belt_Black/assets/sound/fight.mp3
diff --git a/Games/Belt_Black/game.html b/Games/Belt_Black/game.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Belt-Black</title>
+    <link rel="shortcut icon" href="./assets/images/logo.png" type="image/x-icon">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-black " id="body">
+    <section class="d-md-none  position-absolute top-0">
+        <h1 class="display-1 text-danger">
+            Oops! Your device doesn't supports this game.
+        </h1>
+    </section>
+
+    <div class="popup d-none border border-3 p-3 shadow rounded bg-black position-absolute align-self-center align-items-center gap-2 justify-content-center flex-column" id="popup">
+        <h1 id="popup-status" class="text-danger h1 text-center w-100"></h1>
+        <a href="./game.html" class="btn btn-success fs-1">Play Again</a>
+        <p class="small text-light">Made with ❤️ by<a href="https://vishanurag.github.io/" class="text-info btn">Anurag Vishwakarma</a></p>
+    </div>
+
+
+    <div class="container d-none d-md-block w-100 position-relative">
+
+        <div id="playerLife" class="position-absolute players-life p-1 border border-3 rounded "></div>
+        <div id="enemyLife" class="position-absolute players-life p-1 border border-3 rounded "></div>
+
+        <img id="player" class="players position-absolute " src="./assets/ninjas-imgs/1/1.gif">
+        <img id="enemy" class="players position-absolute " src="./assets/ninjas-imgs/2/1.gif">
+
+
+    </div>
+
+    <audio src="./assets/sound/fight.mp3" autoplay controls class="d-none"></audio>
+
+
+    <script defer src="script.js">
+
+
+    </script>
+</body>
+</html>
diff --git a/Games/Belt_Black/index.html b/Games/Belt_Black/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Belt-Black</title>
+    <link rel="shortcut icon" href="./assets/images/logo.png" type="image/x-icon">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body class="bg-black " id="body">
+    <section class="d-md-none  position-absolute top-0">
+        <h1 class="display-1 text-danger">
+            Oops! Your device doesn't supports this game.
+        </h1>
+    </section>
+
+    <div class="popup  border border-3 p-3 shadow rounded bg-black position-absolute align-self-center align-items-center gap-2 justify-content-center flex-column" id="popup">
+        <h1 id="popup-status" class="text-danger h1 text-center w-100"><img src="./assets/images/logo.png" width="80px" alt="Belt-Black by Anurag Vishwakarma">Belt-Black</h1>
+        <a href="./game.html" class="btn btn-success fs-1">Play Now</a>
+        <p class="small text-light">Made with ❤️ by<a href="https://vishanurag.github.io/" class="text-info btn">Anurag Vishwakarma</a></p>
+    </div>
+<!-- 
+
+    <div class="container d-none d-md-block w-100 position-relative">
+        
+        <div id="playerLife" class="position-absolute players-life p-1 border border-3 rounded "></div>
+        <div id="enemyLife" class="position-absolute players-life p-1 border border-3 rounded "></div>
+        
+        <img id="player" class="players position-absolute " src="./assets/ninjas-imgs/1/1.gif">
+        <img id="enemy" class="players position-absolute " src="./assets/ninjas-imgs/2/1.gif">
+
+
+    </div>
+
+
+    <script defer src="script.js"> -->
+
+
+    <!-- </script> -->
+</body>
+</html>
diff --git a/Games/Belt_Black/script.js b/Games/Belt_Black/script.js
@@ -0,0 +1,221 @@
+const CLIENT_WIDTH = document.documentElement.clientWidth;
+const CLIENT_HEIGHT = document.documentElement.clientHeight;
+
+// const fight = new Audio('./assets/sound/fight.mp3');
+// fight.play();
+
+
+const enemy = document.getElementById('enemy');
+const player = document.getElementById('player');
+const popup = document.getElementById('popup');
+const popupStatus = document.getElementById('popup-status');
+const specialMove = 30;
+let playerLife = document.querySelector('#playerLife');
+let enemyLife = document.querySelector('#enemyLife');
+
+// const audio = new Audio('./assets/sound/fight.mp3');
+// audio.play();
+
+let isGameOver = false;
+
+let playerLifeVal = 100;
+let enemyLifeVal = 100;
+
+let currPos = 0;
+let i = 0;
+
+const gameOverOverlay = (playerNo)=> {
+    if(playerNo) {
+        popupStatus.innerText = 'You Win';
+    } else{
+        popupStatus.innerText = 'You Lost';
+
+    }
+    popup.classList.remove('d-none')
+}
+
+const enemyMoves = [
+    { img: 1, width: 300, height: 500, mirror: true},
+    { img: 2, width: 550, height: 600, mirror: false},
+    { img: 3, width: 600, height: 600, mirror: false},
+    { img: 4, width: 500, height: 600, mirror: false},
+];
+const playerMoves = [
+    { img: 1, width: 300, height: 500, mirror: false},
+    { img: 2, width: 300, height: 500, mirror: false},
+    { img: 3, width: 300, height: 500, mirror: false},
+    { img: 4, width: 300, height: 600, mirror: false},
+    { img: 5, width: 800, height: 600, mirror: false},
+    { img: 6, width: 500, height: 600, mirror: false},
+];
+
+const changeEnemyMove = (move)=> {
+    if(!enemyMoves[move%enemyMoves.length].mirror) {
+        enemy.style.webkitTransform = 'scaleX(0)';
+        enemy.style.transform = 'scaleX(1)';
+        // console.log(enemy.style.transform)
+    } else {
+        enemy.style.webkitTransform = 'scaleX(-1)';
+        enemy.style.transform = 'scaleX(-1)';
+    }
+    enemy.src = `./assets/ninjas-imgs/2/${enemyMoves[move%enemyMoves.length].img}.gif`;
+    enemy.style.width = `${enemyMoves[move%enemyMoves.length].width}px`;
+    enemy.style.height = `${enemyMoves[move%enemyMoves.length].height}px`;
+}
+
+const chengePlayerImg = (img)=> {
+    // console.log(img)
+    player.src = `./assets/ninjas-imgs/1/${playerMoves[img%playerMoves.length].img}.gif`;
+    player.style.width = `${playerMoves[img%playerMoves.length].width}px`;
+    player.style.height = `${playerMoves[img%playerMoves.length].height}px`;
+}
+
+const changeEnemyScore = (val)=> {
+
+    if ((currPos >= CLIENT_WIDTH-500 || currPos < CLIENT_WIDTH-800) && val < specialMove) {
+        // console.log(player.style.left)
+        return;
+    }
+
+    enemyLifeVal = (+enemyLifeVal - val > 0)? (+enemyLifeVal - val): 0;
+
+    // console.log(enemyLifeVal)
+    if(+enemyLifeVal == 0) {
+        enemyLife.style.setProperty('--width', '0%');
+        isGameOver = true;
+        gameOverOverlay(1);
+    } else {
+        enemyLife.style.setProperty('--width', `${enemyLifeVal}%`);
+    }
+}
+const changePlayerScore = (val)=> {
+
+    if ((currPos >= CLIENT_WIDTH-500 || currPos < CLIENT_WIDTH-800) && val < specialMove) {
+        console.log(player.style.left)
+        return;
+    }
+
+    playerLifeVal = (+playerLifeVal - val > 0)? (+playerLifeVal - val): 0;
+
+    console.log(playerLifeVal)
+    if(+playerLifeVal == 0) {
+        playerLife.style.setProperty('--width', '0%');
+        isGameOver = true;
+        gameOverOverlay(0);
+    } else {
+        playerLife.style.setProperty('--width', `${playerLifeVal}%`);
+    }
+}
+
+const getPlayerMove=()=> {
+    let x = Math.floor(Math.random()*100);
+    return (x%2)? 1: 5;
+}
+const getEnemyMove=()=> {
+    let x = Math.floor(Math.random()*100);
+    return (x%2)? 3: 2;
+}
+
+const changePlayerMove = (key)=> {
+    console.log(key)
+    if(key == 'ArrowRight' || key == 'keyD') {
+        player.style.webkitTransform = 'scaleX(1)';
+        player.style.transform = 'scaleX(1)';
+        currPos += 50;
+    } else if(key == 'ArrowLeft' || key == 'keyA') {
+        player.style.webkitTransform = 'scaleX(-1)';
+        player.style.transform = 'scaleX(-1)';
+        currPos -= 50;
+    } else if(key == 'Space') {
+        chengePlayerImg(3);
+        setTimeout(()=> {
+            chengePlayerImg(4);
+        }, 500);
+        setTimeout(()=> {
+            chengePlayerImg(2);
+            changeEnemyScore(specialMove);
+        }, 1500);
+
+    } else if(key == 'Enter') {
+        // chengePlayerImg(Math.floor(Math.random()*100));
+        chengePlayerImg(getPlayerMove());
+        setTimeout(()=> {
+            chengePlayerImg(2);
+            changeEnemyScore(10);
+        }, 1500);
+    }
+
+
+    if(currPos < CLIENT_WIDTH-500 && currPos >= 0) {
+        player.style.left = `${currPos}px`;
+    } else if(currPos < 0){
+        currPos = 0;
+    }  else if(currPos > CLIENT_WIDTH-500){
+        currPos = CLIENT_WIDTH-500;
+    }
+    // enemy.src = `./assets/ninjas-imgs/2/${enemyMoves[move%enemyMoves.length].img}.gif`;
+    // enemy.style.width = `${enemyMoves[move%enemyMoves.length].width}px`;
+    // enemy.style.height = `${enemyMoves[move%enemyMoves.length].height}px`;
+}
+
+setInterval(()=> {
+    // changeEnemyMove(i++);
+}, 2000);
+
+setTimeout(()=> {
+    chengePlayerImg(2);
+}, 1500);
+
+let enemyRestTime = 0;
+
+const autoEnemyMoves = ()=>{
+
+    if(enemyLifeVal == 0) {
+        changeEnemyMove(1);
+        return;
+    }
+
+    if ((currPos < CLIENT_WIDTH-450 && currPos >= CLIENT_WIDTH-800)) {
+
+        // console.log("Attack");
+        if(enemyRestTime%100 == 0) {
+            changeEnemyMove(getEnemyMove());
+            changePlayerScore(20);
+            enemyRestTime++;
+        }
+        enemyRestTime++;
+    } else {
+        // console.log("No Attk");
+        if(enemy.src != `${currPath}assets/ninjas-imgs/2/1.gif`) {
+            // changeEnemyMove(3);
+            changeEnemyMove(0);
+            enemyRestTime++;
+        }
+    }
+
+    requestAnimationFrame(autoEnemyMoves);
+};
+
+requestAnimationFrame(autoEnemyMoves);
+
+const scripts = document.getElementsByTagName("script"),
+src = scripts[0].src;
+const currPath = src.slice(0, 22);
+console.log(currPath)
+
+const body = document.getElementById('body');
+
+body.addEventListener('keydown', (e)=> {
+    if(!isGameOver) {
+        changePlayerMove(e.code);
+    }
+})
+
+// body.addEventListener('DOMContentLoaded', (e)=> {
+//     console.log("fdg")
+// })
+// const startFight = async()=> {
+//     
+
+// }
+// startFight();