First Commit

DPoplin · Jul 16, 2020 · e75d4b1 · e75d4b1
commit e75d4b1
Show file tree

Hide file tree

Showing 13 changed files with 181 additions and 0 deletions.
diff --git a/blue.mp3 b/blue.mp3
diff --git a/game.js b/game.js
@@ -0,0  1,86 @@
 var buttonColors = ["red", "blue", "green", "yellow"];
 var gamePattern = [];
 var userClickedPattern = [];
 var level = "0";
 
 
 $(".btn").click(function() {
   var userChosenColor = this.id;
   userClickedPattern.push(userChosenColor);
   console.log(userClickedPattern);
   animatePress(userChosenColor);
   playSound(userChosenColor);
   // var userClick = $.inArray((userChosenColor), buttonColors);
   checkAnswer(userClickedPattern.length - 1);
 });
 
 
 function checkAnswer(currentLevel) {
   if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
     console.log("Success!");
     if (gamePattern.length === userClickedPattern.length) {
       setTimeout(function() {
         nextSequence();
       }, 1000);
     }
   } else {
     console.log("Wrong");
     var wrong = new Audio("sounds/wrong.mp3");
     wrong.play();
     $("body").addClass("game-over");
     setTimeout(function() {
       $("body").removeClass("game-over");
     }, 200);
     $("#level-title").text("Game Over, Press Any Key to Restart");
     startOver();
   }
 }
 
 
 function nextSequence() {
   userClickedPattern = [];
   level  ;
   $("#level-title").text("Level "   level);
 
   var randomNumber = Math.floor(Math.random() * 4);
   var randomChosenColor = buttonColors[randomNumber];
   gamePattern.push(randomChosenColor);
   // gamePattern.forEach(animatePress);
   gamePattern.forEach((button, i) => {
     setTimeout(() => {
       animatePress(button);
       playSound(button);
     },i * 500);
   });
   // $("#"   randomChosenColor).fadeOut(100).fadeIn(100);
 
 }
 
 
 function playSound(name) {
   var audio = new Audio("sounds/"   name   ".mp3");
   audio.play();
 }
 
 
 function animatePress(currentColor) {
   $("#"   currentColor).addClass("pressed");
   setTimeout(function() {
     $("#"   currentColor).removeClass("pressed");
   }, 100);
 }
 
 
 var gameStarted = "false";
 $("body").keydown(function() {
   if (gameStarted === "false") {
     gameStarted = "true";
     nextSequence();
   }
 });
 
 function startOver(){
   gamePattern = [];
   level = "0";
   gameStarted = "false";
 }
diff --git a/green.mp3 b/green.mp3
diff --git a/index.html b/index.html
@@ -0,0  1,42 @@
 <!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 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>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="game.js" charset="utf-8"></script>
 </body>
 
 </html>
diff --git a/red.mp3 b/red.mp3
diff --git a/sounds/blue.mp3 b/sounds/blue.mp3
diff --git a/sounds/green.mp3 b/sounds/green.mp3
diff --git a/sounds/red.mp3 b/sounds/red.mp3
diff --git a/sounds/wrong.mp3 b/sounds/wrong.mp3
diff --git a/sounds/yellow.mp3 b/sounds/yellow.mp3
diff --git a/styles.css b/styles.css
@@ -0,0  1,53 @@
 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;
 }
diff --git a/wrong.mp3 b/wrong.mp3
diff --git a/yellow.mp3 b/yellow.mp3