+ 
+
+
+
+
+
+
+
+
diff --git a/117-CatchTheBall/script.js b/117-CatchTheBall/script.js
new file mode 100644
index 00000000..0ed5a936
--- /dev/null
+++ b/117-CatchTheBall/script.js
@@ -0,0 +1,135 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth * 0.8;
+canvas.height = window.innerHeight * 0.6;
+
+const paddleWidth = 100;
+const paddleHeight = 10;
+const ballRadius = 10;
+
+let paddleX = (canvas.width - paddleWidth) / 2;
+let rightPressed = false;
+let leftPressed = false;
+
+let ballX = canvas.width / 2;
+let ballY = ballRadius;
+let ballDX = 2;
+let ballDY = 2;
+let score = 0;
+
+document.addEventListener('keydown', keyDownHandler);
+document.addEventListener('keyup', keyUpHandler);
+document.getElementById('leftBtn').addEventListener('click', () => { leftPressed = true; });
+document.getElementById('rightBtn').addEventListener('click', () => { rightPressed = true; });
+document.getElementById('playAgainBtn').addEventListener('click', resetGame);
+
+window.addEventListener('resize', () => {
+ canvas.width = window.innerWidth * 0.8;
+ canvas.height = window.innerHeight * 0.6;
+ paddleX = (canvas.width - paddleWidth) / 2;
+ ballX = canvas.width / 2;
+ ballY = ballRadius;
+});
+
+canvas.addEventListener('touchstart', (e) => {
+ const touchX = e.touches[0].clientX - canvas.offsetLeft;
+ if (touchX > paddleX + paddleWidth / 2) {
+ rightPressed = true;
+ } else {
+ leftPressed = true;
+ }
+});
+
+canvas.addEventListener('touchend', (e) => {
+ rightPressed = false;
+ leftPressed = false;
+});
+
+function keyDownHandler(e) {
+ if (e.key === 'Right' || e.key === 'ArrowRight') {
+ rightPressed = true;
+ } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+ leftPressed = true;
+ }
+}
+
+function keyUpHandler(e) {
+ if (e.key === 'Right' || e.key === 'ArrowRight') {
+ rightPressed = false;
+ } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+ leftPressed = false;
+ }
+}
+
+function drawPaddle() {
+ ctx.beginPath();
+ ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+ ctx.fillStyle = '#0095DD';
+ ctx.fill();
+ ctx.closePath();
+}
+
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
+ ctx.fillStyle = '#0095DD';
+ ctx.fill();
+ ctx.closePath();
+}
+
+function drawScore() {
+ ctx.font = '16px Arial';
+ ctx.fillStyle = '#0095DD';
+ ctx.fillText('Score: ' + score, 8, 20);
+}
+
+function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ drawPaddle();
+ drawBall();
+ drawScore();
+
+ if (rightPressed && paddleX < canvas.width - paddleWidth) {
+ paddleX += 7;
+ } else if (leftPressed && paddleX > 0) {
+ paddleX -= 7;
+ }
+
+ ballX += ballDX;
+ ballY += ballDY;
+
+ if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
+ ballDX = -ballDX;
+ }
+
+ if (ballY + ballDY < ballRadius) {
+ ballDY = -ballDY;
+ } else if (ballY + ballDY > canvas.height - ballRadius) {
+ if (ballX > paddleX && ballX < paddleX + paddleWidth) {
+ ballDY = -ballDY;
+ score++;
+ } else {
+ endGame();
+ return;
+ }
+ }
+
+ requestAnimationFrame(draw);
+}
+
+function endGame() {
+ alert('Game Over! Your score is: ' + score);
+ document.getElementById('playAgainBtn').style.display = 'inline-block';
+}
+
+function resetGame() {
+ score = 0;
+ ballX = canvas.width / 2;
+ ballY = ballRadius;
+ ballDX = 2;
+ ballDY = 2;
+ document.getElementById('playAgainBtn').style.display = 'none';
+ draw();
+}
+
+draw();
diff --git a/117-CatchTheBall/style.css b/117-CatchTheBall/style.css
new file mode 100644
index 00000000..947a5710
--- /dev/null
+++ b/117-CatchTheBall/style.css
@@ -0,0 +1,36 @@
+body {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f0f0f0;
+ font-family: 'Roboto', sans-serif;
+}
+
+.game-container {
+ text-align: center;
+}
+
+.game-title {
+ font-family: 'Roboto', sans-serif;
+ font-size: 36px;
+ font-weight: 700;
+ margin-bottom: 20px;
+ color: #0095DD;
+}
+
+canvas {
+ background-color: #333;
+ border: 1px solid #000;
+}
+
+.controls {
+ margin-top: 10px;
+}
+
+button {
+ padding: 10px 20px;
+ margin: 0 10px;
+ font-size: 16px;
+}
From fea918a2b50122fa7156bb20d4862bd8a37cd8e2 Mon Sep 17 00:00:00 2001
From: shruti110503 <118251562+shruti110503@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:45:46 +0530
Subject: [PATCH 02/10] updated the index file
---
.../assets}/catch-the-ball.png | Bin
index.html | 13 +++++++++++++
2 files changed, 13 insertions(+)
rename {117-CatchTheBall => 30DaysOfJavaScript/assets}/catch-the-ball.png (100%)
diff --git a/117-CatchTheBall/catch-the-ball.png b/30DaysOfJavaScript/assets/catch-the-ball.png
similarity index 100%
rename from 117-CatchTheBall/catch-the-ball.png
rename to 30DaysOfJavaScript/assets/catch-the-ball.png
diff --git a/index.html b/index.html
index a00f72b4..88258c21 100644
--- a/index.html
+++ b/index.html
@@ -1382,6 +1382,19 @@ Catch the Ball
+ +
+
+
+
+
+ Maze Game
+ + + From 9ee969fe9e0a9211a98f3367361995b67b851cf0 Mon Sep 17 00:00:00 2001 From: shruti110503 <118251562+shruti110503@users.noreply.github.com> Date: Wed, 12 Jun 2024 00:04:56 +0530 Subject: [PATCH 03/10] Update index.html --- index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 88258c21..4bbbff68 100644 --- a/index.html +++ b/index.html @@ -1382,20 +1382,20 @@Maze Game
- -
-
From 09c6b37e197a95a387f48526ea1aa96d5f135881 Mon Sep 17 00:00:00 2001
From: shruti110503 <118251562+shruti110503@users.noreply.github.com>
Date: Sun, 16 Jun 2024 14:32:10 +0530
Subject: [PATCH 04/10] Update index.html
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 4bbbff68..df6a6ea0 100644
--- a/index.html
+++ b/index.html
@@ -1389,7 +1389,7 @@
-
-
-
+
+
- 
+ Maze Game
From c33aa9cce077552485206679c29a484aa9ca6d4e Mon Sep 17 00:00:00 2001 From: shruti110503 <118251562+shruti110503@users.noreply.github.com> Date: Tue, 18 Jun 2024 16:09:26 +0530 Subject: [PATCH 05/10] Update index.html --- 117-CatchTheBall/index.html | 206 ++++++++++++++++++++++++++++++++++-- 1 file changed, 196 insertions(+), 10 deletions(-) diff --git a/117-CatchTheBall/index.html b/117-CatchTheBall/index.html index e0756fc3..ca8f8d91 100644 --- a/117-CatchTheBall/index.html +++ b/117-CatchTheBall/index.html @@ -3,20 +3,206 @@ -
-
-
+
Catch the Ball
+Catch the Ball
-
-
-
-
-
+