Pen Settings

HTML

CSS

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

JavaScript

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

Behavior

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.

HTML

              
                
<html>

<head>
  <meta charset="UTF-8" />
  <title>Simon Game</title>
  <meta name="description" content="Portfolio Home Page" />
  <meta name="keywords" content="Web Project, Portfolio,Web Developer, Web Development" />
  <meta name="device" content="width=device-width,initial-scale=1.0" />
  <meta name="author" content="Adam Shaffer" />

  <!--LINKS TO EXTERNAL FILES-->

  <!--EXTERNAL LINKS TO LOCAL CASCADING STYLE SHEET AND JAVASCRIPT CODE-->


  <!--BOOTSTRAP LINKS AND CDN-->
  <!--Links to Bootstrap-->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!--JQuery Google CDN-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <!--Link to w3 School library-->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <!-- Links to Devicons and Font Awesome -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/4f6a4b08efdad6bb29f9cc801f5c07e263b39907/devicon.min.css">
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
  <link rel="stylesheet" type="text/css" href="Simon_Game.css">
  <script type="text/javascript" src="Simon_Game.js"></script>
  <script type="text/javascript" src="https://codepen.io/greatdeveloper66/pen/dzqxJQ"></script>

</head>

<body>

  <!--game container houses the entire game space-->
  <div class="game-container">
    <!--game-controls houses the game controls and switches in the center of the board.-->
    <div class="game-controls">
      <!--sub division of game-controls-houses the simon logo at the top-->
      <div class="simon-logo">
        simon&copy;
      </div>
      <!--subdivsion of game controls houses all of the actual controls for the game excludes logo and counter-->

      <!--subdivision of controls that houses the toggle switch for turning the game on and off-->
      <div class="container-fluid controls">
        <div class="row control-row">
          <div class="col-xs-4">
            <p>off</p>
          </div>
          <div class="col-xs-4">
            <!-- Rounded switch -->
            <label class="switch">
            <input type="checkbox" id="onSwitch">
            <span class="slider round"></span>
         </label>
          </div>
          <div class="col-xs-4">
            <p>on</p>
          </div>
        </div>
        <div class="row control-row">
          <div class="col-xs-4 col-xs-offset-3">
            <!-- Rounded switch -->
            <button type="button" class="btn-primary button-size" id="startSwitch" disabled><p>START</p></button>
          </div>
        </div>
        <div class="row control-row">
          <div class="col-xs-4">
            <p>norm</p>
          </div>
          <div class="col-xs-4">

            <!-- Rounded switch -->

            <label class="switch">
            <input type="checkbox" id="modeSwitch">
            <span class="slider round"></span>
         </label>
          </div>
          <div class="col-xs-4">
            <p>strict</p>
          </div>
        </div>
      </div>

      <!--Game counter-subdivision of game game controls division-keeps track of number of remaining moves for player-->
      <div id="counter">
        <p>
          00
        </p>
      </div>
    </div>

    <!--second section of game container-contains all four buttons of simon game-green,red,blue and yellow-->
    <button type="button" class="green-button" id="green-button" disabled>
      </button>
    <button type="button" class="red-button" id="red-button" disabled>
    </button>
    <button type="button" class="blue-button" id="blue-button" disabled>
    </button>
    <button type="button" class="yellow-button" id="yellow-button" disabled>
    </button>
  </div>

<div class="messageBox" id="msgBox">
  <p>Welcome to the Simon Game</p>
</div>
  <!--Audio for Green Button-->
  <audio id="greenAudio">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg">
</audio>

  <!--Audio for Red Button-->
  <audio id="redAudio">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
</audio>

  <!--Audio for Yellow Button-->
  <audio id="yellowAudio">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg">
</audio>

  <!--Audio for Green Button-->
  <audio id="blueAudio">
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg">
</audio>


</body>

</html>
              
            
!

CSS

              
                /*MOBILE FIRST-BEGINNING SECTION BEFORE THE MEDIA QUERIES ASSUMES SMART PHONE USER*/

/*THIS SECTION STYLES THE GAME CONTAINER, BUTTONS AND THE DIV IN THE CENTER*/

/*styling for game app-sets app in center of screen and defines its coordinates*/
.game-container {
  position: relative;
  margin: auto;
  margin-top: 3px;
  margin-bottom: 3px;
  width: 270px;
  height: 270px;
}

