Skip to content

Commit 1f06995

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #1660 from shruti110503/CatchTheBall
Added Game CatchTheBall
2 parents f7f2df9 + f9a8f00 commit 1f06995

File tree

6 files changed

+419
-0
lines changed

6 files changed

+419
-0
lines changed

‎117-CatchTheBall/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# **CatchTheBall**
2+
<br>
3+
4+
## **Description 📃**
5+
Catch the Ball is an engaging and addictive arcade game that challenges players to catch a bouncing ball with a paddle.
6+
7+
## **features 🎮**
8+
1)Intuitive Gameplay:
9+
Simple controls: Move the paddle left or right to catch the ball.
10+
Easy to understand, making it accessible for players of all skill levels.
11+
12+
2)Responsive Design:
13+
Mobile-friendly: Optimized for touch controls on smartphones and tablets.
14+
Resizable canvas: Automatically adjusts to different screen sizes, providing a consistent gaming experience on any device.
15+
16+
3)Endless Challenge:
17+
Increasing difficulty: The ball's speed increases over time, testing players' reflexes and coordination.
18+
Score tracking: Players can see their score in real-time and aim to beat their high score.
19+
20+
## **How to play? 🕹️**
21+
2. Use the left (`←`) and right (`→`) arrow keys to move the paddle.
22+
3. Try to catch the falling ball with the paddle.
23+
4. If you catch the ball, a new ball will fall from top from a new random position.
24+
5. If you miss the ball, the game will restart.

‎117-CatchTheBall/index.html

