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


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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


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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <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>

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

  <h3>Current Level: <span id="currentRound">0</span></h3> 


                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;
  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;
  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;



// 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; = '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'
  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..
      switch( color ){

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

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

        case 'yellow':
          console.log( 'highlighting ywllow' );
          yellowButton.classList.add( 'lightyellow' );
      }}, ( 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

    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 = [];
  else gameOver();

function gameOver(){
  playersTurn = false; = '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' );
  } else console.log( 'not your turn dude' );
redButton.addEventListener('click', function(e) {
  if( playersTurn ){
    chooseColor( 'red', -0.75 );
    playerPicks.push( 'red' );
  } else console.log( 'not your turn dude' );
greenButton.addEventListener('click', function(e) {
  if( playersTurn ){
    chooseColor( 'green', -0.75 );
    playerPicks.push( 'green' );
  } else console.log( 'not your turn dude' );
yellowButton.addEventListener('click', function(e) {
  if( playersTurn ){
    chooseColor( 'yellow', -0.75 );
    playerPicks.push( 'yellow' );
  } else console.log( 'not your turn dude' );

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

// });