codeforwebdevelopment · Swastik200 · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024
diff --git a/chrome js extension/game.js b/chrome js extension/game.js
@@ -0,0 +1,60 @@
+// Game Variables
+let score = 0;
+let timeLeft = 10;
+let isGameRunning = false;
+let timerInterval;
+
+// DOM Elements
+const clickBtn = document.getElementById('click-btn');
+const scoreDisplay = document.getElementById('score');
+const timerDisplay = document.getElementById('timer');
+const startBtn = document.getElementById('start-btn');
+
+// Disable click button initially
+clickBtn.disabled = true;
+
+// Click Button Event
+clickBtn.addEventListener('click', () => {
+    if (isGameRunning) {
+        score++;
+        scoreDisplay.textContent = `Score: ${score}`;
+    }
+});
+
+// Start Game Button Event
+startBtn.addEventListener('click', startGame);
+
+function startGame() {
+    // Reset score and time
+    score = 0;
+    timeLeft = 10;
+    scoreDisplay.textContent = `Score: ${score}`;
+    timerDisplay.textContent = `Time Left: ${timeLeft}`;
+
+    // Enable the click button
+    clickBtn.disabled = false;
+
+    // Start the game
+    isGameRunning = true;
+    startBtn.disabled = true;
+
+    // Start the timer
+    timerInterval = setInterval(updateTimer, 1000);
+}
+
+function updateTimer() {
+    timeLeft--;
+    timerDisplay.textContent = `Time Left: ${timeLeft}`;
+
+    if (timeLeft <= 0) {
+        endGame();
+    }
+}
+
+function endGame() {
+    isGameRunning = false;
+    clearInterval(timerInterval);
+    clickBtn.disabled = true;
+    startBtn.disabled = false;
+    alert(`Game over! Your final score is: ${score}`);
+}
diff --git a/chrome js extension/manifest.json b/chrome js extension/manifest.json
@@ -0,0 +1,15 @@
+{
+    "manifest_version": 3,
+    "name": "Clicking Game",
+    "version": "1.0",
+    "description": "A simple clicking game Chrome extension.",
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "icon16.png",
+            "48": "icon48.png",
+            "128": "icon128.png"
+        }
+    },
+    "permissions": []
+}
diff --git a/chrome js extension/popup.html b/chrome js extension/popup.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clicking Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="game-container">
+        <h1>Clicking Game</h1>
+        <p>Click the button as many times as you can within 10 seconds!</p>
+        <button id="click-btn">Click Me!</button>
+        <p id="score">Score: 0</p>
+        <p id="timer">Time Left: 10</p>
+        <button id="start-btn">Start Game</button>
+    </div>
+
+    <script src="game.js"></script>
+</body>
+
+</html>
diff --git a/chrome js extension/style.css b/chrome js extension/style.css
@@ -0,0 +1,36 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    padding: 20px;
+}
+
+.game-container {
+    width: 300px;
+    margin: 0 auto;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    margin: 10px 0;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#score,
+#timer {
+    font-size: 18px;
+    margin: 10px 0;
+}