Merge branch 'main' into basketball

ChromeGaming · Jun 8, 2024 · 1d00269 · 1d00269
2 parents 444cd72 + 9eac393
commit 1d00269
Show file tree

Hide file tree

Showing 13 changed files with 630 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -244,7 +244,6 @@ ________________________________________________________________________________
 |  186   | [Quick Type](.SinglePlayer%20-%20Games/QuickType) |
 |  187   | [SIMON_GAME](.SinglePlayer%20-%20Games/SIMON_GAME) |
 |  188   | [Cubula_Game](.SinglePlayer%20-%20Games/Cubula_Game) |
-
 |  189   | [Ball_Shooting_Game](.SinglePlayer%20-%20Games/Ball_Shooting_Game) |
 |  190   | [Baseball_Game](.SinglePlayer%20-%20Games/Baseball_Game) |
 |  189   | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) |

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);
+}
diff --git a/SinglePlayer - Games/Flappy_Bird_Game/style.css b/SinglePlayer - Games/Flappy_Bird_Game/style.css
@@ -0,0 +1,87 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: Arial, Helvetica, sans-serif;
+}
+body{
+    height: 700px;
+    width: 700px
+}
+.background {
+	height: 100vh;
+	width: 100vw;
+	background: url('images/background-img.png') no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+.bird {
+	height: 100px;
+	width: 130px;
+	position: fixed;
+	top: 40vh;
+	left: 30vw;
+	z-index: 100;
+}
+.pipe_sprite {
+	position: fixed;
+	top: 40vh;
+	left: 100vw;
+	height: 70vh;
+	width: 6vw;
+	background:radial-gradient(rgb(177, 140, 5) 50%, rgb(210, 165, 4));
+	border: 3px solid black;
+}
+.message {
+	position: absolute;
+	z-index: 10;
+	color: black;
+	top: 50%;
+	left: 50%;
+	font-size: 5em;
+	transform: translate(-50%, -50%);
+	text-align: center;
+}
+.messageStyle{
+	background: white;
+	padding: 30px;
+	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+	border-radius: 4.5%;
+}
+.score {
+	position: fixed;
+	z-index: 10;
+	height: 10vh;
+	font-size: 10vh;
+	font-weight: 100;
+	color: white;
+	-webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: black;
+	top: 0;
+	left: 0;
+	margin: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+}
+.score_val {
+	color: gold;
+	font-weight: bold;
+}
+@media only screen and (max-width: 1080px) {
+    .message{
+		font-size: 50px;
+		top: 50%;
+		white-space: nowrap;
+	}
+	.score{
+		font-size: 8vh;
+	}
+	.bird{
+		width: 120px;
+		height: 90px;
+	}
+	.pipe_sprite{
+		width: 14vw;
+	}
+}
diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md b/SinglePlayer - Games/Touch-No-Fire-Game/Readme.md
@@ -0,0 +1,33 @@
+# **Touch-No-Fire-Game** 
+Enjoy The Game!!!
+<br>
+
+## **Description 📃**
+- This is a Normal crossword game that we can play in virtually and blow I have print some tips for the beginners as well!
+- The project will contain HTML, CSS and JavaScript files. The HTML file adds structure to the game followed by styling using CSS. JavaScript adds functionality to the game.
+
+## **How to play? 🕹️**
+- Controls :
+    - Game Rules!
+    - Eat the food to gain score
+    - Do not touch the fire
+    - The fire multiplies once with even scores
+    - If you stay idle, the fire won't do anything
+    - Do not touch the moving fire
+    - Please play using arrow keys!
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<img src="https://github.com/GameSphere-MultiPlayer/GameSphere/assets/154777864/8835bbe2-13a4-43d5-b986-bb30442f833c">
+
+
+
+<br>
+
+
+## **Working video 📹**
+https://github.com/GameSphere-MultiPlayer/GameSphere/assets/154777864/a88f676a-69c8-4cc9-b6e6-98e5fca1aa59
diff --git a/SinglePlayer - Games/Touch-No-Fire-Game/index.html b/SinglePlayer - Games/Touch-No-Fire-Game/index.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">
+  <title>Move Element</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="head">Touch no Fire</div>
+  <div id="container">
+    <div id="mover">
+      <h3 id="h3">&#128523</h3>
+    </div>
+    <div id="food">&#127828</div>
+    <div class="enemy">&#128293</div>
+  </div>
+  <div> 
+    <p id="paragraph"> <br> <br> 
+      Game Rules!<br>
+      * Eat the food to gain score<br>
+      * Do not touch the fire<br>
+      * The fire multiplies once with even scores<br>
+      * If you stay idle, the fire won't do anything<br>
+      * Do not touch the moving fire<br>
+      * Please play using arrow keys<br>
+    </p>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>