Simon

In this example below you will see how to do a Simon with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by balcoder, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright balcoder ©
  • HTML
  • CSS
  • JavaScript
    <body>
  <div id="wrapper">

    <div class=" container game-container">
      <div id="title" class="row col-xs-12 text-center">
        <h1>Simon Game</h1>
      </div>
      <div class="row controls text-center">
        <div class="col-xs-4">
          <div id="start" class="circle-button">start</div>
          <div id="restart">Restart</div>
        </div>
        <div class="col-xs-4">
          <!-- <div id="strict" class="circle-button">Strict</div> -->
          <div id="strict">
            <!-- Rounded switch -->
            <label class="switch">
              <input type="checkbox">
              <span id="toggle" class="slider round"></span>
            </label>
            <div id="strictmode">Strict Mode</div>
          </div>
        </div>
        <div class="col-xs-4">
          <div id="count" class="circle-button"></div>
            <div id="count-text">Count</div>
        </div>

      </div>
      <div class="row">

        <div  id="blue" class="col-xs-6 gameBtn blue"></div>
        <audio id="audioBlue" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" autostart="false" ></audio>

        <div id="red" class="col-xs-6 gameBtn red"></div>
        <audio id="audioRed" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" autostart="false" ></audio>
      </div>
      <div class="row">

        <div id="green" class="col-xs-6 gameBtn green"></div>
        <audio id="audioGreen" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" autostart="false" ></audio>

        <div  id="yellow" class="col-xs-6 gameBtn yellow"></div>
        <audio id="audioYellow" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" autostart="false" ></audio>
      </div>
      <audio id="audioBuzzer" src="http://dbwebworks.ie/sites/default/files/freecodecamp/sounds/fail-buzzer-04.mp3" autostart="false" ></audio>
    </div>



  </div>
</body>


/*Downloaded from https://www.codeseek.co/balcoder/simon-oovLvq */
    $color-teal-base: #008081;

$color-light-red: #FF5959;
$color-light-blue: #34AEF7;
$color-light-yellow: #FFFB8D;
$color-light-green: #B7F8BB;



html, body {
  height: 100%;
  margin: 0;
}

.center-me {
  margin: 0 auto;
  width: 50%;
}

.test {
  margin: auto;
  width: 50%;
  border: 3px solid #fff;
}

.game-container {
  margin: 0 auto;
  width: 50%;
  border: 3px solid #444444;
  border-radius: 50px;
  background-color: #3C3744;
  background-image: url("https://image.freepik.com/free-vector/carbon-fiber-background_23-2147491257.jpg");
  color: #ffffff;
}
.controls {
  padding: 20px;
}
.circle-button {
    display:block;
    cursor: pointer;
    width:50px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.circle-button:hover {
    background: #262626;
}

// toggle switch for strict mode
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

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

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

/* Rounded sliders */
.slider.round {
    border: 2px solid #f5f5f5;
  border-radius: 34px;
}

.slider.round:before {
    border: 2px solid #f5f5f5;
  border-radius: 50%;
}

.redLight {
  background-color: $color-light-red;
  border-radius: 0px 50px 0px 50px;
  box-shadow: 0 5px #555;
  padding: 20px;
  height: 120px;
}
.blueLight {
  background-color: $color-light-blue;
  border-radius: 50px 0px 50px 5px;
  padding: 20px;
  height: 120px;
}
.yellowLight {
  background-color: $color-light-yellow;
  border-radius: 50px 0px 50px 0px;
  padding: 20px;
  height: 120px;
}
.greenLight {
  background-color: $color-light-green;
  border-radius: 0px 50px 0px 50px;
  padding: 20px;
  height: 120px;
}
div.red:active {
   background-color: #FF5959;
}
div.blue:active {
   background-color: #34AEF7;
}
div.yellow:active {
   background-color: #FFFB8D;
}
div.green:active {
   background-color: #B7F8BB;
}

#wrapper {
  min-height: 100%;
  padding: 50px 0;
  background: linear-gradient(180deg, #E0E2E5, #919397);
}
#redSimon {
    border-radius: 0px 50px 0px 50px;
    box-shadow: 0 5px #555;
    background: #FF5959; //red
    padding: 20px;
    //width: 200px;
    height: 120px;
}

//rcornerst
.red {
    border-radius: 0px 50px 0px 50px;
    box-shadow: 0 5px #555;
    background: #BE0000; //red
    padding: 20px;
    //width: 200px;
    height: 120px;
}
//lcornerst
.blue {
    border-radius: 50px 0px 50px 5px;
    background: #0193E9; //blue
    padding: 20px;
    //width: 200px;
    height: 120px;
}
//rcornersb
.yellow {
    border-radius: 50px 0px 50px 0px;
    background: #FAF200; //yellow
    padding: 20px;
    //width: 200px;
    height: 120px;
}
//lcornersb
.green {
    border-radius: 0px 50px 0px 50px;
    background: #61DB6C; //green
    padding: 20px;
    //width: 200px;
    height: 120px;
}
#start {
  margin:auto;
}
#count {
  margin:auto;
}
#count-text{
  font-size:16px;
  font-weight:bold;
}
#strict {
  font-size:16px;
  font-weight:bold;
}
#restart {
  font-size:16px;
  font-weight:bold;
}
#strictmode {
  padding-top: 5px;
}



