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 captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©
  • HTML
  • CSS
  • JavaScript
    <div class = "container-fluid">
 <div class = "col-xs-12">
  <div class = "row">
    <div class="pusher"></div>
     <div class = "boardContainer">
      
       
       <div class = "outerCircle">
         
         
         <div class="greenButton" id="green"></div>
         <div class="redButton" id="red"></div>
         
         <div class="innerCircle">
            
             <h1 class="text-center"><strong>Simon ®</strong></h1>
       <h5 class="labelStart"><strong>Start</strong></h5>
       <div class="strictLight" id="strictLight"></div>
       <div class="moveCount">
         <h3 class="text-center" id="counter"> - - </h3>
       </div>
       <div class="startButton" id="startButton"></div>
       
       <div class="strictButton" id="strictButton"></div>
       <h5 class="labelCount"><strong>Count</strong></h5>
       
       <h5 class="labelStrict"><strong>Strict<strong></h5>
       <h5 class="labelOff">Off</h5>
        <div class="switchContainer" id="onOff">
          <div class="switch" id="onSwitch"></div>
         </div>
         <h5 class="labelOn">On</h5> 
           
         </div>  
         
         <div class="yellowButton" id = "yellow"></div>
         <div class="blueButton" id = "blue"></div>
         
        
         
           
       </div>
          
    </div>
    
   </div>  
 </div>  
</div>  

/*Downloaded from https://www.codeseek.co/captnstarburst/simon-andxae-jVEaby */
    html, body{
 background-image: url('https://g02.a.alicdn.com/kf/HTB13QSqKFXXXXbwaXXXq6xXFXXXb/Ceramic-kiln-mosaic-tile-bathroom-cobblestone-background-wall-puzzle-wallpaper-wall-stickers.jpg');
   -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
}

.pusher{
  height: 50px;
}

.boardContainer{
  width: 500px;
  height: 500px;
/*   border: 1px solid black; */
  margin: auto;
}

.outerCircle{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 20px solid black;
  background: black;
}
.greenButton{
  background-color: #276550;
  display: inline-block;
  border: 1px solid black;
  width: 49.5%;
  height: 49.5%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
  z-index: -1;
}
.redButton{
  background-color: #61291a;
  border: 1px solid black;
  display: inline-block;
  width: 49.5%;
  height: 49.5%;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 0%;
  border-left: 10px solid black;
  border-bottom: 10px solid black;
  z-index: -1;
}
.yellowButton{
  background-color: #a6936b;
  display: inline-block;
  border: 1px solid black;
  width: 49.5%;
  height: 49.5%;
  border-top-right-radius: 0%;
  border-bottom-left-radius: 100% ;
  border-bottom-right-radius: 0%;
  border-top: 10px solid black;
  border-right: 10px solid black;
  z-index: -1;
}
.blueButton{
  background-color: #14676d;
  display: inline-block;
  border: 1px solid black;
  width: 49.5%;
  height: 49.5%;
  border-top-right-radius: 0%;
  border-bottom-left-radius: 0% ;
  border-bottom-right-radius: 100%;
  border-top: 10px solid black;
  border-left: 10px solid black;
  z-index: -1;
}
.innerCircle{
  
  width:220px;
  height:220px;
  position : absolute;
  border-radius:100%;
  top:50%;
  left:50%;
  margin: -100px 0 0  -110px;
  background-color:#ECE7EE;
  border: 10px solid black;
}

.labelStart{
  margin: 0 auto;
  border: solid black;
  width: 20%;
}

.strictLight{
  width: 3%;
  height: 3%;
  border-radius: 50%;
  background: black;
  margin: -7% 75%; 
   border: 1px solid black; 
}

.moveCount{
  width :20%;
  height: 20%;
  background: black;
  border-radius: 30%;
  margin: 8% 8%; 
}

.startButton{
  width: 10%;
  height: 10%;
  border: 2px solid black; 
  border-radius: 50%;
  background:  red;
  margin: -25% 45%; 
}

