Skip to content

Commit c33aa9c

Browse files
shruti110503shruti110503
committed
Update index.html
1 parent 511ed5b commit c33aa9c

File tree

1 file changed

+196
-10
lines changed

1 file changed

+196
-10
lines changed

‎117-CatchTheBall/index.html

Lines changed: 196 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,206 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Catch the Ball</title>
7-
<link rel="stylesheet" href="style.css">
8-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
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>
957
</head>
1058
<body>
1159
<div class="game-container">
12-
<h1 class="game-title">Catch the Ball</h1>
60+
<div class="game-title">Catch the Ball</div>
1361
<canvas id="gameCanvas"></canvas>
14-
<div class="controls">
15-
<button id="leftBtn">Left</button>
16-
<button id="rightBtn">Right</button>
17-
<button id="playAgainBtn" style="display: none;">Play Again</button>
18-
</div>
62+
<button id="playAgainBtn">Play Again</button>
1963
</div>
20-
<script src="script.js"></script>
64+
<script>
65+
const canvas = document.getElementById('gameCanvas');
66+
const ctx = canvas.getContext('2d');
67+
canvas.width = window.innerWidth * 0.8;
68+
canvas.height = window.innerHeight * 0.6;
69+
70+
const paddleWidth = 100;
71+
const paddleHeight = 10;
72+
const ballRadius = 10;
73+
74+
let paddleX = (canvas.width - paddleWidth) / 2;
75+
let rightPressed = false;
76+
let leftPressed = false;
77+
78+
let ballX = canvas.width / 2;
79+
let ballY = ballRadius;
80+
let ballDX = 2;
81+
let ballDY = 2;
82+
let score = 0;
83+
84+
document.addEventListener('keydown', keyDownHandler);
85+
document.addEventListener('keyup', keyUpHandler);
86+
canvas.addEventListener('mousemove', mouseMoveHandler);
87+
document.getElementById('playAgainBtn').addEventListener('click', resetGame);
88+
89+
window.addEventListener('resize', () => {
90+
canvas.width = window.innerWidth * 0.8;
91+
canvas.height = window.innerHeight * 0.6;
92+
paddleX = (canvas.width - paddleWidth) / 2;
93+
ballX = canvas.width / 2;
94+
ballY = ballRadius;
95+
});
96+
97+
canvas.addEventListener('touchstart', (e) => {
98+
const touchX = e.touches[0].clientX - canvas.offsetLeft;
99+
if (touchX > paddleX + paddleWidth / 2) {
100+
rightPressed = true;
101+
} else {
102+
leftPressed = true;
103+
}
104+
});
105+
106+
canvas.addEventListener('touchend', () => {
107+
rightPressed = false;
108+
leftPressed = false;
109+
});
110+
111+
function keyDownHandler(e) {
112+
if (e.key === 'Right' || e.key === 'ArrowRight') {
113+
rightPressed = true;
114+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
115+
leftPressed = true;
116+
}
117+
}
118+
119+
function keyUpHandler(e) {
120+
if (e.key === 'Right' || e.key === 'ArrowRight') {
121+
rightPressed = false;
122+
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
123+
leftPressed = false;
124+
}
125+
}
126+
127+
function mouseMoveHandler(e) {
128+
const relativeX = e.clientX - canvas.offsetLeft;
129+
if (relativeX > 0 && relativeX < canvas.width) {
130+
paddleX = relativeX - paddleWidth / 2;
131+
}
132+
}
133+
134+
function drawPaddle() {
135+
ctx.beginPath();
136+
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
137+
ctx.fillStyle = '#0095DD';
138+
ctx.fill();
139+
ctx.closePath();
140+
}
141+
142+
function drawBall() {
143+
ctx.beginPath();
144+
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
145+
ctx.fillStyle = '#0095DD';
146+
ctx.fill();
147+
ctx.closePath();
148+
}
149+
150+
function drawScore() {
151+
ctx.font = '16px Arial';
152+
ctx.fillStyle = '#0095DD';
153+
ctx.fillText('Score: ' + score, 8, 20);
154+
}
155+
156+
function draw() {
157+
ctx.clearRect(0, 0, canvas.width, canvas.height);
158+
drawPaddle();
159+
drawBall();
160+
drawScore();
161+
162+
if (rightPressed && paddleX < canvas.width - paddleWidth) {
163+
paddleX += 7;
164+
} else if (leftPressed && paddleX > 0) {
165+
paddleX -= 7;
166+
}
167+
168+
ballX += ballDX;
169+
ballY += ballDY;
170+
171+
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
172+
ballDX = -ballDX;
173+
}
174+
175+
if (ballY + ballDY < ballRadius) {
176+
ballDY = -ballDY;
177+
} else if (ballY + ballDY > canvas.height - ballRadius) {
178+
if (ballX > paddleX && ballX < paddleX + paddleWidth) {
179+
ballDY = -ballDY;
180+
score++;
181+
} else {
182+
endGame();
183+
return;
184+
}
185+
}
186+
187+
requestAnimationFrame(draw);
188+
}
189+
190+
function endGame() {
191+
alert('Game Over! Your score is: ' + score);
192+
document.getElementById('playAgainBtn').style.display = 'inline-block';
193+
}
194+
195+
function resetGame() {
196+
score = 0;
197+
ballX = canvas.width / 2;
198+
ballY = ballRadius;
199+
ballDX = 2;
200+
ballDY = 2;
201+
document.getElementById('playAgainBtn').style.display = 'none';
202+
draw();
203+
}
204+
205+
draw();
206+
</script>
21207
</body>
22208
</html>

0 commit comments

Comments
 (0)