diff --git a/Dodge the Ball/manifest.json b/Dodge the Ball/manifest.json new file mode 100644 index 00000000..24e8c293 --- /dev/null +++ b/Dodge the Ball/manifest.json @@ -0,0 +1,11 @@ +{ + "manifest_version": 3, + "name": "Dodge the Ball", + "version": "1.0", + "description": "A game where you dodge the falling balls!", + "action": { + "default_popup": "popup.html" + }, + "permissions": [] + } + \ No newline at end of file diff --git a/Dodge the Ball/popup.css b/Dodge the Ball/popup.css new file mode 100644 index 00000000..5ac27aa3 --- /dev/null +++ b/Dodge the Ball/popup.css @@ -0,0 +1,23 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #282c34; + color: white; + margin: 0; + padding: 0; + } + + #game { + margin: 20px auto; + } + + canvas { + background-color: #000; + border: 2px solid #fff; + } + + #score { + font-size: 20px; + font-weight: bold; + } + \ No newline at end of file diff --git a/Dodge the Ball/popup.html b/Dodge the Ball/popup.html new file mode 100644 index 00000000..42ac94ac --- /dev/null +++ b/Dodge the Ball/popup.html @@ -0,0 +1,17 @@ + + + + + + Dodge the Ball + + + +
+

Dodge the Ball

+ +

Score: 0

+
+ + + diff --git a/Dodge the Ball/popup.js b/Dodge the Ball/popup.js new file mode 100644 index 00000000..3b85cf5f --- /dev/null +++ b/Dodge the Ball/popup.js @@ -0,0 +1,105 @@ +document.addEventListener('DOMContentLoaded', function() { + const canvas = document.getElementById('gameCanvas'); + const ctx = canvas.getContext('2d'); + const scoreDisplay = document.getElementById('score'); + const ballRadius = 10; + let score = 0; + let balls = []; + let player = { + x: canvas.width / 2 - 25, + y: canvas.height - 30, + width: 50, + height: 10, + dx: 0 + }; + + function drawPlayer() { + ctx.fillStyle = 'blue'; + ctx.fillRect(player.x, player.y, player.width, player.height); + } + + function createBall() { + const x = Math.random() * (canvas.width - 2 * ballRadius) + ballRadius; + const y = -ballRadius; + const dy = 2; + return { x, y, dy }; + } + + function drawBall(ball) { + ctx.beginPath(); + ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2); + ctx.fillStyle = 'red'; + ctx.fill(); + ctx.closePath(); + } + + function updateBalls() { + if (Math.random() < 0.02) { + balls.push(createBall()); + } + + balls.forEach((ball, index) => { + ball.y += ball.dy; + + if (ball.y - ballRadius > canvas.height) { + balls.splice(index, 1); + score++; + scoreDisplay.textContent = score; + } + + if ( + ball.x > player.x && + ball.x < player.x + player.width && + ball.y + ballRadius > player.y + ) { + alert('Game Over! Your final score is: ' + score); + document.location.reload(); + } + }); + } + + function drawBalls() { + balls.forEach(ball => drawBall(ball)); + } + + function clearCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + + function updateGame() { + clearCanvas(); + drawPlayer(); + drawBalls(); + updateBalls(); + updatePlayer(); + requestAnimationFrame(updateGame); + } + + function movePlayer(e) { + if (e.key === 'ArrowLeft') { + player.dx = -5; + } else if (e.key === 'ArrowRight') { + player.dx = 5; + } + } + + function stopPlayer() { + player.dx = 0; + } + + function updatePlayer() { + player.x += player.dx; + + if (player.x < 0) { + player.x = 0; + } else if (player.x + player.width > canvas.width) { + player.x = canvas.width - player.width; + } + } + + document.addEventListener('keydown', movePlayer); + document.addEventListener('keyup', stopPlayer); + + updateGame(); + }); + \ No newline at end of file