.strictButton{
   width: 10%;
   height: 10%;
  border-radius: 50%;
  background: yellow;
  margin: 15% 71%; 
border: 2px solid black;
  
}
.labelCount{
  margin: -4% 9%; 
/*   border: solid black; */
  width: 25%; 
}

.labelStrict{
  margin: -12% 67%;
/*   border: solid black; */
  width: 22%; 
}
.labelOff{
  margin: 20% 29%; 
/*   border: solid black; */
 width: 11%; 
}

.switchContainer{
  width: 20%;
  height: 10%;
/*   border: 2px solid black; */
  background: black;
  margin: -30% 41%;
  border-radius: 20%;
}

.labelOn{
  margin: 21% 62%; 
/*   border: solid black; */
  width: 12%; 
}


.switch{
  width: 55%;
  height: 100%;
  background: red;
  border: 2px solid black;
}

@media(max-width: 500px){
  .boardContainer{
    width: 400px;
    height: 400px;
  }
}
@media(max-width: 500px){
  .redButton{
    width: 49.1%;
  }
  .blueButton{
    width:49.1%;
  }
}
@media(max-width: 400px){
  .boardContainer{
    width: 300px;
    height: 300px;
  }
  
  .innerCircle{
    width:130px;
    height:130px;
    top:50%;
    left:50%;
    margin: -40px 0 0  -65px;
  }
  .redButton{
    width: 48.9%;
  }
  .blueButton{
    width:48.9%;
  }
  h1{
    font-size: 0.93em;
  }
  h5{
    font-size: 0.7em;
  }
  h3{
    font-size: 0.9em;
  }
  .labelStart{
   width: 26%; 
  }
  .moveCount{
   margin:  -15% 10%;
  }
  .startButton{
    margin: -15% 45%;
  }
  .strictButton{
    margin: 6% 71%; 
  }
  
}


