diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..5c297ee2ea --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +assets/images/Pixel_Painter.png diff --git a/Games/Quick_Click/index.html b/Games/Quick_Click/index.html new file mode 100644 index 0000000000..9c345b7c68 --- /dev/null +++ b/Games/Quick_Click/index.html @@ -0,0 +1,33 @@ + + + + + + + Quick Click + + + + +

Quick Click

+
+ Score: 0 + Time: 60s +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/Games/Quick_Click/script.js b/Games/Quick_Click/script.js new file mode 100644 index 0000000000..03e9b10968 --- /dev/null +++ b/Games/Quick_Click/script.js @@ -0,0 +1,61 @@ +const circles = document.querySelectorAll('.circle'); +const scoreDisplay = document.getElementById('score'); +const timeDisplay = document.getElementById('time'); +const startButton = document.getElementById('start'); +let score = 0; +let activeCircle = null; +let gameTimer = null; +let countdownTimer = null; +let timeLeft = 60; + +function randomCircle() { + circles.forEach(circle => circle.classList.remove('active')); + const randomIndex = Math.floor(Math.random() * circles.length); + activeCircle = circles[randomIndex]; + activeCircle.classList.add('active'); + console.log("Random Circle Selected:", activeCircle); +} + +function startGame() { + score = 0; + timeLeft = 60; + scoreDisplay.textContent = score; + timeDisplay.textContent = timeLeft; + startButton.disabled = true; + randomCircle(); + gameTimer = setInterval(randomCircle, 1000); + countdownTimer = setInterval(countDown, 1000); + circles.forEach(circle => circle.addEventListener('click', whack)); + console.log("Game Started"); +} + +function whack(event) { + if (event.target === activeCircle) { + score++; + scoreDisplay.textContent = score; + activeCircle.classList.remove('active'); + randomCircle(); + } else { + endGame('You Lose!'); + } +} + +function countDown() { + timeLeft--; + timeDisplay.textContent = timeLeft; + if (timeLeft <= 0) { + endGame('Time\'s Up! Game Over!'); + } +} + +function endGame(message) { + console.log("Game Ended:", message); + clearInterval(gameTimer); + clearInterval(countdownTimer); + circles.forEach(circle => circle.classList.remove('active')); + circles.forEach(circle => circle.removeEventListener('click', whack)); + startButton.disabled = false; + alert(`${message} Your final score is ${score}`); +} + +startButton.addEventListener('click', startGame); \ No newline at end of file diff --git a/Games/Quick_Click/style.css b/Games/Quick_Click/style.css new file mode 100644 index 0000000000..5bd09e6d77 --- /dev/null +++ b/Games/Quick_Click/style.css @@ -0,0 +1,48 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f0f0f0; + margin: 0; + padding: 0; +} + +h1 { + margin-top: 20px; +} + +.scoreboard { + margin: 20px 0; + font-size: 1.5em; +} + +.grid { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-gap: 10px; + justify-content: center; + margin: 20px auto; +} + +.circle { + width: 100px; + height: 100px; + background-color: #ccc; + border-radius: 50%; + position: relative; + cursor: pointer; +} + +.circle.active { + background-image: url('GameZone\Games\Reflex_text\Mole2.jpg'); + background-size: cover; + background-position: center; + background-color: #ffd700; + /* Fallback background color */ +} + +button { + margin-top: 20px; + padding: 10px 20px; + font-size: 1em; + cursor: pointer; +} \ No newline at end of file diff --git a/assets/images/Pixel_Painter.png b/assets/images/Pixel_Painter.png index a778aeef8a..5452499cd2 100644 Binary files a/assets/images/Pixel_Painter.png and b/assets/images/Pixel_Painter.png differ