.messageBox {
  position: relative;
  margin: auto;
  width: 270px;
  height: 25px;
  display: block;
}

.messageBox p {
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

/*styling for the white circle in the center that contains the logo, counter and game controls*/
.game-controls {
  position: absolute;
  z-index: 1;
  background-color: white;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 100%;
}

/*styling for the green,red,yellow and blue simon buttons in the game*/
.green-button,
.red-button,
.yellow-button,
.blue-button {
  position: absolute;
  cursor: pointer;
  float: left;
  display: inline-block;
  border: 1px solid grey;
  width: 50%;
  height: 50%;
}

.green-button {
  background-color: green;
  border-top-left-radius: 100%;
}

.red-button {
  background-color: red;
  border-top-right-radius: 100%;
  left: 50%;
}

.blue-button {
  background-color: blue;
  border-bottom-left-radius: 100%;
  top: 50%;
}

.yellow-button {
  background-color: yellow;
  border-bottom-right-radius: 100%;
  top: 50%;
  left: 50%;
}

.button-size {
  margin: auto;
  width: 30px;
  height: 15px;
}

.button-size p {
  margin: auto;
  font-family: Roboto;
  font-size: 3px;
}

/*this next section includes the divs withing the center game controls div
/*includes simon-logo, counter and game controls*/
/*simon logo at top of game controls*/
.simon-logo {
  position: relative;
  height: 20%;
  width: 50%;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: black;
  margin: auto;
  top: 10%;
  background-color: white;
}

/*styling for counter that keeps track of number of steps in game*/
#counter {
  position: relative;
  height: 5%;
  width: 20%;
  color: black;
  margin: auto;
  top: 55%;
}

#counter p {
  font-size: 20px;
}
/*styling for div that houses on/off slider, start game button and mode button*/
.controls {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 80%;
  height: 50%;
  padding: 2px;
  background: yellow;
  
}

.control-row {
  height: 33%;
  width: 100%;
  margin: auto;
  
}

//*styling for the div that houses the mode and start buttons-I need to change the name for this.*/
.buttongroup {
  position: relative;
  display: inline-block;
  margin: auto;
  padding: 3px;
  height: 50%;
  width: 50%;

  background-color: red;
}

/*extra class to style the game buttons-this may not be necessary-see if it can't be moved into .btn*/
.gamebutton {
  position: relative;
  width: 45%;
  height: 95%;
  padding: 3px;
}

.gamebutton p {
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  padding-bottom: 5px;
  font-size: 7px;
}

/*this div acts as a container for the on and off toggleswitch*/
.game-toggleswitch {
  position: relative;
  display: block;
  padding-bottom: 5px;
  height: 100%;
  width: 100%;
  margin: auto;
  background-color: rgba(150, 150, 150, 1);
}

.col-xs-4 p {
  font-weight: bold;
  text-transform: uppercase;
}

button input {
  display: none;
}

/*THE STYLING IN THE NEXT SECTION MAKES THE SLIDE TOGGLE*/
/* The switch - the box around the slider */
.switch {
  display: inline-block;
  height: 80%;
  width: 80%;
}

/* Hide default HTML checkbox */
.switch input {
  display: none;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.col-xs-4 {
  height: 90%;
  
}
.slider:before {
  position: absolute;
  content: "";
  height: 90%;
  width: 43%;
  left: 3%;
  bottom: 3%;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

/* Rounded sliders */
.slider.round {
  border-radius: 23px;
}

.slider.round:before {
  border-radius: 50%;
}

/*MEDIA QUERIES IN THIS SECTION SET UP DIFFERENT STYLING FOR TABLETS, DESKTOPS AND LARGE SCREENS*/
/*tablet screen*/
@media screen and (min-width: 320px) {
  .game-container {
    width: 300px;
    height: 300px;
  }
  .messageBox {
    width: 300px; 
    height: 25px;
  }
  .messageBox p {
    font-size: 9px;
  }
  p {
    font-size: 8px;
  }

  .slider round {
    border-radius: 34px;
  }

  .simon-logo {
    font-size: 15px;
  }
  #counter p {
    font-size: 25px;
  }
  .gamebutton p {
    font-size: 6px;
  }
  .col-xs-4 p {
    font-size: 5px;
  }

  .button-size {
  width: 40px;
  height: 15px;
  }
.button-size p {
  
  font-family: Roboto;
  font-size: 7px;
  }
}
}

