Quick_Click Game Added

nikki-05 · Jun 2, 2024 · a753892 · a753892
1 parent 8e31ead
commit a753892
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 0 deletions.
diff --git a/.gitignore 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
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quick Click</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Quick Click</h1>
+    <div class="scoreboard">
+        <span>Score: <span id="score">0</span></span>
+        <span>Time: <span id="time">60</span>s</span>
+    </div>
+    <div class="grid">
+        <div class="circle" id="circle0"></div>
+        <div class="circle" id="circle1"></div>
+        <div class="circle" id="circle2"></div>
+        <div class="circle" id="circle3"></div>
+        <div class="circle" id="circle4"></div>
+        <div class="circle" id="circle5"></div>
+        <div class="circle" id="circle6"></div>
+        <div class="circle" id="circle7"></div>
+        <div class="circle" id="circle8"></div>
+    </div>
+    <button id="start">Start Game</button>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Quick_Click/script.js 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);
diff --git a/Games/Quick_Click/style.css 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;
+}
diff --git a/assets/images/Pixel_Painter.png b/assets/images/Pixel_Painter.png