/*Downloaded from https://www.codeseek.co/balcoder/simon-oovLvq */
    // When start button is pressed call simonPlay() to add a random button id to
// the simon array and play that sequence with timeouts
// When button is clicked play the audio, increment the counter and check the
// that the sequence matches the simon array
"use strict";

document.addEventListener('DOMContentLoaded', function() {
  //set up variables
  var reset = 0;
  var simonArr = [];
  var playerArr = [];
  var playerCnt = 0;
  var displayCounter = 0;
  var strictMode = false;
  // get the id's of all the buttons
  var blueButton = document.getElementById('blue');
  var redButton = document.getElementById('red');
  var greenButton = document.getElementById('green');
  var yellowButton = document.getElementById('yellow');
  var displayCntId = document.getElementById('count');
  var title = document.getElementById('title');
  var buttonIds = [blueButton, redButton, greenButton, yellowButton];
  // get the id's of all the audio
  var blueSound = document.getElementById('audioBlue');
  var redSound = document.getElementById('audioRed');
  var greenSound = document.getElementById('audioGreen');
  var yellowSound = document.getElementById('audioYellow');
  var buzzer = document.getElementById('audioBuzzer');
  // add click event for start button
  var startBtn = document.getElementById('start');
  startBtn.addEventListener("click", start);
  // add click event for toggle strict mode
  var toggle = document.getElementById('toggle');
  toggle.addEventListener('click', function(){
    if(strictMode === false){
      strictMode = true;
    } else {
      strictMode = false;
    }
    start();
  });

  blueButton.addEventListener("click",playBlue);
  function playBlue() {
    blueSound.play();
    playerArr.push(blueButton);
    playerCnt++;
    checkSeq(blueButton);
  }

  redButton.addEventListener("click",playRed);
  function playRed() {
    redSound.play();
    playerArr.push(redButton);
    playerCnt++;
    checkSeq(redButton);
  }

  greenButton.addEventListener("click",playGreen);
  function playGreen() {
    greenSound.play();
    playerArr.push(greenButton);
    playerCnt++;
    checkSeq(greenButton);
  }

  yellowButton.addEventListener("click",playYellow);
  function playYellow() {
    yellowSound.play();
    playerArr.push(yellowButton);
    playerCnt++;
    checkSeq(yellowButton);
  }

  // check for correct sequence of presses
  function checkSeq(btnPressed){
    if(comparePressed(btnPressed) && playerArr.length !== simonArr.length) {
        //do nothing
    } else if (!comparePressed(btnPressed) && !strictMode) {
        simonReplay();
    } else if (!comparePressed(btnPressed) && strictMode) {
        buzzer.play();
        setTimeout(function() {
          start();
        },1000)
    }
     else {
        simonPlay();
    }
  }

  function comparePressed(btnPressed) {
    if (simonArr[playerCnt-1] === btnPressed){
      return true;
    } else{
      return false;
    }
  }

  // when start button pressed
  function start() {
    var count = 0;
    playerCnt = 0;
    // reset array
    simonArr = [];
    simonPlay();
    ++count;
    }

    // gets random button, adds to array and sets timeout for simonPress()
    function simonPlay() {
      // check for win
      if(simonArr.length === 20){
        title.innerHTML = "<h1>Reached 20 You Win</h1>";
        setTimeout(function(){
          title.innerHTML = "<h1>Simon Game</h1>";
          start();
        }, 2000);
        return;
      }
      //reset player count & array
      playerCnt = 0;
      playerArr = [];
      displayCntId.innerHTML = simonArr.length;
      var randomBtnId = buttonIds[Math.floor(Math.random() * buttonIds.length)];
      simonArr.push(randomBtnId);
      var interval = 1200;
      var increment = 1;
      simonArr.forEach(function(id){
        var runner = setTimeout(function(){
          simonPress(id);
          clearTimeout(runner);
        },  interval * increment++);
      });

    }
    // replay the sequence when player gets it wrong
    function simonReplay() {
      playerCnt = 0;
      playerArr = [];
      buzzer.play();
      var interval = 1200;
      var increment = 1;
      simonArr.forEach(function(id){
        var runner = setTimeout(function(){
          simonPress(id);
          clearTimeout(runner);
        },  interval * increment++);
      });
    }
    // takes an id, plays sound and flashes button
    function simonPress(id) {
        switch(id){
          case blueButton:
            blueSound.play();
            id.className = "col-xs-6 gameBtn blueLight";
            setTimeout(revertButton, 1000, "col-xs-6 gameBtn blue");
            break;
          case redButton:
            redSound.play();
            id.className = "col-xs-6 gameBtn redLight";
            setTimeout(revertButton, 1000, "col-xs-6 gameBtn red");
            break;
          case greenButton:
            greenSound.play();
            id.className = "col-xs-6 gameBtn greenLight";
            setTimeout(revertButton, 1000, "col-xs-6 gameBtn green");
            break;
          case yellowButton:
            yellowSound.play();
            id.className = "col-xs-6 gameBtn yellowLight";
            setTimeout(revertButton, 1000, "col-xs-6 gameBtn yellow");
            break;
        }
        function revertButton(buttonClass) {
          id.className = buttonClass;
        }
    }
});


Comments