+208
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Catch the Ball Game</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
background-color: #f0f0f0;
15+
font-family: 'Roboto', sans-serif;
16+
}
17+
18+
.game-container {
19+
text-align: center;
20+
}
21+
22+
.game-title {
23+
font-family: 'Roboto', sans-serif;
24+
font-size: 36px;
25+
font-weight: 700;
26+
margin-bottom: 20px;
27+
color: #0095DD;
28+
}
29+
30+
canvas {
31+
background-color: #333;
32+
border: 1px solid #000;
33+
}
34+
35+
.controls {
36+
margin-top: 10px;
37+
}
38+
39+
button {
40+
padding: 10px 20px;
41+
margin: 0 10px;
42+
font-size: 16px;
43+
}
44+
45+
#playAgainBtn {
46+
display: none;
47+
margin-top: 10px;
48+
padding: 10px 20px;
49+
font-size: 16px;
50+
background-color: #0095DD;
51+
color: white;
52+
border: none;
53+
cursor: pointer;
54+
text-align: center;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<div class="game-container">
60+
<div class="game-title">Catch the Ball</div>
61+
<canvas id="gameCanvas"></canvas>
62+
<button id="playAgainBtn">Play Again</button>
63+
</div>
64+
<script>
65+
const canvas = document.getElementById('gameCanvas');
66+
const ctx = canvas.getContext('2d');
67+
let paddleWidth;
68+
let paddleHeight;
69+
let ballRadius;
70+
let paddleX;
71+
let ballX;
72+
let ballY;
73+
let ballDX = 2;
74+
let ballDY = 2;
75+
let score = 0;
76+
let rightPressed = false;
77+
let leftPressed = false;
78+
79+
function resizeCanvas() {
80+
canvas.width = window.innerWidth * 0.8;
81+
canvas.height = window.innerHeight * 0.6;
82+
paddleWidth = canvas.width * 0.1;
83+
paddleHeight = canvas.height * 0.03;
84+
ballRadius = canvas.width * 0.02;
85+
paddleX = (canvas.width - paddleWidth) / 2;
86+
ballX = canvas.width / 2;
87+
ballY = ballRadius;
88+
}
89+
90+
resizeCanvas();
91+
92+
document.addEventListener('keydown', keyDownHandler);
93+
document.addEventListener('keyup', keyUpHandler);
94+
canvas.addEventListener('mousemove', mouseMoveHandler);
95+
window.addEventListener('resize', resizeCanvas);
96+
document.getElementById('playAgainBtn').addEventListener('click', resetGame);
97+
98+
canvas.addEventListener('touchstart', (e) => {
99+
const touchX = e.touches[0].clientX - canvas.offsetLeft;
100+
if (touchX > paddleX + paddleWidth / 2) {
101+
rightPressed = true;
102+
} else {
103+
leftPressed = true;
104+
}
105+
});
106+
107+
canvas.addEventListener('touchend', () => {
108+
rightPressed = false;
109+
leftPressed = false;
110+
});
111+
112+
function keyDownHandler(e) {
113+
if (e.key === 'Right' || e.key === 'ArrowRight') {
114+
rightPressed = true;
115+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
116+
leftPressed = true;
117+
}
118+
}
119+
120+
function keyUpHandler(e) {
121+
if (e.key === 'Right' || e.key === 'ArrowRight') {
122+
rightPressed = false;
123+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
124+
leftPressed = false;
125+
}
126+
}
127+
128+
function mouseMoveHandler(e) {
129+
const relativeX = e.clientX - canvas.offsetLeft;
130+
if (relativeX > 0 && relativeX < canvas.width) {
131+
paddleX = relativeX - paddleWidth / 2;
132+
}
133+
}
134+
135+
function drawPaddle() {
136+
ctx.beginPath();
137+
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
138+
ctx.fillStyle = '#0095DD';
139+
ctx.fill();
140+
ctx.closePath();
141+
}
142+
143+
function drawBall() {
144+
ctx.beginPath();
145+
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
146+
ctx.fillStyle = '#0095DD';
147+
ctx.fill();
148+
ctx.closePath();
149+
}
150+
151+
function drawScore() {
152+
ctx.font = '16px Arial';
153+
ctx.fillStyle = '#0095DD';
154+
ctx.fillText('Score: ' + score, 8, 20);
155+
}
156+
157+
function draw() {
158+
ctx.clearRect(0, 0, canvas.width, canvas.height);
159+
drawPaddle();
160+
drawBall();
161+
drawScore();
162+
163+
if (rightPressed && paddleX < canvas.width - paddleWidth) {
164+
paddleX += 7;
165+
} else if (leftPressed && paddleX > 0) {
166+
paddleX -= 7;
167+
}
168+
169+
ballX += ballDX;
170+
ballY += ballDY;
171+
172+
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
173+
ballDX = -ballDX;
174+
}
175+
176+
if (ballY + ballDY < ballRadius) {
177+
ballDY = -ballDY;
178+
} else if (ballY + ballDY > canvas.height - ballRadius) {
179+
if (ballX > paddleX && ballX < paddleX + paddleWidth) {
180+
ballDY = -ballDY;
181+
score++;
182+
} else {
183+
endGame();
184+
return;
185+
}
186+
}
187+
188+
requestAnimationFrame(draw);
189+
}
190+
191+
function endGame() {
192+
alert('Game Over! Your score is: ' + score);
193+
document.getElementById('playAgainBtn').style.display = 'inline-block';
194+
}
195+
196+
function resetGame() {
197+
score = 0;
198+
ballDX = 2;
199+
ballDY = 2;
200+
resizeCanvas();
201+
document.getElementById('playAgainBtn').style.display = 'none';
202+
draw();
203+
}
204+
205+
draw();
206+
</script>
207+
</body>
208+
</html>

