Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ball_Shooting_Game #959

Merged
merged 3 commits into from
Jun 7, 2024
Merged

Ball_Shooting_Game #959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd380db
Ball_Shooting_Game is added
pallasivasai May 17, 2024
bc73e03
Merge branch 'main' into ballshoot2
pallasivasai May 22, 2024
da1c98c
Merge branch 'main' into ballshoot2
pallasivasai May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,12 +243,15 @@ ________________________________________________________________________________
| 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) |





Expand Down
16 changes: 16 additions & 0 deletions SinglePlayer - Games/Ball_Shooting_Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
101 changes: 101 additions & 0 deletions SinglePlayer - Games/Ball_Shooting_Game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
28 changes: 28 additions & 0 deletions SinglePlayer - Games/Ball_Shooting_Game/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added SinglePlayer - Games/Banner - image/Ball_Shooting_Game.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions additionalpage/game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7284,6 +7284,60 @@ <h4 class = "text-white uppercase game-card-title">Cubula_Game</h4>



<!--Card start-->
<div class = "game-card">
<div class = "game-card-top img-fit-cover">
<video src="https://drive.google.com/file/d/1vLrVFp5nSqU21hGdf7Rwf5dSYXTfDCwr/view?usp=sharing" link " type="video/mp4" muted loop class="clip" ></video>
<img src = "../SinglePlayer - Games/Banner - images/Ball_Shooting_Game.png" alt = "">
<div class = "ratings-count">
45
<img src = "../SinglePlayer - Games/Banner - images/Ball_Shooting_Game.png" alt = "" class = "ms-2">
</div>
</div>
<div class = "game-card-bottom">
<div class="share-icon text-2xl" onclick="copyLink(this)">
<i class="fas fa-share-alt"></i>
<input type="hidden"
value="https://gamesphere-multiplayer.github.io/GameSphere/SinglePlayer%20-%20Games/Ball_Shooting_Game/index.html" />
<!--If there are spaces in your naming of folder, put %20 in between, ex:
link%20to%20the%html%file%20for%your&game-->

<!--The share link will be active only when it is deployed over website-->
</div>

<div class = "flex flex-col sm:flex-row justify-between items-start flex-wrap">
<div class = "py-1">
<h4 class = "text-white uppercase game-card-title">Ball_Shooting_Game</h4>
<p class = "para-text">Ball_Shooting_Game</p>
</div>
<div class = "star-rating mt-2 sm:mt-0 py-1">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green-half.svg">
</div>
</div>
<div class = "block-wrap flex justify-between items-end">
<div class = "details-group">
<div class = "flex items-center">
<p class = "font-semibold">Release Date: &nbsp;</p>
<p>20.06.2023</p>
</div>
<div class = "flex items-center">
<p class = "font-semibold">Updated: &nbsp;</p>
<p>Action | Desktop</p>
</div>
</div>
<div class = "flex flex-col items-end justify-between">
<a target="_blank" href = "../SinglePlayer - Games/Ball_Shooting_Game/index.html" class = "btn-primary uppercase">Play Now</a>
</div>
</div>
</div>
</div>
<!--Card end-->




<!--Card start-->
Expand Down