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 GarrettPoore, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright GarrettPoore ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simon</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Simon Game</title>

    <meta name="description" content="A game of Simon says">
    <meta name="author" content="Garrett Poore">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--     <script src="scripts.js"></script>
    <script src="simon.js"></script> -->
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="game">
      <div id="green" class="color_button"></div>
      <div id="red" class="color_button"></div>
      <div id="yellow" class="color_button"></div>
      <div id="blue" class="color_button"></div>
      <div id="game_fill">
        <button type="start" id="start" class="center-absolute">Start</button>
        <button type="button" id="restart" class="center-absolute">Restart</button>
        <div id="strict_button" class="center-absolute">
          <input type="checkbox" id="strict" />
          <label for="strict">Strict</label>
        </div>
        <div id="round" class="center-absolute">-</div>
      </div>
    </div>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/GarrettPoore/simon-ZJqqgw */
body {
  --game_size: 600px;
  --game_fill_size: calc(var(--game_size) - 60%);
  --color_margin: calc(var(--game_size) - 95%);
  --color_size: calc(var(--game_size) / 2 - var(--color_margin));

  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */

  background: #191507;
  text-align: center;
}

#game {
  background: #a8a8a8;
  border-radius: 100%;
  box-shadow: inset 5px 5px 10px #777777, 3px 3px 8px #cecece, 1px 1px 3px #dbdbdb;
  height: var(--game_size);
  margin: auto;
  margin-top: 1%;
  margin-bottom: 1%;
  overflow: hidden;
  position: relative;
  width: var(--game_size);
}

.color_button {
  box-shadow: inset 2px 2px 2px black, 2px 2px 2px black;
  cursor: pointer;
  height: var(--color_size);
  width: var(--color_size);
}

#green {
  background: green;
  border-top-left-radius: 100%;
  float: left;
  margin-top: var(--color_margin);
  margin-left: var(--color_margin);
  position: relative;
}

#red {
  background: red;
  border-top-right-radius: 100%;
  float: right;
  margin-top: var(--color_margin);
  margin-right: var(--color_margin);
  position: relative;
}

#yellow {
  background: yellow;
  border-bottom-left-radius: 100%;
  float: left;
  margin-bottom: var(--color_margin);
  margin-left: var(--color_margin);
  position: relative;
}

#blue {
  background: blue;
  border-bottom-right-radius: 100%;
  float: right;
  margin-bottom: var(--color_margin);
  margin-right: var(--color_margin);
  position: relative;
}

#game_fill {
  background: #a8a8a8;
  border-radius: 100%;
  box-shadow: inset 5px 5px 10px #777777, 3px 3px 8px #cecece, 1px 1px 3px #dbdbdb;
  height: var(--game_fill_size);
  margin: auto;
  margin-top: 30%;
  width: var(--game_fill_size);
  position: relative;
  z-index: 5;
}

button {
  border-color: #444444;
  outline: none;
  padding: 1px;
  top: 25%;
  width: 15%;
}

.center-absolute {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}

#start {
  background: #4ef442;
  min-width: 3em;
}

#restart {
  background: #f46e41;
  display: none;
  min-width: 4em;
}

#round {
  cursor: default;
  font-size: 48pt;
  position: absolute;
  top: 35%;
}

#strict_button {
  background: #444444;
  border-radius: 25%;
  cursor: pointer;
  left: 0;
  margin: auto;
  min-width: 4em;
  position: absolute;
  right: 0;
  top: 75%;
  width: 30%;
}

#strict_button:hover {
  background: #262626;
}

#strict_button label {
  background: gray;
  border-radius: 25%;
  cursor: pointer;
  display: block;
  font-size: 16pt;
  height: 90%;
  margin: auto;
  margin-top: 2.5%;
  width: 90%;
}

#strict_button input[type=checkbox]:checked + label {
  background: #ba3a28;
}

#strict_text + input:checked {
  background: cyan;
}

input[type=checkbox] {
  display: none;
}


