Merge pull request #33 from shivanshsin0203/shivanshsin0203-Adding_Ne…

…w_Project Adding new project
shrey141102 · Oct 3, 2023 · 6c6feb2 · 6c6feb2
2 parents 0cf0f68 + 3e44f9e
commit 6c6feb2
Show file tree

Hide file tree

Showing 12 changed files with 284 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@
 - Micro Code Editor in the Browser
 - E-Commerce Website
 - Stopwatch
+- Simon Game
 - Javascript Projects Main Website
 
 <h2>🍰 Contribution Guidelines:</h2>

diff --git a/Simon Game/game.js b/Simon Game/game.js
@@ -0,0 +1,84 @@
+
+var buttonColours = ["red", "blue", "green", "yellow"];
+
+var gamePattern = [];
+var userClickedPattern = [];
+
+var started = false;
+var level = 0;
+var high=0;
+$("h1").click(function() {
+  if (!started) {
+    $("#level-title").text("Level " + level);
+    nextSequence();
+    started = true;
+  }
+});
+
+$(".btn").click(function() {
+
+  var userChosenColour = $(this).attr("id");
+  userClickedPattern.push(userChosenColour);
+
+  playSound(userChosenColour);
+  animatePress(userChosenColour);
+
+  checkAnswer(userClickedPattern.length-1);
+});
+
+function checkAnswer(currentLevel) {
+
+    if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
+      if (userClickedPattern.length === gamePattern.length){
+        if(gamePattern.length>high)
+        {
+          high=gamePattern.length;
+          document.querySelector("h4").innerHTML="HIGHSCORE "+high;
+        }
+        setTimeout(function () {
+          nextSequence();
+        }, 1000);
+      }
+    } else {
+      playSound("wrong");
+      $("body").addClass("game-over");
+      $("#level-title").text("Game Over, Click here to start");
+
+      setTimeout(function () {
+        $("body").removeClass("game-over");
+      }, 200);
+
+      startOver();
+    }
+}
+
+
+function nextSequence() {
+  userClickedPattern = [];
+  level++;
+  $("#level-title").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 animatePress(currentColor) {
+  $("#" + currentColor).addClass("pressed");
+  setTimeout(function () {
+    $("#" + currentColor).removeClass("pressed");
+  }, 100);
+}
+
+function playSound(name) {
+  var audio = new Audio("sounds/" + name + ".mp3");
+  audio.play();
+}
+
+function startOver() {
+  level = 0;
+  gamePattern = [];
+  started = false;
+}
diff --git a/Simon Game/index.html b/Simon Game/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Introduction</title>
+    <link rel="stylesheet" href="introd.css">
+  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+</head>
+<body>
+    <h1>Welcome to the Game</h1>
+    <h3>Game Specifations</h3>
+    <ul>
+        <li>
+            <p>Start the game: Begin by displaying an initial sequence of colors or sounds for the player to remember. The sequence can be as short as one item and progressively increase in length as the game progresses.</p></li>
+        <li><p>Display the sequence: Show the sequence of colors or play the corresponding sounds in the specified order. You can use visual cues like flashing buttons or auditory cues to represent the sequence.</p></li>
+        <li><p>Player input: After displaying the sequence, it's the player's turn to repeat the sequence they just witnessed. Provide a way for the player to input their response, such as by clicking the corresponding buttons or pressing specific keys.</p></li>
+         <li><p>Increase difficulty: Increase the length or complexity of the sequence for each successful round. This makes the game more challenging as the player progresses.</p></li>  
+         <li><p>Repeat the game: Continue the game until the player makes an incorrect move or reaches a certain level of difficulty.</p></li>
+         <li><p>HighgScore: A highsore is displayed above for your competence</p></li>
+         <li><p>A certain classic old game theme is dispalyed for unique experinence</p></li>
+    </ul>
+    <a href="introm.html">
+        <button class="got">Click Here to enjoy the game</button>
+      </a>
+    <h3>
+        TechStacks used
+    </h3>
+    <ul class="got">
+        <li>Basic Html</li>
+        <li>Basic CSS</li>
+        <li>Vanilla Javascript</li>
+        <li>Kaboom.js for easy game development</li>
+        <li>jquery library</li>
+        <li>Understanding concept of document object model(DOM)
+        </li>
+
+    </ul>
+    <footer>
+        Developed and Documented by ｼ S̷ H҉ Ї ℣ ₳ Ñ S̷ H҉  ｼ
+    </footer>
+</body>
+</html>
diff --git a/Simon Game/introd.css b/Simon Game/introd.css
@@ -0,0 +1,44 @@
+body {
+    background-color: #011F3F;
+    font-family: 'Press Start 2P', cursive;
+  font-size: 2rem;
+  margin:  5%;
+  color: #FEF2BF;
+  }
+  h1{
+    text-align: center;
+  }
+  h3{
+    margin-top: 9%;
+    color: red;
+  }
+  p{
+    color: white;
+    font-size: 2svb;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  .got{
+    color: white;
+    font-size: 2svb;
+    font-family: 'Courier New', Courier, monospace;
+  }
+  footer{
+    text-align: center;
+    color: wheat;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    padding-top: 4%;
+  }
+  button{
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    background-color: #4CAF50;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
diff --git a/Simon Game/introm.html b/Simon Game/introm.html
@@ -0,0 +1,46 @@
+<!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">Click Here to start</h1>
+  <h4> HighgScore: 0</h4>
+  <div class="container">
+    <div lass="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>
+  <footer>
+    Developed by ｼ S̷ H҉ Ї ℣ ₳ Ñ S̷ H҉  ｼ
+  </footer>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script src="game.js" charset="utf-8"></script>
+
+</body>
+
+</html>
diff --git a/Simon Game/sounds/blue.mp3 b/Simon Game/sounds/blue.mp3
diff --git a/Simon Game/sounds/green.mp3 b/Simon Game/sounds/green.mp3
diff --git a/Simon Game/sounds/red.mp3 b/Simon Game/sounds/red.mp3
diff --git a/Simon Game/sounds/wrong.mp3 b/Simon Game/sounds/wrong.mp3
diff --git a/Simon Game/sounds/yellow.mp3 b/Simon Game/sounds/yellow.mp3
diff --git a/Simon Game/styles.css b/Simon Game/styles.css
@@ -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.6;
+}
+
+.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;
+}
+h4{
+  text-align: center;
+  color: wheat;
+}
+footer{
+  color: whitesmoke;
+}
diff --git a/script.js b/script.js
@@ -59,6 +59,12 @@ const projects=[
         link:"./To-Do/index.html",
         image:"https://play-lh.googleusercontent.com/HUuQc4Zpl6x7fUyX-jFMmcuUbW77REw4UKl5rfhHfP4VY6ctBU1w1I_RZWsXaojFgIo"
     },
+      {
+        title:"Simon Game",
+        discription:"A memory-enhancing game in JavaScript where players repeat progressively longer sequences of colors and sounds",
+        link:"https://shivanshsin0203.github.io/Learn_DOM_Project3/",
+        image:"https://user-images.githubusercontent.com/46281169/60651872-8a8c2480-9e60-11e9-9e6f-feeb76e6e159.PNG"
+    },
 
 ]