/*desktop screens*/
@media screen and (min-width: 768px) {
  .game-container {
    width: 400px;
    height: 400px;
  }
  .messageBox{
    width: 400px;
    height: 35px;
  }
  .messageBox p {
    font-size: 12px;
  }
  p {
    font-size: 15px;
  }

  .simon-logo {
    font-size: 25px;
  }
  #counter p {
    font-size: 37px;
  }
  .gamebutton p {
    font-size: 8px;
  }
  .col-xs-4 p {
    font-size: 6px;
  }
  .button-size {
  width: 50px;
  height: 20px;
  }
.button-size p {
  font-family: Roboto;
  font-size: 9px;
  }
}

/*large screens*/
@media screen and (min-width: 1024px) {
  .game-container {
    width: 500px;
    height: 500px;
  }
  .messageBox {
    width: 500px;
    height: 50px;
  }
  .messageBox p {
    font-size: 20px;
  }
  p {
    font-size: 20px;
  }

  .simon-logo {
    font-size: 30px;
  }
  #counter p {
    font-size: 50px;
  }
  .gamebutton p {
    font-size: 13px;
  }
  .col-xs-4 p {
    font-size: 10px;
  }
  .button-size {
  width: 80px;
  height: 30px;
  }

.button-size p {
  font-family: Roboto;
  font-size: 14px;
  }

}

              
            
!