/*Downloaded from https://www.codeseek.co/GarrettPoore/simon-ZJqqgw */
//scripts.js
$(document).ready(function() {
  resizeGame();

  $(".color_button").click(function(event){
    if (!Simon.pause) {
      var color = event.target.id;
      onPressedColor(color);
    }
  });

  $("#start").click(function(){
    addRound();
    startPlayingSequence();

    $("#start").hide();
    $("#restart").show();
  });

  $("#restart").click(function(){
    resetGame();
    startPlayingSequence();
  });

  $("#strict").click(function(event){
    Simon.strict = this.checked;
  });

  $(window).resize(function(){
    resizeGame();
  });
});

function resizeGame() {
  var largestSq = Math.min(window.innerWidth, window.innerHeight);
  var suggestedSize = largestSq - 35;
  var newSize = Math.max(400, suggestedSize);
  $("body").get(0).style.setProperty("--game_size", newSize + "px");
}


//simon.js
COLORS = ["green", "red", "yellow", "blue"];

SOUNDS = Object.freeze({
  green: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
  red: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
  yellow: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
  blue: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"),
  failed: getFailedSound()
})

function getFailedSound() {
  var audio = new Audio("https://www.soundjay.com/button/button-10.mp3")
  audio.volume = 0.05;
  return audio;
}

function playSound(sound) {
  this.SOUNDS[sound].play();
}

var Simon = initSimon();

function initSimon() {
  var s = {};
  s.round = 0;
  s.sequence = [];
  s.playerCorrect = 0;
  s.pause = true;
  s.strict = false;
  return s;
}

function resetGame() {
  Simon = initSimon();
  addRound();
}

function addRound() {
  var index = Math.floor(Math.random() * 4)
  Simon.round += 1;
  Simon.sequence.push(COLORS[index]);
  Simon.playerCorrect = 0;
  $("#round").text(Simon.round);
}

function startPlayingSequence() {
  console.log(Simon.sequence);
  Simon.pause = true;
  playSequenceFromIndex(0);
}

function playSequenceFromIndex(index) {
  if (index < Simon.sequence.length) {
    var color = Simon.sequence[index];
    playSound(color);
    blinkSpace(color, function(){
      setTimeout(playSequenceFromIndex, 400, index + 1);
    });
  } else {
    Simon.pause = false;
  }
}

function blinkSpace(color, func) {
  $("#" + color).fadeTo(300, 0.6, function() {
    $("#" + color).fadeTo(300, 1, function() {
      if (func != undefined) {
        func();
      }
    });
  });
}

/*
* Creates & returns a function that will randomly blink a color and play the
* respective sound X number of times
*/
function makeWinningBlinks(max, num) {
  var color = COLORS[Math.floor(Math.random() * 4)];
  if (num == undefined) {num = 1;}

  if (num == max) {
    return function() {
      playSound(color);
      blinkSpace(color);
    }
  } else {
    return function() {
      playSound(color);
      blinkSpace(color, makeWinningBlinks(max, num+1));
    }
  }
}

function winGame() {
  var blinks = 20;
  var flashSpaces = makeWinningBlinks(blinks);
  flashSpaces();

  $("#round").text("WIN!");
  setTimeout(resetGame, blinks*650);
  setTimeout(startPlayingSequence, (blinks+1)*650);
}

function onPressedColor(color) {
  if (Simon.sequence[Simon.playerCorrect] == color) {
    //Success
    playSound(color);
    blinkSpace(color);
    Simon.playerCorrect += 1;

    //The last color was pressed
    if (Simon.playerCorrect == Simon.sequence.length) {
      Simon.pause = true;
      if (Simon.playerCorrect == 20) {
        //Winner!
        winGame();
      } else {
        addRound();
        setTimeout(startPlayingSequence, 2000);
      }
    }
  } else {
    //Failed
    playSound("failed");
    blinkSpace(color);

    if (Simon.strict) {
      resetGame();
      setTimeout(startPlayingSequence, 1000);
    } else {
      Simon.playerCorrect = 0;
      setTimeout(startPlayingSequence, 1000);
    }
  }
}

Comments