swapnilsparsh · swapnilsparsh · Jun 21, 2024 · Jun 4, 2024 · Jun 7, 2024 · Jun 11, 2024
diff --git a/117-CatchTheBall/README.md b/117-CatchTheBall/README.md
@@ -0,0 +1,24 @@
+# **CatchTheBall** 
+<br>
+
+## **Description 📃**
+Catch the Ball is an engaging and addictive arcade game that challenges players to catch a bouncing ball with a paddle.
+
+## **features 🎮**
+1)Intuitive Gameplay:
+Simple controls: Move the paddle left or right to catch the ball.
+Easy to understand, making it accessible for players of all skill levels.
+
+2)Responsive Design:
+Mobile-friendly: Optimized for touch controls on smartphones and tablets.
+Resizable canvas: Automatically adjusts to different screen sizes, providing a consistent gaming experience on any device.
+
+3)Endless Challenge:
+Increasing difficulty: The ball's speed increases over time, testing players' reflexes and coordination.
+Score tracking: Players can see their score in real-time and aim to beat their high score.
+
+## **How to play? 🕹️**
+2. Use the left (`←`) and right (`→`) arrow keys to move the paddle.
+3. Try to catch the falling ball with the paddle.
+4. If you catch the ball, a new ball will fall from top from a new random position.
+5. If you miss the ball, the game will restart.
diff --git a/117-CatchTheBall/index.html b/117-CatchTheBall/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch the Ball</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="game-container">
+        <h1 class="game-title">Catch the Ball</h1>
+        <canvas id="gameCanvas"></canvas>
+        <div class="controls">
+            <button id="leftBtn">Left</button>
+            <button id="rightBtn">Right</button>
+            <button id="playAgainBtn" style="display: none;">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/117-CatchTheBall/script.js 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
@@ -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;
+}
diff --git a/30DaysOfJavaScript/assets/catch-the-ball.png b/30DaysOfJavaScript/assets/catch-the-ball.png
diff --git a/index.html b/index.html
@@ -1382,6 +1382,19 @@ <h4>Maze Game</h4>
       <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/112%20-%20Maze%20Game"><button class="button">Github</button></a>
   </div>
 
+
+<div class="maincard">
+  <div class="card1">
+      <img src="30DaysOfJavaScript\assets\catch-the-ball.png alt="Project Image">
+  </div>
+  <div class="card">
+      <h4>CatchTheBall</h4>
+      <p>Catch the ball on the rolling pad and beat your own highscore!</p>
+      <a href="117 - CatchTheBall"><button class="button">Live</button></a>
+      <a href="http://127.0.0.1:5500/117-CatchTheBall/index.html"><button class="button">Github</button></a>
+  </div>
+</div>
+
 
     <!-- ... other cards ... -->
   </div>