Simon Game Implementation

Simon-GameChallenge/README.md

@@ -0,0 +1,25 @@
+<center> 
+  <h1 style="font-size: 36px; font-family: 'Roboto', sans-serif; font-weight: bold;">🎮 Simon Game</h1>
+</center>
+
+- A web-based interactive **Simon Game**, where users test and improve their memory by repeating an ever-growing sequence of lights and sounds.
+
+### ✨ ***Features***
+- "🎶 **Colorful Light Patterns**: Buttons light up in a sequence that users must memorize and replicate."
+- "📱 **Responsive Design**: The layout is optimized for various screen sizes and devices."
+- "🎨 **Animations and Feedback**: Buttons are visually and audibly animated, providing instant feedback on user actions."
+- "🔄 **Restart Option**: Users can end the game and restart the game manually in normal mode or automatically restart after a mistake in tricky mode."
+
+### 🔢 **Game Rules**
+1. Watch the sequence of buttons lighting up.
+2. Repeat the sequence by clicking the buttons or using keyboard keys.
+3. With every correct sequence, an additional button is added.
+4. The game ends when the user presses the wrong button.
+
+### 🔧 **Technologies Used**
+- **HTML**: Provides the structure for the game's interface.
+- **CSS**: Adds styles, animations, and ensures responsiveness.
+- **JavaScript**: Implements game logic, sequence tracking, and animations.
+
+### 📡 **Live Demo**
+Check out the live demo of the Simon Game: [Simon Game Challenge](https://simongame-challenge.netlify.app/)

Simon-GameChallenge/game.js

@@ -0,0 +1,134 @@
+let gamePattern = [];
+let userClickedPattern = [];
+let buttonColours = ["red", "blue", "green", "yellow"];
+let started = false;
+let level = 0;
+let highScore = 0;
+let gameMode = null; // Game mode is null initially
+
+
+// Display the high score and level
+$("#high-score").text(highScore);
+$("#current-level").text(level);
+
+// Start Game Button Click Event
+$("#start-button").on("click", function () {
+  if (!gameMode) {
+    alert("Please select a mode (Normal or Strict) to start the game!");
+    return;
+  }
+
+  if (!started) {
+    $("#level-title").text("Happy Gaming! - Simon");
+    nextSequence();
+    started = true;
+    $(this).hide();
+  }
+});
+
+// End Game Button Click Event
+$("#end-button").on("click", function () {
+  if (!started) return; // Do nothing if the game hasn't started
+
+  // End the game by resetting all values
+  $("#level-title").text("Game Ended. Press Start to Restart");
+  updateHighScore(); // Save high score before resetting
+  startOver(); // Reset the game state
+  $("#start-button").show(); // Show the Start button again
+});
+
+// Mode Selection (Normal/Strict)
+$("input[name='mode']").on("change", function () {
+  gameMode = $(this).val();
+  alert(`Game mode set to: ${gameMode.toUpperCase()}`);
+});
+
+// User Clicks on a Button
+$(".btn").on("click", function () {
+  if (!started) return;
+
+  let userChosenColour = $(this).attr("id");
+  userClickedPattern.push(userChosenColour);
+
+  playSound(userChosenColour);
+  animatePress(userChosenColour);
+
+  checkAnswer(userClickedPattern.length - 1);
+});
+
+// Check User's Answer
+function checkAnswer(currentLevel) {
+  if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
+    if (userClickedPattern.length === gamePattern.length) {
+      setTimeout(() => {
+        nextSequence();
+      }, 1000);
+    }
+  } else {
+    playSound("wrong");
+    $("body").addClass("game-over");
+    $("#level-title").text("Game Over. Press Start to Retry.");
+
+    setTimeout(() => {
+      $("body").removeClass("game-over");
+    }, 200);
+
+    if (gameMode === "strict") {
+      updateHighScore();
+      startOver(); // Strict mode resets the game completely
+    } else {
+      userClickedPattern = []; // Normal mode allows retrying the same sequence
+    }
+  }
+}
+
+// Generate the Next Sequence
+function nextSequence() {
+  userClickedPattern = [];
+  level++;
+  $("#current-level").text(level);
+
+  let randomNumber = Math.floor(Math.random() * 4);
+  let randomChosenColour = buttonColours[randomNumber];
+  gamePattern.push(randomChosenColour);
+
+  $(`#${randomChosenColour}`).fadeOut(100).fadeIn(100);
+  playSound(randomChosenColour);
+}
+
+// Play Sound Based on Button Colour
+function playSound(name) {
+  let audio = new Audio(`sounds/${name}.mp3`);
+  audio.play();
+}
+
+// Animate Button Press
+function animatePress(currentColour) {
+  $(`#${currentColour}`).addClass("pressed");
+  setTimeout(() => {
+    $(`#${currentColour}`).removeClass("pressed");
+  }, 100);
+}
+
+// Start Over Function (Resets Game State)
+function startOver() {
+  level = 0;
+  gamePattern = [];
+  userClickedPattern = [];
+  started = false;
+  $("#current-level").text(level);
+}
+
+// Update High Score
+function updateHighScore() {
+  if (level > highScore) {
+    highScore = level - 1; // Subtract 1 because the game increments the level before game over
+    $("#high-score").text(highScore);
+  }
+}
+
+// Toggle Dark/Light Mode
+$("#mode-toggle").on("click", function () {
+  $("body").toggleClass("dark-mode");
+  $(this).toggleClass("dark-mode");
+});

Simon-GameChallenge/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Simon</title>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="icon" type="image/jpg" href="./game.png" />
+  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+</head>
+<body>
+  <h1 id="level-title">Press Start to Begin</h1>
+  <div class="main-container">
+    <!-- Game Layout -->
+    <div class="container">
+      <div class="row">
+        <div type="button" id="green" class="btn green"></div>
+        <div type="button" id="blue" class="btn blue"></div>
+      </div>
+      <div class="row">
+        <div type="button" id="red" class="btn red"></div>
+        <div type="button" id="yellow" class="btn yellow"></div>
+      </div>
+    </div>    
+
+
+    <!-- Info Section -->
+    <div class="info-panel">
+      <p>Level: <span id="current-level">0</span></p>
+      <p>High Score: <span id="high-score">0</span></p>
+
+       <!-- Mode Selection -->
+       <div class="mode-selection">
+        <label>
+          <input type="radio" name="mode" value="normal">
+          Normal
+        </label>
+        <label>
+          <input type="radio" name="mode" value="strict">
+          Tricky
+        </label>
+      </div>
+
+      <button id="start-button">Start Game</button>
+      <button id="end-button">End Game</button> <!-- New End Game Button -->
+    </div>
+
+    <div class="how-to-panel">
+      <h2>How to Play</h2>
+      <ul>
+        <li>Press <strong>Start Game</strong> to begin.</li>
+        <li>Watch the sequence of button flashes carefully.</li>
+        <li>Repeat the sequence by clicking the buttons in the same order.</li>
+        <li>If you get it wrong:
+          <ul>
+            <li><strong>Normal Mode:</strong> Retry the same sequence.</li>
+            <li><strong>Tricky Mode:</strong> Game resets to level 0.</li>
+          </ul>
+        </li>
+        <li>Try to achieve the highest score!</li>
+      </ul>
+    </div>
+  </div>
+
+  <!-- Robot Icon Link -->
+  <a href="https://github.com/Saiharitha3/Simon-GameChallenge" target="_blank" id="github-link">
+    <span id="robot-icon">🤖</span>
+  </a>
+
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="./game.js" rel="javascript"></script>
+</body>
+</html>