/*Downloaded from https://www.codeseek.co/captnstarburst/simon-andxae-jVEaby */
    $(document).ready(function() {
  var on = false;
  var strict = false;
  var counter = 0;
  var currentState;

  $("#onOff").on("click", function() {
    if (on) {
      // turn board off
      on = false;
      strict = false;
      clearAll();
      offState();
    } else {
      // turn board On
      on = true;
      onState();

    }
  });

  $("#strictButton").on("click", function() {
    currentState = getState();
    if (on && currentState === "on") {
      //only run if on and proper state
      if (strict) {
        // strict is on turn off
        strict = false;
        $("#strictLight").css("background", "black");
      } else {
        // strict is off turn on
        strict = true;
        $("#strictLight").css("background", "yellow");
      }
    }
  });

  $("#startButton").on("click", function() {
    currentState = getState();
    if (on && currentState === "on") {
      // only run if on and proper state
      fillArray();
      stateChange("playing");
      flashMessage("! !", 2, "0 0");
    }
  });

  $("#green").on("click", function() {
    currentState = getState();
    arr = getArray();

    if (currentState === "waiting") {
      stateChange("checking");
      clearWait();

      if (arr[counter] === 0) {
        var c = getCount();
        buttonPress(0);
        counter++;

        if (counter === c) {

          if (counter === 20) {
            gameWin();
            ///to do
          } else {

            setTimeout(function() {
              stateChange("playing");
              increaseCount();
              counter = 0;

            }, 1000);
          }
        } else {
          stateChange("waiting");
          waitForInput();
        }
      } else {
        counter = 0;

        if (strict) {
          fillArray();
          flashMessage("! !", 3, "0 0");
        } else {
          var int = getCount() - 1;
          var str = int.toString();
          flashMessage("! !", 3, str);
        }
      }
    }
  });

  $("#red").on("click", function() {
    currentState = getState();
    arr = getArray();

    if (currentState === "waiting") {
      stateChange("checking");
      clearWait();

      if (arr[counter] === 1) {
        var c = getCount();
        buttonPress(1);
        counter++;

        if (counter === c) {

          if (counter === 20) {
            gameWin();
            ///to do
          } else {

            setTimeout(function() {
              stateChange("playing");
              increaseCount();
              counter = 0;

            }, 1000);
          }
        } else {
          stateChange("waiting");
          waitForInput();
        }
      } else {
        counter = 0;

        if (strict) {
          fillArray();
          flashMessage("! !", 3, "0 0");
        } else {
          var int = getCount() - 1;
          var str = int.toString();
          flashMessage("! !", 3, str);
        }
      }
    }
  });

  $("#yellow").on("click", function() {
    currentState = getState();
    arr = getArray();

    if (currentState === "waiting") {
      stateChange("checking");
      clearWait();

      if (arr[counter] === 2) {
        var c = getCount();
        buttonPress(2);
        counter++;

        if (counter === c) {

          if (counter === 20) {
            gameWin();
            ///to do
          } else {

            setTimeout(function() {
              stateChange("playing");
              increaseCount();
              counter = 0;

            }, 1000);
          }
        } else {
          stateChange("waiting");
          waitForInput();
        }
      } else {
        counter = 0;

        if (strict) {
          fillArray();
          flashMessage("! !", 3, "0 0");
        } else {
          var int = getCount() - 1;
          var str = int.toString();
          flashMessage("! !", 3, str);
        }
      }
    }
  });

  $("#blue").on("click", function() {
    currentState = getState();
    arr = getArray();

    if (currentState === "waiting") {
      stateChange("checking");
      clearWait();

      if (arr[counter] === 3) {
        var c = getCount();
        buttonPress(3);
        counter++;

        if (counter === c) {

          if (counter === 20) {
            gameWin();
            ///to do
          } else {

            setTimeout(function() {
              stateChange("playing");
              increaseCount();
              counter = 0;

            }, 1000);
          }
        } else {
          stateChange("waiting");
          waitForInput();
        }
      } else {
        counter = 0;

        if (strict) {
          fillArray();
          flashMessage("! !", 3, "0 0");
        } else {
          var int = getCount() - 1;
          var str = int.toString();
          flashMessage("! !", 3, str);
        }
      }
    }
  });

});

var gameArr = [];
var state = "off";

var flashInterval;
var countInterval;
var waitingTimeout;
var sequenceTimeout;

function onState() {
  $("#onSwitch").css("margin", "0 50%");
  $("#counter").css("color", "red");
  stateChange("on");
}

function offState() {
  $("#onSwitch").css("margin", "0 0");
  $("#counter").text("- -");
  $("#counter").css("color", "gray");
  $("#strictLight").css("background", "black");
  stateChange("off");
}

function stateChange(change) {
  state = change;
}

function getState() {
  return state;
}

function fillArray() {
  gameArr = [];
  for (i = 0; i < 20; i++) {
    gameArr.push(randomNumber());
  }

  console.log("gameArray " + gameArr);
}

function getArray() {
  return gameArr;
}

function randomNumber() {
  return Math.floor(Math.random() * 4);
}

function flashMessage(msg, times, next) {
  var count = 0;

  function repeat() {
    $("#counter").text(msg);
    $("#counter").css("color", "gray");

    setTimeout(function() {
      $("#counter").css("color", "red");
      if (count > times) {
        clearInterval(flashInterval);
        $("#counter").text(next);
        increaseCount();
      }
    }, 250);
  }
  flashInterval = setInterval(function() {
    repeat();
    count++;

  }, 500);
}

function getCount() {
  var str = $("#counter").text().replace(" ", "");
  var int = parseInt(str);
  return int;
}

function increaseCount() {
  var int = getCount();
  int++;
  var str = int.toString();

  if (str.length === 1) {
    str = "0 " + str;
  } else {
    str = str.charAt(0) + " " + str.charAt(1);
  }

  countInterval = setTimeout(function() {
    $("#counter").text(str);
    gamePlay();
  }, 200);
}