‎117-CatchTheBall/script.js

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
const canvas = document.getElementById('gameCanvas');
2+
const ctx = canvas.getContext('2d');
3+
canvas.width = window.innerWidth * 0.8;
4+
canvas.height = window.innerHeight * 0.6;
5+
6+
const paddleWidth = 100;
7+
const paddleHeight = 10;
8+
const ballRadius = 10;
9+
10+
let paddleX = (canvas.width - paddleWidth) / 2;
11+
let rightPressed = false;
12+
let leftPressed = false;
13+
14+
let ballX = canvas.width / 2;
15+
let ballY = ballRadius;
16+
let ballDX = 2;
17+
let ballDY = 2;
18+
let score = 0;
19+
20+
document.addEventListener('keydown', keyDownHandler);
21+
document.addEventListener('keyup', keyUpHandler);
22+
document.getElementById('leftBtn').addEventListener('click', () => { leftPressed = true; });
23+
document.getElementById('rightBtn').addEventListener('click', () => { rightPressed = true; });
24+
document.getElementById('playAgainBtn').addEventListener('click', resetGame);
25+
26+
window.addEventListener('resize', () => {
27+
canvas.width = window.innerWidth * 0.8;
28+
canvas.height = window.innerHeight * 0.6;
29+
paddleX = (canvas.width - paddleWidth) / 2;
30+
ballX = canvas.width / 2;
31+
ballY = ballRadius;
32+
});
33+
34+
canvas.addEventListener('touchstart', (e) => {
35+
const touchX = e.touches[0].clientX - canvas.offsetLeft;
36+
if (touchX > paddleX + paddleWidth / 2) {
37+
rightPressed = true;
38+
} else {
39+
leftPressed = true;
40+
}
41+
});
42+
43+
canvas.addEventListener('touchend', (e) => {
44+
rightPressed = false;
45+
leftPressed = false;
46+
});
47+
48+
function keyDownHandler(e) {
49+
if (e.key === 'Right' || e.key === 'ArrowRight') {
50+
rightPressed = true;
51+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
52+
leftPressed = true;
53+
}
54+
}
55+
56+
function keyUpHandler(e) {
57+
if (e.key === 'Right' || e.key === 'ArrowRight') {
58+
rightPressed = false;
59+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
60+
leftPressed = false;
61+
}
62+
}
63+
64+
function drawPaddle() {
65+
ctx.beginPath();
66+
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
67+
ctx.fillStyle = '#0095DD';
68+
ctx.fill();
69+
ctx.closePath();
70+
}
71+
72+
function drawBall() {
73+
ctx.beginPath();
74+
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
75+
ctx.fillStyle = '#0095DD';
76+
ctx.fill();
77+
ctx.closePath();
78+
}
79+
80+
function drawScore() {
81+
ctx.font = '16px Arial';
82+
ctx.fillStyle = '#0095DD';
83+
ctx.fillText('Score: ' + score, 8, 20);
84+
}
85+
86+
function draw() {
87+
ctx.clearRect(0, 0, canvas.width, canvas.height);
88+
drawPaddle();
89+
drawBall();
90+
drawScore();
91+
92+
if (rightPressed && paddleX < canvas.width - paddleWidth) {
93+
paddleX += 7;
94+
} else if (leftPressed && paddleX > 0) {
95+
paddleX -= 7;
96+
}
97+
98+
ballX += ballDX;
99+
ballY += ballDY;
100+
101+
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
102+
ballDX = -ballDX;
103+
}
104+
105+
if (ballY + ballDY < ballRadius) {
106+
ballDY = -ballDY;
107+
} else if (ballY + ballDY > canvas.height - ballRadius) {
108+
if (ballX > paddleX && ballX < paddleX + paddleWidth) {
109+
ballDY = -ballDY;
110+
score++;
111+
} else {
112+
endGame();
113+
return;
114+
}
115+
}
116+
117+
requestAnimationFrame(draw);
118+
}
119+
120+
function endGame() {
121+
alert('Game Over! Your score is: ' + score);
122+
document.getElementById('playAgainBtn').style.display = 'inline-block';
123+
}
124+
125+
function resetGame() {
126+
score = 0;
127+
ballX = canvas.width / 2;
128+
ballY = ballRadius;
129+
ballDX = 2;
130+
ballDY = 2;
131+
document.getElementById('playAgainBtn').style.display = 'none';
132+
draw();
133+
}
134+
135+
draw();

0 commit comments

Comments
 (0)