JS

              
                window.onload = () => {
  var gameOn = false;
  var unPaused = false;
  var strictMode = false;
  var userClicks = [];
  var currentLevel = 1;
  var computerMoves = [];

  //CONSTANTS
  //lighter colors
  const lightGreen = "rgba(198,255,179,0.8)";
  const lightRed = "rgba(255,194,179,0.8)";
  const lightYellow = "rgba(255,255,153,0.8)";
  const lightBlue = "rgba(128,159,255,0.8)";
  //important times
  const buttonTime = 1000;
  const bufferTime = 300;
  const startBuffer = 1300;
  const highestLevel = 10;
  //game messages
  const gameStart = "<p>welcome to the simon game</p>";
  const wrongButton = "<p>Error. Try Again.</p>";
  const restartGame = "<p>Error. Game will restart.</p>";
  const restartLevel = "<p>you must redo this level</p>";
  const userWon = "<p>congratulations! you beat simon.</p>";

  //assumes this is an array of functions and calls each one in
  //succession.
  Array.prototype.callAll = function() {
    //if
    if (arguments.length === 0) {
      this.forEach(function(fun) {
        fun();
      });
    } else if (arguments.length === 1 && Array.isArray(arguments[0])) {
      let args = arguments[0];
      this.slice(0, args.length).forEach(function(fun, index) {
        fun(args[index]);
      });
    } else {
      //passed a list of individual arguments
      let args = Array.from(arguments);
      this.slice(0, arguments.length).forEach(function(fun, index) {
        fun(args[index]);
      });
    }
  };

  //this array records wait times for each button in session when computer plays.
  var waitTimes = Array(21)
    .fill(startBuffer)
    .map(function(x, index, arr) {
      return x + index * (buttonTime + bufferTime);
    });

  //an array that contains all four functions to play the green,red, yellow and blue buttons.
  var playArray = [
    function() {
      document.getElementById(
        "green-button"
      ).style.backgroundColor = lightGreen;
      document.getElementById("greenAudio").play();
      var timeOutID;
      function waitGreen() {
        timeOutID = setTimeout(function() {
          document.getElementById("green-button").style.backgroundColor =
            "green";
        }, buttonTime);
      }

      waitGreen();
    },
    function() {
      document.getElementById("red-button").style.backgroundColor = lightRed;
      document.getElementById("redAudio").play();
      var timeOutID;
      function waitRed() {
        timeOutID = setTimeout(function() {
          document.getElementById("red-button").style.backgroundColor = "red";
        }, buttonTime);
      }
      waitRed();
    },
    function() {
      document.getElementById(
        "yellow-button"
      ).style.backgroundColor = lightYellow;
      document.getElementById("yellowAudio").play();
      var timeOutID;
      function waitYellow() {
        timeOutID = setTimeout(function() {
          document.getElementById("yellow-button").style.backgroundColor =
            "yellow";
        }, buttonTime);
      }
      waitYellow();
    },
    function() {
      document.getElementById("blue-button").style.backgroundColor = lightBlue;
      document.getElementById("blueAudio").play();
      var timeOutID;
      function waitYellow() {
        timeOutID = setTimeout(function() {
          document.getElementById("blue-button").style.backgroundColor = "blue";
        }, buttonTime);
      }
      waitYellow();
    }
  ];

  //enable all simon buttons allowing user to play game
  function enableAll() {
    document.getElementById("green-button").removeAttribute("disabled");
    document.getElementById("red-button").removeAttribute("disabled");
    document.getElementById("yellow-button").removeAttribute("disabled");
    document.getElementById("blue-button").removeAttribute("disabled");
    document.getElementById("startSwitch").removeAttribute("disabled");
    document.getElementById("onSwitch").removeAttribute("disabled");
    document.getElementById("modeSwitch").removeAttribute("disabled");
  }

  function disableAll() {
    document.getElementById("green-button").setAttribute("disabled", true);
    document.getElementById("red-button").setAttribute("disabled", true);
    document.getElementById("yellow-button").setAttribute("disabled", true);
    document.getElementById("blue-button").setAttribute("disabled", true);
    document.getElementById("startSwitch").setAttribute("disabled", true);
    document.getElementById("onSwitch").setAttribute("disabled", true);
    document.getElementById("modeSwitch").setAttribute("disabled", true);
  }

  function updateCounter() {
    let tenthplace = Math.floor(currentLevel / 10);
    let oneplace = Math.floor(currentLevel % 10);
    document.getElementById("counter").innerHTML =
      "<p>" + tenthplace.toString() + oneplace.toString() + "</p>";
  }

  function backtoWelcome() {
    var timeoutID;
    function wait() {
      timeoutID = setTimeout(function() {
        document.getElementById("msgBox").innerHTML = gameStart;
      }, 1000);
    }
    wait();
  }

  function endGame() {
    var timeoutID;
    function wait() {
      timeoutID = setTimeout(function() {
        location.reload();
      }, 4000);
    }
    wait();
  }

  ///event handling function for on and off switch
  document.getElementById("onSwitch").addEventListener("click", function() {
    if (gameOn) {
      document.getElementById("counter").innerHTML = "<p>" + "00" + "</p>";
      document.getElementById("startSwitch").setAttribute("disabled", true);
      document.getElementById("startSwitch").innerHTML =
        "<p>" + "START" + "</p>";
      unPaused = false;
      //reset computer's moves and user's clicks.
      userClicks = computerMoves = [];
      currentLevel = 0;
    } else {
      document.getElementById("counter").innerHTML = "<p>" + "01" + "</p>";
      document.getElementById("startSwitch").removeAttribute("disabled");
      currentLevel = 1;
      //create all computer's future moves here
      computerMoves = new Array(20).fill(4).map(function(x) {
        return Math.floor(Math.random() * x);
      });
    }

    gameOn = !gameOn;
  });

  //event handling fuction for pause and start switch
  document.getElementById("startSwitch").addEventListener("click", function() {
    if (unPaused) {
      document.getElementById("startSwitch").innerHTML =
        "<p>" + "START" + "</p>";
      disableAll();
      document.getElementById("startSwitch").removeAttribute("disabled");
      document.getElementById("onSwitch").removeAttribute("disabled");
      document.getElementById("modeSwitch").removeAttribute("disabled");
    } else {
      document.getElementById("startSwitch").innerHTML =
        "<p>" + "PAUSE" + "</p>";
      computerPlays();
    }
    unPaused = !unPaused;
  });

  //event handling function for switching modes
  document.getElementById("modeSwitch").addEventListener("click", function() {
    strictMode = !strictMode;
  });

  //event handling functions for green, red, yellow and blue simon buttons
  document.getElementById("green-button").addEventListener("click", function() {
    playGreen();
    userClicks.push(0);
    if (computerMoves[userClicks.length - 1] === 0) {
      //user presses correct button
      if (userClicks.length === currentLevel) {
        if (currentLevel === highestLevel) {
          //if user won
          document.getElementById("msgBox").innerHTML = userWon;
          endGame();
        } else {
          //if this is the last user move
          userClicks = [];
          currentLevel++;
          updateCounter();
          computerPlays();
        }
      }
    } else {
      if (strictMode) {
        //if computer is in strict Mode
        document.getElementById("msgBox").innerHTML = restartGame;
        backtoWelcome();
        userClicks = [];
        currentLevel = 1;
        updateCounter();
        computerPlays();
      } else {
        //if computer is in normal mode
        document.getElementById("msgBox").innerHTML = wrongButton;
        backtoWelcome();
        userClicks = [];
        computerPlays();
      }
    }
    //computerPlays();
  });

  document.getElementById("red-button").addEventListener("click", function() {
    playRed();
    userClicks.push(1);
    if (computerMoves[userClicks.length - 1] === 1) {
      if (userClicks.length === currentLevel) {
        //if this is the last user move
        if (currentLevel === highestLevel) {
          //if user won
          document.getElementById("msgBox").innerHTML = userWon;
          endGame();
        } else {
          userClicks = [];
          currentLevel++;
          updateCounter();
          computerPlays();
        }
      }
    } else {
      if (strictMode) {
        //if computer is in strict Mode
        document.getElementById("msgBox").innerHTML = restartGame;
        backtoWelcome();
        userClicks = [];
        currentLevel = 1;
        updateCounter();
        computerPlays();
      } else {
        //if computer is in normal mode
        document.getElementById("msgBox").innerHTML = wrongButton;
        backtoWelcome();
        userClicks = [];
        computerPlays();
      }
    }
  });

  document
    .getElementById("yellow-button")
    .addEventListener("click", function() {
      playYellow();
      userClicks.push(2);
      if (computerMoves[userClicks.length - 1] === 2) {
        if (userClicks.length === currentLevel) {
          //if this is the last user move
          if (currentLevel === highestLevel) {
            //if user won
            document.getElementById("msgBox").innerHTML = userWon;
            endGame();
          } else {
            userClicks = [];
            currentLevel++;
            updateCounter();
            computerPlays();
          }
        }
      } else {
        if (strictMode) {
          //if computer is in strict Mode
          document.getElementById("msgBox").innerHTML = restartGame;
          backtoWelcome();
          userClicks = [];
          currentLevel = 1;
          updateCounter();
          computerPlays();
        } else {
          //if computer is in normal mode
          document.getElementById("msgBox").innerHTML = wrongButton;
          backtoWelcome();
          userClicks = [];
          computerPlays();
        }
      }
      //computerPlays();
    });

  document.getElementById("blue-button").addEventListener("click", function() {
    playBlue();
    userClicks.push(3);
    if (computerMoves[userClicks.length - 1] === 3) {
      if (userClicks.length === currentLevel) {
        //if this is the last user move
        if (currentLevel === highestLevel) {
          //if user won
          document.getElementById("msgBox").innerHTML = userWon;
          endGame();
        } else {
          userClicks = [];
          currentLevel++;
          updateCounter();
          computerPlays();
        }
      }
    } else {
      if (strictMode) {
        //if computer is in strict Mode
        document.getElementById("msgBox").innerHTML = restartGame;
        backtoWelcome();
        userClicks = [];
        currentLevel = 1;
        updateCounter();
        computerPlays();
      } else {
        //if computer is in normal mode
        document.getElementById("msgBox").innerHTML = wrongButton;
        backtoWelcome();
        userClicks = [];
        computerPlays();
      }
    }
    //computerPlays();
  });

  function playGreen() {
    playArray[0]();
  }

  function playRed() {
    playArray[1]();
  }

  function playYellow() {
    playArray[2]();
  }

  function playBlue() {
    playArray[3]();
  }

  function computerPlays() {
    //disable all buttons while computer goes through sequence
    disableAll();

    //this block creates a current level size array with green, red, yellow and blue buttons in sequence.
    var functionArray = computerMoves
      .slice(0, currentLevel)
      .map(function(button, index) {
        var timeOutID;
        //var tempFunc = playArray[button];
        return function() {
          timeOutID = setTimeout(playArray[button], waitTimes[index]);
        };
      });

    var timeOutID;
    functionArray.push(function() {
      timeOutID = setTimeout(function() {
        enableAll();
      }, waitTimes[currentLevel]);
    });

    functionArray.callAll();
  }
};

              
            
!
999px

Console