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.

            
              <h1 class="gametitle">Simon</h1>
<h3 id="overhead">- Game Not On -</h3>

<main id="container">

  <div id="green"></div>
  <div id="red"></div>
  <div id="yellow"></div>
  <div id="blue"></div>
</main>
<div>

  <button id="start" style="width:100%;max-width:200px;margin:20px auto 5px;">Start Game</button>
</div>
<div>

  <h3>Current Level: <span id="currentRound">0</span></h3> 
</div>
            
          
!
            
              body {
  
  background-color: #f3f6f9;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0.5em;
}

main {
  
  width: 20vw;
  height: 20vw;
  margin: auto;
  border: none;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px;
  grid-template-areas: "green red"
    "yellow blue";
}

#green {
    
  grid-area: green;
  background-color:green;
  border: 5px solid black;
  border-radius: 30px;
}

.lightgreen {
  
  background-color: #00FF00 !important;
}

#red {

  grid-area: red;
  background-color: red;
  border: 5px solid black;
  border-radius: 30px;
}

.lightred {
 
  background-color: #FA8072 !important;
}

#yellow {

  grid-area: yellow;
  background-color: yellow;
  border: 5px solid black;
  border-radius: 30px;
}

.lightyellow {
  
 background-color: #FFFFE0 !important;
}

#blue {

  grid-area: blue;
  background-color:blue;
  border: 5px solid black;
  border-radius: 30px;
}

.lightblue {
  
  background-color: #00BFFF !important;
}

.gametitle, h3 {

  color: #222;
  margin: 10px auto;
}

button {
  
  padding: 10px;
  margin-top: 25px;
}
            
          
!
            
              //Variables

// so now you just have 1 long list of variable declarations

var gameOn = false; // game over once the game is won or player picks wrong button


var colorList = [ "red", "blue", "yellow", "green" ]; // between the 4 choices - blue - green - yellow - red
var thisRound = [];
var playerPicks = [];
var playersTurn = false; // i want to disable the player from beign able to fuck thigns up if its not his turn
var level = 0; // lets start at one so the level can equal the number of colors to pick
var startButton = document.getElementById('start');
var greenButton = document.getElementById('green');
var redButton = document.getElementById('red');
var yellowButton = document.getElementById('yellow');
var blueButton = document.getElementById('blue');

var gameOverhead = document.getElementById('overhead');
var currentRound = document.getElementById('currentRound');

function nextRound(){
  // FUNCTION once clicked it will allow the first color to be selected
  
  playersTurn = false;
  startButton.style.display = 'none';
  currentRound.innerHTML = level;
  overhead.innerHTML = '- GAME STARTED -';
  
  // Step 1: pick the next color, no need for a loop if its basically +1 every time
  let random = Math.floor( Math.random() * colorList.length ); // this will pick a random number 0-3, 4 being the length
    // of the array of colors, and 0-3 beign the indexes since it starts at '0'
  
  level++;
  thisRound.push( colorList[ random ] );
  console.log( thisRound ); // so we see that the color picking works..
  
  // Step 2: show the lights
  thisRound.forEach( ( color, index ) => {
     // go through each element in this array
    // to explain.. the arguments of the foreach are: the element you are on, and the index of that element
    // i named them to reflect that, they could be named anything
    // so the problem I just solved is this: if you use a setTimeout within a loop, all of the elements will fire at
    // the same time basically not respecting the 'setTimeout' which is supposed to create a delay between each firing...
    // so you have to multiply the 'index' of the loop iteration you are on by the delay time to make it work
    
    chooseColor( color, index );
  })
};

function clearColors(){
  // I noticed that the last color hung at the end, so I want to clear them at the end of the loop too
  
  blueButton.classList.remove( 'lightblue' );
  greenButton.classList.remove( 'lightgreen' );
  redButton.classList.remove( 'lightred' );
  yellowButton.classList.remove( 'lightyellow' );
}

