diff --git a/README.md b/README.md index 18b30f44..10ec2bf3 100644 --- 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]() | | 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 new file mode 100644 index 00000000..0ba2229a --- /dev/null +++ b/SinglePlayer - Games/Ball_Shooting_Game/index.html @@ -0,0 +1,16 @@ + + + + + + Ball Shooting Game + + + +
+ +
Score: 0
+
+ + + diff --git a/SinglePlayer - Games/Ball_Shooting_Game/script.js b/SinglePlayer - Games/Ball_Shooting_Game/script.js new file mode 100644 index 00000000..239e6f23 --- /dev/null +++ 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 new file mode 100644 index 00000000..97ac0122 --- /dev/null +++ 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 new file mode 100644 index 00000000..358944c0 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Ball_Shooting_Game.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png new file mode 100644 index 00000000..e66aee40 Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png new file mode 100644 index 00000000..491ee83c Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png new file mode 100644 index 00000000..18ca4803 Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/index.html b/SinglePlayer - Games/Flappy_Bird_Game/index.html new file mode 100644 index 00000000..ba4d0812 --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/index.html @@ -0,0 +1,24 @@ + + + + + + + + Flappy Bird Game + + + + +
+ bird-img +
+ Enter To Start Game

↑ ArrowUp to Control

+
+
+ + +
+ + + \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/script.js b/SinglePlayer - Games/Flappy_Bird_Game/script.js new file mode 100644 index 00000000..a70fdcc2 --- /dev/null +++ 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') + '
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); +} \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/style.css b/SinglePlayer - Games/Flappy_Bird_Game/style.css new file mode 100644 index 00000000..c3d260ba --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/additionalpage/game.html b/additionalpage/game.html index a7390e44..921e5de7 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -7284,6 +7284,60 @@

Cubula_Game

+ +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

Ball_Shooting_Game

+

Ball_Shooting_Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + @@ -9013,7 +9067,58 @@

Castle_Escape_Game

+ + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Flappy Bird Game

+

Flappy Bird is an endless game that involves a bird that the player can control. The player has to save the bird from colliding with the hurdles like pipes. Each time the bird passes through the pipes, the score gets incremented by one...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

21.05.2024

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ diff --git a/assets/images/flappy.png b/assets/images/flappy.png new file mode 100644 index 00000000..0b38128c Binary files /dev/null and b/assets/images/flappy.png differ