Merge pull request #760 from mrswastik-robot/SimonGame-mrswastik-robot

SimonGame added by mrswastik-robot

Author: PBJI

SimonGame/mrswastik-robot/README.md

@@ -0,0 +1,29 @@
+# SimonGame
+![image](https://github.com/mrswastik-robot/SimonGame/assets/107865087/7cb96e34-a0c4-4372-bb30-9143cb422235)
+
+# What is a Simon Game and how it works ?
+
+
+Simon is a classic electronic memory game designed to test and improve your memory skills. It was invented by Ralph H. Baer and Howard J. Morrison and first released by Milton Bradley (now part of Hasbro) in 1978. The game consists of a console with four colored buttons (usually red, green, blue, and yellow) arranged in a circular pattern. Here's how the Simon game works:
+
+(1).Sequence Generation: The game starts by lighting up one of the colored buttons in a random sequence. This is the beginning of the pattern that you need to remember.
+
+(2).Playback: After the initial button is illuminated, the game will play a sequence of button presses by lighting up the buttons in the same order. The sequence will start with just one button and progressively get longer as you advance in the game.
+
+(3).Player's Turn: Your goal is to mimic the sequence played by Simon. To do this, you must press the buttons in the same order that Simon did. Each button press corresponds to a sound and a flash of light. If you successfully repeat the sequence, the game will add another random button to the end of the sequence and repeat the pattern.
+
+(4).Continue Playing: The game continues to increase the length of the sequence as long as you continue to correctly repeat it. It becomes more challenging as the pattern gets longer.
+
+(5).Mistakes: If you make a mistake by pressing the wrong button or pressing them in the wrong order, the game will signal your error with a distinctive sound, and the game ends. Your final score is based on how many rounds you successfully completed.
+
+(6).Scoring: Simon games often use a scoring system to keep track of your progress and high scores. The score typically reflects the number of rounds or steps you successfully completed in a single game.
+
+(7).Difficulty Levels: Some Simon games have multiple difficulty levels, which can affect the speed of the sequence playback or the complexity of the patterns.
+
+The objective of Simon is to see how far you can get by correctly repeating the increasingly longer and more complex sequences. It's a game that tests your memory, concentration, and pattern recognition skills. It can be played individually or in a competitive mode where players take turns trying to outdo each other's scores.
+
+
+
+
+
+

SimonGame/mrswastik-robot/game.js

@@ -0,0 +1,86 @@
+
+var buttonColours = ["red", "blue", "green", "yellow"];
+
+var gamePattern = [];
+var userClickedPattern = [];
+
+var level = 0;
+var started = false;
+$(document).keypress(function() {
+    if (!started) {
+      $("#level-title").text("Level " + level);
+      nextSequence();
+      started = true;
+    }
+  });
+
+
+$(".btn").on("click", function(){                 // saari document ki buttons k kisi pe bhi dabaaane pr function run ho jaa raha jisme apan har click hone waale <button> ka attribute "id" store kara rahe variable me aur usse phir bhej rahe array me 
+    var userChosenColour = $(this).attr("id");    // this se pura " <div type="button" id="green" class="btn green">" select ho jaata hain phir bas ab apan ko isme attribute "id" ka pata krna hain ki kis color ka button click kiya gaya tha
+    userClickedPattern.push(userChosenColour);
+    playsound(userChosenColour);
+    animatePress(userChosenColour);
+    checkAnswer(userClickedPattern.length - 1);
+
+});
+
+function checkAnswer(currentlevel)
+{
+    if(gamePattern[currentlevel] == userClickedPattern[currentlevel])
+    {
+        console.log("Success");
+        if (userClickedPattern.length === gamePattern.length)             //checking if one complete round of game is completed or not
+        {
+            setTimeout(function(){
+                nextSequence();} , 1000);
+            }
+
+        }
+        else{
+            var audio = new Audio("sounds/wrong.mp3");
+             audio.play();
+
+             $("body").addClass("game-over");
+             setTimeout(function(){document.querySelector("body").classList.remove("game-over")}, 200);
+             $("h1").html("<span style='color: red;'>Gameover.</span></br></br> Press any key to Restart.");
+
+             startOver();
+            }
+ }
+            
+
+
+
+
+function nextSequence(){
+
+    userClickedPattern = [];
+    ++level;
+    $("h1").text("Level - " + level);
+
+    var randomNumber = Math.floor(Math.random() * 4);
+    var randomChosenColour = buttonColours[randomNumber];
+    gamePattern.push(randomChosenColour);
+
+    $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
+
+    playsound(randomChosenColour);
+}
+
+function playsound(name)
+{
+    var audio = new Audio("sounds/" + name + ".mp3");
+    audio.play();
+}
+
+function animatePress(currentColour)
+{
+    $("#" + currentColour).addClass("pressed");
+    setTimeout(function(){document.querySelector("#" + currentColour).classList.remove("pressed")}, 100);
+}
+
+function startOver(){
+    level = 0;
+    started = false;
+    gamePattern = [];
+}

SimonGame/mrswastik-robot/index.html

@@ -0,0 +1,45 @@
+<!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">
+</head>
+
+<body>
+  <h1 id="level-title">Press A Key to Start</h1>
+  <div class="container">
+    <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>
+
+  </div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>   <!--aur ye entry hui jquery ki, ye  cdn hain jquey ka aur ise yaad se javascript jo ki hamesha hi body k last me rahega uske upar chipka diya krna-->
+<script src="game.js" charset="utf-8"></script>
+
+</body>
+
+<footer>Designed by <span style="color: red">Swastik.</span></footer>
+
+</html>

SimonGame/mrswastik-robot/sounds/blue.mp3

@@ -0,0 +1,60 @@
+body {
+  text-align: center;
+  background-color: #011F3F;
+}
+
+#level-title {
+  font-family: 'Press Start 2P', cursive;
+  font-size: 3rem;
+  margin:  5%;
+  color: #FEF2BF;
+}
+
+.container {
+  display: block;
+  width: 50%;
+  margin: auto;
+
+}
+
+.btn {
+  margin: 25px;
+  display: inline-block;
+  height: 200px;
+  width: 200px;
+  border: 10px solid black;
+  border-radius: 20%;
+}
+
+.game-over {
+  background-color: red;
+  opacity: 0.8;
+}
+
+.red {
+  background-color: red;
+}
+
+.green {
+  background-color: green;
+}
+
+.blue {
+  background-color: blue;
+}
+
+.yellow {
+  background-color: yellow;
+}
+
+.pressed {
+  box-shadow: 0 0 20px white;
+  background-color: grey;
+}
+
+footer{
+  font-family: 'Press Start 2P', cursive;
+  font-size: 1rem;
+  color: #FEF2BF;
+  margin-top: 1.50%;
+}