function gamePlay() {

  var arr = getArray();
  var c = getCount();

  for (i = 0; i < c; i++) {
    /* jshint loopfunc: true */
    (function(i) {
      sequenceTimeout = setTimeout(function() {
        buttonPress(arr[i]);
      }, 1000 * i);
    }(i));
    if (i === c - 1) {
      stateChange("waiting");
      waitForInput();
    }
  }

}

function buttonPress(int) {
  if (int === 0) {

    $("#green").css("background-color", "#40a482");
    // $("#green").css("border-color", "white");

    playAudio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");

    setTimeout(function() {
      $("#green").css("background-color", "#276550");

    }, 400);

  } else if (int === 1) {

    $("#red").css("background-color", "#a3452c");
    // $("#red").css("border-color", "white");
     playAudio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");

    setTimeout(function() {
      $("#red").css("background-color", "#61291a");
    }, 400);

  } else if (int === 2) {

    $("#yellow").css("background-color", "#d7c36f");
    // $("#yellow").css("border-color", "white");
    playAudio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");

    setTimeout(function() {
      $("#yellow").css("background-color", "#a6936b");
    }, 400);

  } else {

    $("#blue").css("background-color", "#21a4ae");
    // $("#blue").css("border-color", "white");
    playAudio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");

    setTimeout(function() {
      $("#blue").css("background-color", "#14676d");
    }, 400);
  }

}

function playAudio(url) {

  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;

  audio.autoplay = true;
  audio.onended = function() {
    audio.remove(); //Remove when played.
  };

  document.body.appendChild(audio);
}

function waitForInput() {

  var times = [15000, 10000, 5000];
  var c = getCount();
  var multi = c * 1000;
  var int;
  var str;

  if (c < 10) {
    waitingTimeout = setTimeout(function() {
      // timeOut reached
      //alert("timeout0");
      int = getCount() - 1;
      str = int.toString();
      flashMessage("! !", 3, str);

    }, multi + times[0]);

  } else if (c < 16) {
    waitingTimeout = setTimeout(function() {
      // timeOut reached
      //alert("timeout1");
      int = getCount() - 1;
      str = int.toString();
      flashMessage("! !", 3, str);
    }, multi + times[1]);
  } else {
    waitingTimeout = setTimeout(function() {
      // timeOut reached
      //alert("timeout2");
      int = getCount() - 1;
      str = int.toString();
      flashMessage("! !", 3, str);
    }, multi + times[2]);
  }

}

function gameWin() {
  var arr = [0, 1, 3, 2, 0, 1, 3, 2];
  var flashCount = 0;
  var seqCount = 0;

  for (i = 0; i < arr.length; i++) {
    buttonPress(arr[i]);
  }

  function repeat() {
    $("#counter").text("! !");
    $("#counter").css("color", "gray");

    setTimeout(function() {
      $("#counter").css("color", "red");
      if (flashCount > 4) {
        clearInterval(flashInterval);
        $("#counter").text("- -");
        stateChange("on");

      }
    }, 250);
  }
  flashInterval = setInterval(function() {
    repeat();
    flashCount++;

  }, 500);

  while (seqCount !== 2) {
    for (i = 0; i < arr.length; i++) {
      (function(i) {
        sequenceTimeout = setTimeout(function() {
          buttonPress(arr[i]);
        }, 1000 * i);
      }(i));
      if (i === arr.length - 1) {
        seqCount++;
      }

    }
  }

}

function clearWait() {
  clearTimeout(waitingTimeout);
}

function clearAll() {
  // clear any intervals that may be running
  gameArr = [];
  state = "off";
  clearInterval(flashInterval);
  clearInterval(countInterval);
  clearTimeout(sequenceTimeout);
  clearTimeout(waitingTimeout);
}

Comments