diff --git a/chrome js extension/game.js b/chrome js extension/game.js new file mode 100644 index 0000000..c5ce162 --- /dev/null +++ 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 new file mode 100644 index 0000000..7c64769 --- /dev/null +++ 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": [] +} \ No newline at end of file diff --git a/chrome js extension/popup.html b/chrome js extension/popup.html new file mode 100644 index 0000000..4370c06 --- /dev/null +++ b/chrome js extension/popup.html @@ -0,0 +1,25 @@ + + + + + + + Clicking Game + + + + + +
+

Clicking Game

+

Click the button as many times as you can within 10 seconds!

+ +

Score: 0

+

Time Left: 10

+ +
+ + + + + \ No newline at end of file diff --git a/chrome js extension/style.css b/chrome js extension/style.css new file mode 100644 index 0000000..2fc1297 --- /dev/null +++ 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; +} \ No newline at end of file