123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="flexContainer">
<div class="containerColor">
<div id="green"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
</div><!-- end containerColor -->
 
 <div class="containerControl">
  <div id="start">Start</div>
  <div id="count">0</div>
  <div id="strict">Turn strict mode on</div>
  <div id="win"></div>
 </div><!-- end containerControl -->
</div><!-- end flexContainer -->
<div class="rules">
<h1>Simon Memory Game rules</h1>
<p>Need to click the start button to start the game.</p>
<p>You can stop the game at any time. It will stop when you win.</p>
<p>There are 20 random sounds that you need to play in order to win the game.</p>
<p>If the game is played in the strict mode every time you make a mistake new set of random sounds will be created and you will start from the first new sound.</p>
<p>If the game is played in the regular mode when you make mistake the same note sequence will be played for you until you repeat it correctly.</p>
<p>You can turn the strict mode on and off only while the game is not played.</p>
</div>
            
          
!
            
              $yellow: #ffe74c;  //#FF9803
$green: #6bf178;  //#00B802
$red: #ff5964;  //#FF0612
$blue: #35a7ff;   //#00ABD7
$gray: gray;

body{
  background-color: white;
}

.flexContainer{
  display: flex;
  justify-content: center;  
}
.containerColor, .containerControl{
  width: 250px;
  display: inline-block;
  margin: 2% auto;
}

#yellow, #blue, #red, #green{
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 50%;
  border: 5px solid $gray;
}

#yellow{
  background-color: $yellow;
}

#blue{
  background-color: $blue;
}

#red{
  background-color: $red;
}

#green{
  background-color: $green;
}

.containerControl div{
  border: 5px solid $gray;
  border-radius: 5px;
  margin: 1%;
  width: 100px;
  text-align: center;
}

#start, #strict{
  border: 5px solid $green;
}

#win{
  display: none;
}

.rules{
  margin-left: 5%;
}
@media only screen and (max-width: 500px) {
  .containerColor{
    width: 200px;
  }
  
  #yellow, #blue, #red, #green{
    width: 80px;
    height: 80px;
  }
  .containerControl {
    width: 110px;
  }
}
            
          
!
            
              var redColor ="#ff5964",
    yellowColor="#ffe74c",
    blueColor="#35a7ff",
    greenColor="#6bf178", 
    redColorA="#FF0612",
    yellowColorA="#FF9803",
    blueColorA="#00ABD7",
    greenColorA="#00B802",
    blackColor = "#000000",
    grayColor="gray";
var soundYellow = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
    soundBlue = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
    soundRed = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
    soundGreen = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
const MAX_STEPS = 20;
const NUMBER_OF_NOTES = 4;
const YELLOW_I = 0, GREEN_I = 1, RED_I = 2, BLUE_I = 3;
var noteArray = [];
var playerNoteArray = [];
var strictMode = false;
var gameOn = false;
var currentStep = 0;
var playerCurrentStep = 0; // reset to 0 after mistake and before adding/playing new random sound
var clickEnabled = true; // dissable after wrong note until example is played again

/*-----------------------
  sound buttons
-----------------------*/

$("#yellow").off().on("click", function(){
  if (clickEnabled===true){
    playerClicks("#yellow", soundYellow, YELLOW_I);
  }    
});

$("#green").off().on("click", function(){
  if (clickEnabled===true){
    playerClicks("#green", soundGreen, GREEN_I);
  }
});

$("#red").off().on("click", function(){
  if (clickEnabled===true){
    playerClicks("#red", soundRed, RED_I);
  }
});

$("#blue").off().on("click", function(){
  if (clickEnabled===true){
    playerClicks("#blue", soundBlue, BLUE_I);
  }
});


