Merge branch 'main' into main

ChromeGaming · Jun 7, 2024 · 3b1a016 · 3b1a016
2 parents ad2f671 + a05754a
commit 3b1a016
Show file tree

Hide file tree

Showing 13 changed files with 487 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -243,10 +243,14 @@ ________________________________________________________________________________
 |  185   | [Math Sprint Game](.SinglePlayer%20-%20Games/Math_Sprint_Game) |
 |  186   | [Quick Type](.SinglePlayer%20-%20Games/QuickType) |
 |  187   | [SIMON_GAME](.SinglePlayer%20-%20Games/SIMON_GAME) |
-|  188  | [Cubula_Game](.SinglePlayer%20-%20Games/Cubula_Game) |
+|  188   | [Cubula_Game](.SinglePlayer%20-%20Games/Cubula_Game) |
 |  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) |
+|  194   | [Ball_Shooting_Game](.SinglePlayer%20-%20Games/Ball_Shooting_Game) |
+
 
 
 

diff --git a/SinglePlayer - Games/Ball_Shooting_Game/index.html b/SinglePlayer - Games/Ball_Shooting_Game/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ball Shooting Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="score">Score: 0</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Ball_Shooting_Game/script.js b/SinglePlayer - Games/Ball_Shooting_Game/script.js
@@ -0,0 +1,101 @@
+// script.js
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const scoreElement = document.getElementById('score');
+canvas.width = 800;
+canvas.height = 600;
+
+let score = 0;
+let balls = [];
+let targets = [];
+const ballRadius = 5;
+const targetRadius = 20;
+const ballSpeed = 5;
+
+// Function to create a new ball
+function createBall(x, y) {
+    balls.push({ x, y, dx: ballSpeed, dy: ballSpeed });
+}
+
+// Function to create targets at random positions
+function createTarget() {
+    const x = Math.random() * (canvas.width - 2 * targetRadius) + targetRadius;
+    const y = Math.random() * (canvas.height - 2 * targetRadius) + targetRadius;
+    targets.push({ x, y });
+}
+
+// Function to update the positions of balls
+function updateBalls() {
+    balls.forEach((ball, index) => {
+        ball.x += ball.dx;
+        ball.y += ball.dy;
+
+        // Check for collisions with walls
+        if (ball.x + ballRadius > canvas.width || ball.x - ballRadius < 0) {
+            ball.dx = -ball.dx;
+        }
+        if (ball.y + ballRadius > canvas.height || ball.y - ballRadius < 0) {
+            ball.dy = -ball.dy;
+        }
+
+        // Check for collisions with targets
+        targets.forEach((target, targetIndex) => {
+            const dist = Math.hypot(ball.x - target.x, ball.y - target.y);
+            if (dist < ballRadius + targetRadius) {
+                targets.splice(targetIndex, 1);
+                balls.splice(index, 1);
+                score += 10;
+                scoreElement.innerText = `Score: ${score}`;
+                createTarget();
+            }
+        });
+    });
+}
+
+// Function to draw the balls
+function drawBalls() {
+    balls.forEach(ball => {
+        ctx.beginPath();
+        ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
+        ctx.fillStyle = '#00f';
+        ctx.fill();
+        ctx.closePath();
+    });
+}
+
+// Function to draw the targets
+function drawTargets() {
+    targets.forEach(target => {
+        ctx.beginPath();
+        ctx.arc(target.x, target.y, targetRadius, 0, Math.PI * 2);
+        ctx.fillStyle = '#f00';
+        ctx.fill();
+        ctx.closePath();
+    });
+}
+
+// Function to draw everything
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBalls();
+    drawTargets();
+}
+
+// Main game loop
+function gameLoop() {
+    updateBalls();
+    draw();
+    requestAnimationFrame(gameLoop);
+}
+
+// Event listener to shoot balls
+canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    createBall(x, y);
+});
+
+// Initialize the game
+createTarget();
+gameLoop();
diff --git a/SinglePlayer - Games/Ball_Shooting_Game/styles.css b/SinglePlayer - Games/Ball_Shooting_Game/styles.css
@@ -0,0 +1,28 @@
+/* styles.css */
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(to right, #ff7e5f, #feb47b);
+    font-family: Arial, sans-serif;
+}
+
+#gameContainer {
+    position: relative;
+}
+
+#gameCanvas {
+    background-color: #fff;
+    border: 2px solid #000;
+}
+
+#score {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 20px;
+    color: #333;
+}
diff --git a/SinglePlayer - Games/Banner - image/Ball_Shooting_Game.png b/SinglePlayer - Games/Banner - image/Ball_Shooting_Game.png
diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png
diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png
diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png
diff --git a/SinglePlayer - Games/Flappy_Bird_Game/index.html b/SinglePlayer - Games/Flappy_Bird_Game/index.html
@@ -0,0 +1,24 @@
+<!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="icon" type="image/png"/>
+    <title>Flappy Bird Game</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <div class="background"></div>
+    <img src="images/Bird-I.png" alt="bird-img" class="bird" id="bird-1">
+    <div class="message">
+        Enter To Start Game <p><span style="color: red;">&uarr;</span> ArrowUp to Control</p>
+    </div>
+    <div class="score">
+        <span class="score_title"></span>
+        <span class="score_val"></span>
+    </div>
+    <script src="script.js" defer></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Flappy_Bird_Game/script.js b/SinglePlayer - Games/Flappy_Bird_Game/script.js
@@ -0,0 +1,121 @@
+let move_speed = 3, grativy = 0.5;
+let bird = document.querySelector('.bird');
+let img = document.getElementById('bird-1');
+let bird_props = bird.getBoundingClientRect();
+let background = document.querySelector('.background').getBoundingClientRect();
+
+let score_val = document.querySelector('.score_val');
+let message = document.querySelector('.message');
+let score_title = document.querySelector('.score_title');
+
+let game_state = 'Start';
+img.style.display = 'none';
+message.classList.add('messageStyle');
+
+document.addEventListener('keydown', (e) => {
+
+    if(e.key == 'Enter' && game_state != 'Play'){
+        document.querySelectorAll('.pipe_sprite').forEach((e) => {
+            e.remove();
+        });
+        img.style.display = 'block';
+        bird.style.top = '100vh';
+        game_state = 'Play';
+        message.innerHTML = '';
+        score_title.innerHTML = 'Score : ';
+        score_val.innerHTML = '0';
+        message.classList.remove('messageStyle');
+        play();
+    }
+});
+
+function play(){
+    function move(){
+        if(game_state != 'Play') return;
+
+        let pipe_sprite = document.querySelectorAll('.pipe_sprite');
+        pipe_sprite.forEach((element) => {
+            let pipe_sprite_props = element.getBoundingClientRect();
+            bird_props = bird.getBoundingClientRect();
+
+            if(pipe_sprite_props.right <= 0){
+                element.remove();
+            }else{
+                if(bird_props.left < pipe_sprite_props.left + pipe_sprite_props.width && bird_props.left + bird_props.width > pipe_sprite_props.left && bird_props.top < pipe_sprite_props.top + pipe_sprite_props.height && bird_props.top + bird_props.height > pipe_sprite_props.top){
+                    game_state = 'End';
+                    message.innerHTML = 'Game Over'.fontcolor('red') + '<br>Press Enter To Restart';
+                    message.classList.add('messageStyle');
+                    img.style.display = 'none';
+                    return;
+                }else{
+                    if(pipe_sprite_props.right < bird_props.left && pipe_sprite_props.right + move_speed >= bird_props.left && element.increase_score == '1'){
+                        score_val.innerHTML =+ score_val.innerHTML + 1;
+                    }
+                    element.style.left = pipe_sprite_props.left - move_speed + 'px';
+                }
+            }
+        });
+        requestAnimationFrame(move);
+    }
+    requestAnimationFrame(move);
+
+    let bird_dy = 0;
+    function apply_gravity(){
+        if(game_state != 'Play') return;
+        bird_dy = bird_dy + grativy;
+        document.addEventListener('keydown', (e) => {
+            if(e.key == 'ArrowUp' || e.key == ' '){
+                img.src = 'images/Bird-II.png';
+                bird_dy = -7.6;
+            }
+        });
+
+        document.addEventListener('keyup', (e) => {
+            if(e.key == 'ArrowUp' || e.key == ' '){
+                img.src = 'images/Bird-I.png';
+            }
+        });
+
+        if(bird_props.top <= 0 || bird_props.bottom >= background.bottom){
+            game_state = 'End';
+            message.style.left = '28vw';
+            window.location.reload();
+            message.classList.remove('messageStyle');
+            return;
+        }
+        bird.style.top = bird_props.top + bird_dy + 'px';
+        bird_props = bird.getBoundingClientRect();
+        requestAnimationFrame(apply_gravity);
+    }
+    requestAnimationFrame(apply_gravity);
+
+    let pipe_seperation = 0;
+
+    let pipe_gap = 40;
+
+    function create_pipe(){
+        if(game_state != 'Play') return;
+
+        if(pipe_seperation > 115){
+            pipe_seperation = 0;
+
+            let pipe_posi = Math.floor(Math.random() * 43) + 8;
+            let pipe_sprite_inv = document.createElement('div');
+            pipe_sprite_inv.className = 'pipe_sprite';
+            pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh';
+            pipe_sprite_inv.style.left = '100vw';
+
+            document.body.appendChild(pipe_sprite_inv);
+            let pipe_sprite = document.createElement('div');
+            pipe_sprite.className = 'pipe_sprite';
+            pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh';
+            pipe_sprite.style.left = '100vw';
+            pipe_sprite.increase_score = '1';
+
+            document.body.appendChild(pipe_sprite);
+        }
+        pipe_seperation++;
+        requestAnimationFrame(create_pipe);
+    }
+    requestAnimationFrame(create_pipe);
+}