Merge pull request #2181 from 1911aditi/master

added an extension dodge the ball
Sulagna-Dutta-Roy · Jul 6, 2024 · 09390bd · 09390bd
2 parents 8b950bc + ab00bbf
commit 09390bd
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 0 deletions.
diff --git a/Dodge the Ball/manifest.json 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": []
+  }
+
diff --git a/Dodge the Ball/popup.css 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;
+  }
+
diff --git a/Dodge the Ball/popup.html b/Dodge the Ball/popup.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dodge the Ball</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div id="game">
+    <h1>Dodge the Ball</h1>
+    <canvas id="gameCanvas" width="300" height="500"></canvas>
+    <p>Score: <span id="score">0</span></p>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Dodge the Ball/popup.js 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();
+  });
+