Simon Game

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

Play the classic game.

Thumbnail
This awesome code was written by natrivera, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright natrivera ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Simon Game</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="container-fluid">
    <div id="tittle">
      <h1 class="selector">Simon Game</h1></div>
    <div id="wrapper">
      <div class="inner">
        <div class="row">
          <div class="piece one" onClick="click" id="1"></div>
          <div class="piece two" onClick="click" id="2"></div>
        </div>
        <div class="row">
          <div class="piece three" onClick="click" id="3"></div>
          <div class="piece four" onClick="click" id="4"></div>
        </div>
      </div>
    </div>
    <div id="starter">
      
      <button id="start" onClick="click">Start</button>
      <span id="counter">0</span>
      <button id="strict" onClick="click">Strict: <i class="fa fa-circle" aria-hidden="true"></i></button>
      
    </div>
  </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/natrivera/simon-game-oeejNZ */
body {
  overflow: hidden;
  background-color: #1E90FF;
  
}
#tittle {
  margin-top: 1%;
  font: 400 100px/.5 'Pacifico', Helvetica, sans-serif;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
  text-align: center;
  color: #FFF;
}
h1 {
  margin: 0;
  padding: 0;
}
.selector {
  -webkit-transform: rotate(355deg);
  -moz-transform: rotate(355deg);
  -o-transform: rotate(355deg);
  transform: rotate(356deg);
}
.container-fluid {
  width: 100%;
  height: 100%;
  margin: 0%;
}

#wrapper {
  margin-top: 20px;
}

#starter {
  margin: 1%;
  text-align: center;
}
.inner {
  background-color: #000;
  border-radius: 600px;
  padding: auto;
  max-width: 500px;
  margin: auto;
  border-left: 10px solid #000;
  border-right: 10px solid #000;
}
#starter button {
  background-color: #005596;
  border: none;
  color: #FFF;
  border-radius: 100px;
  font-size: 1em;
  padding: 1% 2% 1% 2%;
  min-width: 95px;
}
#counter {
  display: inline-block;
  color: #fff;
  min-width: 100px;
  font-size: 2em;
}
.fa {
  color: red;
}

.piece {
  height: 50vw;
  width: 50%;
  max-width: 250px;
  max-height: 250px;
  padding: auto;
  opacity: .9;
}
.one {
  margin-left: auto;
  background-color: green;
  border-top-left-radius: 500px; 
  border-bottom: 15px solid #000;
  border-right: 15px solid #000;
  border-top: 20px solid #000;
  border-left: 20px solid #000;
}
.two {
  margin-right: auto;
  background-color: red;
  border-top-right-radius: 500px;
  border-bottom: 15px solid #000;
  border-left: 15px solid #000;
  border-top: 20px solid #000;
  border-right: 20px solid #000;
}
.three {
  margin-left: auto;
  background-color: yellow;
  border-bottom-left-radius: 500px;
  border-top: 15px solid #000;
  border-right: 15px solid #000;
  border-bottom: 20px solid #000;
  border-left: 20px solid #000;
}
.four {
  margin-right: auto;
  background-color: blue;
  border-bottom-right-radius: 500px;
  border-top: 15px solid #000;
  border-left: 15px solid #000;
  border-bottom: 20px solid #000;
  border-right: 20px solid #000;
}

/*Downloaded from https://www.codeseek.co/natrivera/simon-game-oeejNZ */
var arr = [];
var arr1 = [];
var welcome = "";
var x = 0;
var stopp = 0;
var random, wait, m, y, sound, audio, winner, checker, temp;
var started = false;
var playable = false;
var pause = false;
var strict = false;
var sound1 = "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3";
var sound2 = "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3";
var sound3 = "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3";
var sound4 = "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3";
var sound0 = "";

var soundarray = [sound0, sound1, sound2, sound3, sound4];

