Merge pull request #4811 from Shravanikale/main

Added Simon Says game
kunjgit · Jul 16, 2024 · 00321cd · 00321cd
2 parents 0c3fd4f + 95f1ffd
commit 00321cd
Show file tree

Hide file tree

Showing 12 changed files with 634 additions and 0 deletions.
diff --git a/Games/Simon_Says/README.md b/Games/Simon_Says/README.md
@@ -0,0 +1,21 @@
+# Simon-game 🎮 🔴🟢🔵🟡 🔄
+## How to Play
+
+
+1. **Start the Game**: Turn on the game and press the start button to begin.🔄🎮
+2. **Watch and Listen**: The game will light up a button and play a sound.👀🔊
+3. **Repeat the Sequence**: Press the same button. Each round, the game adds another light and sound to the sequence. 🔴🟢🔵🟡
+4. **Continue and Remember**: Keep repeating the growing sequence correctly. The game ends if you make a mistake.🔄🧠✔️❌
+
+
+
+## Play the game here 
+## Tips for Success
+  **Pay Attention** : Focus on the lights and sounds carefully. 👀🔊
+
+   **Practice:** The more you play, the better your memory and reaction time will become. 🎮🧠
+
+  **Patterns:** Look for patterns in the sequences to help you remember them 🔄📝
+
+### Rules of the game can be read by opeing the game webpage and going to the rules section.
+## ALL THE BEST 
diff --git a/Games/Simon_Says/game.png b/Games/Simon_Says/game.png
diff --git a/Games/Simon_Says/index.html b/Games/Simon_Says/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8" />
+        <title>Simon</title>
+        <link rel="stylesheet" href="styles.css" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Press+Start+2P"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+        />
+    </head>
+    <style>
+        #green,
+        #red,
+        #yellow,
+        #blue {
+            cursor: pointer;
+        }
+    </style>
+
+    <body scroll="no">
+        <div class="toggle" id="toggle">
+            <!-- to switch between light and dark mode-->
+            <i class="far fa-sun"></i>
+        </div>
+
+        <div class="modal hidden">
+            <div class="container-rules">
+                <h3 class="rules-heading">Rules:</h3>
+
+                <p class="rules">
+                    Boxes will be blinked randomly by the computer.
+                </p>
+                <p class="rules">
+                    Only a single box will be blinked at one level.
+                </p>
+                <p class="rules">
+                    You have to remember the pattern of blinking of boxes from
+                    the first level to the current level.
+                </p>
+                <p class="rules">
+                    At every level you have to click the boxes in same pattern
+                    in which they blinked since first level.
+                </p>
+                <p class="rules">
+                    On clicking correct pattern you will move to next level.
+                </p>
+                <p class="rules">
+                    If clicked boxes in wrong pattern then game will get over.
+                </p>
+                <div class="btn-container">
+                    <button type="button" class="btn-close">CLOSE</button>
+                </div>
+            </div>
+        </div>
+        <div class="overlay hidden"></div>
+        <div class="flex">
+            <div class="container">
+                <h1 id="level-title">Press any Key to Start</h1>
+                <h2>Highest Score: <em class="highScore">0</em></h2>
+                <div class="row">
+                    <div type="button" id="green" class="btn green"></div>
+
+                    <div type="button" id="red" class="btn red"></div>
+                </div>
+
+                <div class="row">
+                    <div type="button" id="yellow" class="btn yellow"></div>
+                    <div type="button" id="blue" class="btn blue"></div>
+                </div>
+                <a type="button" class="btn-rules">RULES</a>
+            </div>
+        </div>
+
+        <script
+            src="https://code.jquery.com/jquery-3.6.0.js"
+            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
+            crossorigin="anonymous"
+        ></script>
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/Games/Simon_Says/index.js b/Games/Simon_Says/index.js
@@ -0,0 +1,249 @@
+const saveKeyScore = "highscore"; //save key for local storage of highscore
+var patternCreated = [];
+var patternClicked = [];
+var level = 1;
+var highScore;
+var gameOn = false;
+var correctTill = 0;
+var aise = 1;
+
+// selecting 4 buttons
+let greenBtn = document.getElementById("green");
+let redBtn = document.getElementById("red");
+let yellowBtn = document.getElementById("yellow");
+let blueBtn = document.getElementById("blue");
+
+// function to disable all color Btns
+const disableBtns = () => {
+    greenBtn.style.pointerEvents = "none";
+    redBtn.style.pointerEvents = "none";
+    yellowBtn.style.pointerEvents = "none";
+    blueBtn.style.pointerEvents = "none";
+};
+// function to enable all color Btns
+const enableBtns = () => {
+    greenBtn.style.pointerEvents = "all";
+    redBtn.style.pointerEvents = "all";
+    yellowBtn.style.pointerEvents = "all";
+    blueBtn.style.pointerEvents = "all";
+};
+
+if (!gameOn) {
+    enableBtns(); //enable buttons after keypress
+    gameOn = true;
+    $(document).on("keypress", gameStarts);
+}
+
+window.onload = function highsc() {
+    disableBtns(); // disable buttons until keypress
+    var scoreStr = localStorage.getItem(saveKeyScore);
+    if (scoreStr == null) {
+        highScore = 0;
+    } else {
+        highScore = parseInt(scoreStr);
+    }
+    $(".highScore").text(highScore);
+};
+
+// When game starts
+function gameStarts() {
+    enableBtns(); // enable buttons after game starts
+    patternCreated = [];
+    patternClicked = [];
+    $("h1").text("Press any Key to Start");
+    level = 1;
+    gameOn = true;
+    //get the high score form  loacal storage
+    var scoreStr = localStorage.getItem(saveKeyScore);
+    if (scoreStr == null) {
+        highScore = 0;
+    } else {
+        highScore = parseInt(scoreStr);
+    }
+    $(".highScore").text(highScore);
+    correctTill = 0;
+    levelUpdate(level);
+    generatePattern();
+}
+
+//When Game Ends
+function gameEnds() {
+    $("h1").text("Game Over, Press Any Key to Restart");
+    $(".highScore").text(highScore);
+    $("body").addClass("game-over");
+    var endSound = new Audio("sounds/wrong.mp3");
+    endSound.play();
+    setTimeout(function () {
+        $("body").removeClass("game-over");
+    }, 1000);
+    gameOn = false;
+    disableBtns(); // disable buttons after game over
+}
+/*******EventListener to button**************/
+$(".btn").on("click", function () {
+    btnClicked(this.id);
+    checkPattern(this.id);
+});
+/*******Updating level string**************/
+function levelUpdate(value) {
+    $("h1").text(`Level ${value}`);
+}
+/*******Creating next pattern**************/
+function generatePattern() {
+    var randomNumber = Math.floor(Math.random() * 4) + 1;
+    patternCreated.push(randomNumber);
+    switch (randomNumber) {
+        case 1:
+            btnInPattern("green");
+            break;
+        case 2:
+            btnInPattern("red");
+            break;
+        case 3:
+            btnInPattern("blue");
+            break;
+        case 4:
+            btnInPattern("yellow");
+            break;
+    }
+    correctTill = 0;
+}
+
+/*******Checking button clicked is correct in pattern**************/
+function checkPattern(value) {
+    var num = 0;
+    switch (value) {
+        case "green":
+            num = 1;
+            break;
+        case "red":
+            num = 2;
+            break;
+        case "blue":
+            num = 3;
+            break;
+        case "yellow":
+            num = 4;
+            break;
+    }
+
+    //Highscore button code
+    if (patternCreated[correctTill] != num) {
+        if (level > highScore) {
+            highScore = level - 1;
+            localStorage.setItem(saveKeyScore, highScore);
+        }
+
+        gameEnds();
+    }
+    correctTill++;
+    if (correctTill == level) {
+        level++;
+        setTimeout(function () {
+            levelUpdate(level);
+            enableBtns(); //enable buttons after every level
+            generatePattern();
+        }, 500);
+    }
+}
+/*******Pattern button effect**************/
+function btnInPattern(value) {
+    var audio = new Audio(`sounds/${value}.mp3`);
+    audio.play();
+    $(`.${value}`).fadeTo(100, 0.1).delay(10).fadeTo(100, 1);
+}
+/*******Creating a click effect on clicked button**************/
+function btnClicked(value) {
+    switch (value) {
+        case "green":
+            patternClicked.push(1);
+            btnClickedView("green");
+            break;
+        case "red":
+            patternClicked.push(2);
+            btnClickedView("red");
+            break;
+        case "blue":
+            patternClicked.push(3);
+            btnClickedView("blue");
+            break;
+        case "yellow":
+            patternClicked.push(4);
+            btnClickedView("yellow");
+            break;
+    }
+}
+/*******Clicked button effect**************/
+function btnClickedView(value) {
+    var audio = new Audio(`sounds/${value}.mp3`);
+    audio.play();
+    $(`.${value}`).addClass("pressed");
+    setTimeout(function () {
+        $(`.${value}`).removeClass("pressed");
+    }, 100);
+}
+
+$(".btn-rules").on("click", function () {
+    $(".container-rules-overlay").toggleClass("box-show");
+});
+$(".btn-close").on("click", function () {
+    $(".container-rules-overlay").toggleClass("box-show");
+});
+
+const openModalBtn = document.querySelector(".btn-rules");
+const closeModalBtn = document.querySelector(".btn-close");
+const modal = document.querySelector(".modal");
+const overlay = document.querySelector(".overlay");
+
+console.log(modal);
+console.log(overlay);
+// close modal function
+const closeModal = function () {
+    modal.classList.add("hidden");
+    overlay.classList.add("hidden");
+};
+
+// close the modal when the close button and overlay is clicked
+closeModalBtn.addEventListener("click", closeModal);
+overlay.addEventListener("click", closeModal);
+
+// close modal when the Esc key is pressed
+document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && !modal.classList.contains("hidden")) {
+        closeModal();
+    }
+});
+
+// open modal function
+const openModal = function () {
+    modal.classList.remove("hidden");
+    overlay.classList.remove("hidden");
+};
+// open modal event
+openModalBtn.addEventListener("click", openModal);
+
+/*Theme change*/
+
+const body = document.querySelector("body");
+const toggle = document.querySelector(".toggle");
+const h1 = document.querySelector("h1");
+const h2 = document.querySelector("h2");
+const level_title = document.querySelector("#level-title");
+
+toggle.addEventListener("click", () => {
+    body.classList.toggle("dark")
+        ? (toggle.firstElementChild.className = "far fa-moon")
+        : (toggle.firstElementChild.className = "far fa-sun");
+});
+
+toggle.addEventListener("click", () => {
+    level_title.classList.toggle("dark")
+        ? (toggle.firstElementChild.className = "far fa-moon")
+        : (toggle.firstElementChild.className = "far fa-sun");
+});
+
+toggle.addEventListener("click", () => {
+    h2.classList.toggle("dark")
+        ? (toggle.firstElementChild.className = "far fa-moon")
+        : (toggle.firstElementChild.className = "far fa-sun");
+});
diff --git a/Games/Simon_Says/sounds/blue.mp3 b/Games/Simon_Says/sounds/blue.mp3
diff --git a/Games/Simon_Says/sounds/green.mp3 b/Games/Simon_Says/sounds/green.mp3
diff --git a/Games/Simon_Says/sounds/red.mp3 b/Games/Simon_Says/sounds/red.mp3
diff --git a/Games/Simon_Says/sounds/wrong.mp3 b/Games/Simon_Says/sounds/wrong.mp3
diff --git a/Games/Simon_Says/sounds/yellow.mp3 b/Games/Simon_Says/sounds/yellow.mp3