var playerClicks = function(element, sound, colorIndex){
  if ( gameOn===true ){
    //delete message
    $("#win").css("display", "none");
    // play clicked sound
    playNoteByColor(element, sound);
	// disable futher clicks temporary
    clickEnabled = false;
    // is it correct sound?
    if (colorIndex === noteArray[playerCurrentStep]){
	   // if this is the last step up to now
	   if(playerCurrentStep === currentStep){
	     currentStep++;
         // if game is finished
         if (currentStep===MAX_STEPS){
           displayMessage("You WIN!!!", redColor, redColor);
           // make it blink 3 times
           for (var i=0; i<3; i++){
              $("#win").fadeOut(500);
	            $("#win").fadeIn(500);
           }  
           stopGame();
		       // enable futher clicks delayed by the number of current steps in seconds
		       delayClickEnable(0.8);
         }else{// play next step
		       // player need to start from the first note again
	         playerCurrentStep = 0;
           delayedPlay(currentStep+1);
           $("#count").html(currentStep+1);
		      // enable futher clicks delayed by the number of current steps in seconds
		      delayClickEnable(currentStep);
         }	   
       }else{ // there are more steps up to now
	       // just count this step and wait for the next click
		     playerCurrentStep++;
			   // enable futher clicks delayed by the number of current steps in seconds
			   delayClickEnable(0);
       }	   
    }else{// false sound
	    // reset user steps counter
	    playerCurrentStep = 0;
      if (strictMode === true){
        // start new musical sequence from the beginnig
        displayMessage("You miss this one. Let's start agin.", blackColor, grayColor);
        // start new game with 1sec delay; remember setTimeout does not need a function, just a pointer to the function
		    setTimeout(startGame,2000);
		    // enable futher clicks delayed by the number of current steps in seconds
		    delayClickEnable(2);
      }else{// not in strict mode
        displayMessage("Listen one more time then try agin.", blackColor, grayColor);
        delayedPlay(currentStep+1);
		    // enable futher clicks delayed by the number of current steps in seconds
		    delayClickEnable(currentStep);
      }      
    } 
  }  
};
/*-----------------------
 Display message
-----------------------*/
var displayMessage = function(message, color, borderColor){
  $("#win").html(message);
  $("#win").css("color", color);
  $("#win").css("border", "5px solid " + borderColor);
  $("#win").css("display", "block");
};

/*-----------------------
 Delay play
-----------------------*/
// how to properly pass argument to timeout
// https://javascript.info/settimeout-setinterval
// inproper: timeoutID = window.setTimeout(playFirstNnotes(n), 2000);
var timeoutID; 
var delayedPlay = function(n){
  timeoutID = window.setTimeout(playFirstNnotes, 1500, n);
};

/*-----------------------
 Delay enableling click for certain number of seconds
    input: int - number of seconds
-----------------------*/
var delayClickEnable = function(n){
  setTimeout(function(){
      clickEnabled = true;	
    }, 1000*n);
};

/*-----------------------
 Controls 
-----------------------*/
$("#start").on("click",function(){
    if ($("#start").text() === "Start"){
      startGame();
    }else{
      stopGame();
    }
});

/*-----------------------
  start game
-----------------------*/
var startGame = function(){
  gameOn = true;
  currentStep = 0;
  playerCurrentStep = 0;
  $("#start").html("Stop");
  $("#start").css("border", "5px solid " + redColor);
  $("#count").html("0");
  //delete message
  $("#win").css("display", "none");
  // get new random notes array
  for (var i=0; i< MAX_STEPS; i++){
    noteArray[i] = Math.floor(Math.random(NUMBER_OF_NOTES)*NUMBER_OF_NOTES);
  }
  // play first note
  playNoteByIndex(noteArray[0]) ;
};

/*-----------------------
  stop game
-----------------------*/
var stopGame = function(){
  gameOn = false;
  currentStep = 0;
  $("#start").html("Start");
  $("#start").css("border", "5px solid " + greenColor);
  $("#count").html("0");
};

/*-----------------------
 play note by index
   input - index 0-4
           0 - yellow
           1 - green
           2 - red
           3 - blue
-----------------------*/
var playNoteByIndex = function(index){
  switch (index){
    case YELLOW_I:
      playNoteByColor("#yellow", soundYellow);
      break;
    case GREEN_I:
      playNoteByColor("#green", soundGreen);
      break;
    case RED_I:
      playNoteByColor("#red", soundRed);
      break;
    case BLUE_I:
      playNoteByColor("#blue", soundBlue);
      break;
    default:
      break;
  }
};
/*-----------------------
 play note by color
   input - html element id, sound
-----------------------*/
var playNoteByColor = function(element, sound){
    sound.play();  
    $(element).animate({borderRadius: "0"}, 500);
    $(element).animate({borderRadius: "50%"}, 500);
};
/*-----------------------
 play first N notes
  input - number of notest to play
-----------------------*/
//https://stackoverflow.com/questions/4548034/create-a-pause-inside-a-while-loop-in-javascript
var playFirstNnotes = function(number){
  var i = 0;
  playNoteByIndex(noteArray[i]);
  number = (number > MAX_STEPS) ? MAX_STEPS : number;
  setInterval(function() {
    i++;
    if (i < number) {
      playNoteByIndex(noteArray[i]);
    }
  }, 800); // delay 0.8 seconds between sounds with animation
};

/*-----------------------
  Strict mode toglle on/off while game is off
-----------------------*/
$("#strict").on("click", function(){
  // if game is on don't change anything
  if (gameOn===true){
    return;
  }
  var text = $("#strict").text();
  if (text === "Turn strict mode on"){
    strictMode = true;
    $("#strict").html("Turn strict mode off");
    $("#strict").css("border", "5px solid " + blueColor);
  }else{
    strictMode = false;
    $("#strict").html("Turn strict mode on");
    $("#strict").css("border", "5px solid " + greenColor);
  }
});




            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console