//flash and unflash the cell
function setDelay() {
  var aydeee = arr[x];
  $("#" + aydeee).css("opacity", ".1");
  $("#" + aydeee).css("opacity", ".1");
  audio = new Audio(soundarray[arr[x]]);
  audio.play();

  setTimeout(function() {
    $(".one").css("opacity", ".9");
    $(".two").css("opacity", ".9");
    $(".three").css("opacity", ".9");
    $(".four").css("opacity", ".9");
  }, 400);
} //end of setDelay

function move(num) {
  pause = false;
  x++;
  wait = setInterval(function() {
    if (pause === false) {
     // pause = true;
      //console.log(" "  + pause + x);
      var y = x - 2;
      if (x < num) {
        temp = $("#counter").html();
        temp = parseInt(temp);
        if (temp < x) {
          $("#counter").html(x);
          playable = true;
        } else {
          playable = false;
        }

          setDelay();

        x++;
      }
      if (check(x)) {
        arr1 = [];
        x = 1;
        num++;
      }
      if (num >= 22) {
        clearInterval(wait);
        $("#counter").html("You Win!!!");
      } //
      var numb = arr1.length + 1;
      if (numb >= 1 && !check(numb)) {
        checker = arr1.join("");
        winner = arr.join("");
        winner = winner.substring(1, numb);
        if (checker !== winner) {
          if(!strict) {          
            pause = true;
            arr1 = [];
            x = 1;
            $("#counter").html("|| ||");
            //console.log(pause + "before" + x);
            var reUp = setTimeout(function() {
              $("#counter").html("0");
              pause = false;
              //console.log(pause + "after" + x);
            }, 800);
            playable = false; 
          } else {
            $("#counter").html("|| ||");
            var fail = setTimeout(function() {
               stop(); 
            }, 800);
          }
        }//end of WRONG
      }
    }
    
     // pause = false;
   
  }, 500);
}//end of move

function game() {
  move(2);
} // end of Game////

function check(h) {
  var bool = false;
  checker = arr1.join("");
  winner = arr.join("");
  winner = winner.substring(1, h);
  //console.log("" + checker + "---" + winner);
  if (winner == checker) {
    bool = true;
  }
  return bool;
}//end of check

function stop() {
  if (started) {
    arr = [];
    $("#counter").html("0");
  }
  $(".one").css("background-color", "green");
  $(".two").css("background-color", "red");
  $(".three").css("background-color", "yellow");
  $(".four").css("background-color", "blue");
  $(".one").css("opacity", ".9");
  $(".two").css("opacity", ".9");
  $(".three").css("opacity", ".9");
  $(".four").css("opacity", ".9");
  clearInterval(wait);
  x = 0;
  stopp = 20;
  started = false;
  checker = "";
  arr1 = [];
}//end of stop

//start the game
$("#start").click(function() {
  stop();
  //add 20 numbers to an array
  for (var i = 0; i < 20; i++) {
    random = Math.floor(Math.random() * 4) + 1;
    arr.unshift(random);
  }
  stop();
  started = true;
  game();
});

//reset the game
$("#stop").click(function() {
  stop();
});

//when a piece is clicked display and add move to user array
$(".piece").click(function() {
  if (started && playable) {
    pause = true;
    //get the id of the clicked piece and show it
    var aydee = this.id;
    $("#" + aydee).css("opacity", ".2");
    $("#" + aydee).css("opacity", ".2");
    arr1.push(aydee);
    
    audio = new Audio(soundarray[aydee]);
    audio.play();

    //delay the return to opacity
    var piecewait = setTimeout(function() {
      $("#" + aydee).css("opacity", ".9");
      pause = false;
    }, 400); //
  }
});

//toggle strict on and off
$("#strict").click(function() {
  if(strict) {
    strict = false;
    $(".fa").css("color" , "red");
  } else {
    strict = true;
    $(".fa").css("color" , "yellow");
  }
  //
});

Comments