function chooseColor( color, index ){
  
  setTimeout( function(){
      // I'm wrapping this in a 'setTimeout' so that theres a delay bewteen every color lighting up, we can adjust the delay
      // actually i think thats it.. ill test..
      
      // so basicallym everytime the loop iterates, it will clear all of the light colors, then pick a new one in the switch
      // statement below..
      
      // i want to make that red a little more clear.. and i didnt see the blue.. lets test this some more..
      clearColors();
      
      switch( color ){

        case 'blue':
          
          console.log( 'highlighting blue' );
          blueButton.classList.add( 'lightblue' );
          break;
        case 'red':
          
          console.log( 'highlighting red' );
          redButton.classList.add( 'lightred' );
          break;
        case 'green':

          console.log( 'highlighting green' );
          greenButton.classList.add( 'lightgreen' );
          break;

        case 'yellow':
      
          console.log( 'highlighting ywllow' );
          yellowButton.classList.add( 'lightyellow' );
          break;
      }}, ( index + 1 ) * 1500 ); // 1500 is equal to a secodn and a half, basically every 1000 = 1 second.. its milliseconds
    
  setTimeout( function(){
    // basically lets clear the colors a half of a second after

    clearColors();
    if( index + 1 == level ) playersTurn = true; // on the last light, make it the players turn
  }, ( index + 1 ) * 2000 );
}

function checkGame(){
  
  // so this is where our current problem lies.
  // lets log the 2 arrays every time this is called so we can inspect whats going on.
  // console.log() is an incredibly valuable tool for seeing waht data looks like during runtime
  console.log( 'players array: ', playerPicks );
  console.log( 'this round: ', thisRound );
  
  // we must compare every element in both arrays to make sure they are the same..
  let goodtogo = true; 
  
  playerPicks.forEach( ( color, index ) => {
    // basically, innocent until proven guilty
    // its set to true, and then it loops through both arrays
    // if it finds something not the same, it'll make it false
    
    if( color != thisRound[ index ] ) goodtogo = false;
  })

  if( goodtogo ) {
    
    console.log( 'YOU GOT THE RIGHT ONE' );
    if( playerPicks.length == level ) {
      
      playerPicks = [];
      nextRound();
    }
  }
  else gameOver();
  
}

function gameOver(){
  
  playersTurn = false;
  startButton.style.display = 'block';
  level = 0; // set it back to 1 
  // actually no need to display it because it already did that at the top of the round
  overhead.innerHTML = '- GAME OVER, START AGAIN -';
}


// Event listeners
// this event listener is not necesssary.. i took it out and as you can see in the console,
// the functions are still firing. Technically, just by simply loading a JS file ( by including it in the HTML ) you
// fire off anything that is on that oage
// document.addEventListener( 'DOMContentLoaded', function( e ) {    
    
blueButton.addEventListener( 'click', function(e) {
  
  if( playersTurn ) {
    
    chooseColor( 'blue', -0.75 ); // that seems like a good number, feel free to play around with it  
    playerPicks.push( 'blue' );
    
    checkGame();
  } else console.log( 'not your turn dude' );
});
redButton.addEventListener('click', function(e) {
 
  if( playersTurn ){
    
    chooseColor( 'red', -0.75 );
    playerPicks.push( 'red' );
    
    checkGame();
  } else console.log( 'not your turn dude' );
});
greenButton.addEventListener('click', function(e) {
  
  if( playersTurn ){
    
    chooseColor( 'green', -0.75 );
    playerPicks.push( 'green' );
    
    checkGame();
  } else console.log( 'not your turn dude' );
});
yellowButton.addEventListener('click', function(e) {
  
  if( playersTurn ){
    
    chooseColor( 'yellow', -0.75 );
    playerPicks.push( 'yellow' );
    
    checkGame();
  } else console.log( 'not your turn dude' );
});

startButton.addEventListener('click', function(e) {
  
  thisRound = [];
  playerPicks = [];
  level = 0;
  gameOn = true;
  nextRound();
});

// });
            
          
!
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