diff --git a/117-CatchTheBall/README.md b/117-CatchTheBall/README.md new file mode 100644 index 00000000..ae11fed0 --- /dev/null +++ b/117-CatchTheBall/README.md @@ -0,0 +1,24 @@ +# **CatchTheBall** +
+ +## **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. \ No newline at end of file diff --git a/117-CatchTheBall/index.html b/117-CatchTheBall/index.html new file mode 100644 index 00000000..a66b65b4 --- /dev/null +++ b/117-CatchTheBall/index.html @@ -0,0 +1,208 @@ + + + + + + Catch the Ball Game + + + +
+
Catch the Ball
+ + +
+ + + 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; +} diff --git a/14 - Visit Counter/script.js b/14 - Visit Counter/script.js index fc746fe2..c0e5b913 100644 --- a/14 - Visit Counter/script.js +++ b/14 - Visit Counter/script.js @@ -1,27 +1,27 @@ const countEl = document.getElementById('count'); -updateVisitCount(); +document.addEventListener('DOMContentLoaded', function () { + updateVisitCount(); +}); function updateVisitCount() { - fetch('https://api.countapi.xyz/hit/swapnilsparsh/?amount=1') - .then(res => res.json()) - .then(res => { - countEl.innerHTML = res.value; - animateValue(countEl, 0,res.value, 1000); - } - - ) + fetch('https://visitor-counter-api.netlify.app/.netlify/functions/counter/') + .then(res => res.json()) + .then(res => { + countEl.innerHTML = res.value; + animateValue(countEl, 0, res.value, 1000); + }) } function animateValue(obj, start, end, duration) { let startTimestamp = null; const step = (timestamp) => { - if (!startTimestamp) startTimestamp = timestamp; - const progress = Math.min((timestamp - startTimestamp) / duration, 1); - obj.innerHTML = Math.floor(progress * (end - start) + start); - if (progress < 1) { - window.requestAnimationFrame(step); - } + if (!startTimestamp) startTimestamp = timestamp; + const progress = Math.min((timestamp - startTimestamp) / duration, 1); + obj.innerHTML = Math.floor(progress * (end - start) + start); + if (progress < 1) { + window.requestAnimationFrame(step); + } }; window.requestAnimationFrame(step); - } \ No newline at end of file +} \ No newline at end of file diff --git a/30DaysOfJavaScript/assets/catch-the-ball.png b/30DaysOfJavaScript/assets/catch-the-ball.png new file mode 100644 index 00000000..dd3487ac Binary files /dev/null and b/30DaysOfJavaScript/assets/catch-the-ball.png differ diff --git a/index.html b/index.html index e1e6cdc4..d7bd00fd 100644 --- a/index.html +++ b/index.html @@ -1883,6 +1883,21 @@

2048 Game

+
+
+ Project Image +
+
+

Catch The Ball

+

Catch the ball on the rolling pad and beat your own highscore!

+ + +
+
+
+
+ Taash Game +
Flappy Bird Game @@ -1909,6 +1924,7 @@

Taash Game

Play a classic game of Taash (cards) against the computer.

+