Merge pull request kunjgit#4200 from Harshitmishra001/main

Quick Click
Tushar-Vij · Jun 9, 2024 · ff8f0fc · ff8f0fc
2 parents 039b6b8 + 01e5efe
commit ff8f0fc
Show file tree

Hide file tree

Showing 8 changed files with 184 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/README.md b/Games/Quick_Click/README.md
@@ -0,0 +1,39 @@
+Quick Click Game using HTML, CSS, and JavaScript. The game features a grid of square , with one square  becoming active randomly to show a Different Colour. The player must click the active square to score points. The game will end if the player clicks a non-active Square or when the timer reaches zero.
+
+Features
+
+    Play memory game with short musical notes.
+    Difficulty levels to adjust the number of musical pairs.
+    Track your score and high score.
+    Clean and responsive design for any device.
+How to Play
+
+    Clicking the start button initializes the game with a score of 0 and a timer set to 60 seconds.
+    A Yellow Square appears randomly in one of the squares every second.
+
+    Scoring:
+
+    Clicking the active square (with the Yellow Square) increments the score by 1.
+    The Yellow Square disappears and reappears in another random square.
+
+    Game End Conditions:
+
+    Clicking a non-active square ends the game with a "You Lose!" message.
+    The timer reaching zero ends the game with a "Time's Up! Game Over!" message displaying the final score.
+
+    Resetting:
+
+    At the end of the game, the active Yellow Square disappears, event listeners are removed, and the start button is re-enabled.
+
+Technologies Used
+
+    HTML: Creates the structure of the game board and interface.
+    CSS: Styles the game elements for a visually appealing experience.
+    JavaScript: Manages the game logic, including card flipping, matching sounds, and scorekeeping.
+Running the Game
+
+    Ensure you have a web browser installed on your computer (e.g., Chrome, Firefox, Safari).
+    Clone or download the project files.
+    Open the index.html file in your web browser.
+    The game should launch and be ready to play!
+
diff --git a/Games/Quick_Click/assets/Images/image.png b/Games/Quick_Click/assets/Images/image.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/README.md b/README.md
@@ -229,6 +229,7 @@ This repository also provides one such platforms where contributers come over an
 | [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game)                     | [Astronaut_runner](https://github.com/tanishkaa08/GameZone/tree/main/Games/Astronaunt_runner) |
 | [16_Puzzle](https://github.com/kunjgit/GameZone/tree/main/Games/16_Puzzle)                     |
 | [Musical_Memory](https://github.com/kunjgit/GameZone/tree/main/Games/Musical_Memory)           |
+|[Quick_Click](https://github.com/kunjgit/GameZone/tree/main/Games/Quick_Click)                  |
 | [Dragon_Tower](https://github.com/kunjgit/GameZone/tree/main/Games/Dragon_Tower)               |
 | [Hover_Board_Effect](https://github.com/kunjgit/GameZone/tree/main/Games/Hover_Board_Effect)   |
 [Mancala_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Mancala_Game)                                                  |

diff --git a/assets/images/Quick Click.png b/assets/images/Quick Click.png