Simon Game

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

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

Technologies

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

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

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Russo+One" rel="stylesheet">
<audio id="green">
  <source src="http://res.cloudinary.com/alangecodemaster/video/upload/v1520835816/tone1_agrrjc.wav">
</audio>
<audio id="red">
  <source src="http://res.cloudinary.com/alangecodemaster/video/upload/v1520835816/tone2_ie6ayy.wav">
</audio>
<audio id="yellow">
  <source src="http://res.cloudinary.com/alangecodemaster/video/upload/v1520835816/tone3_t1b5em.wav">
</audio>
<audio id="blue">
  <source src="http://res.cloudinary.com/alangecodemaster/video/upload/v1520835816/tone4_f0xvmu.wav">
</audio>

<div class="black-plastic">
  <div class="game-controls">
    <h1>SIMON</h1>
    <div class="counter"><p class="numbers">--</p></div>
    <div class="game-functions">
      <div class="start-stop">
        <button onclick="runComp()"></button>
        <p>START</p>
      </div>
      <div class="mode">
        <button id='strict' onclick='strictModeSet()'></button>
        <p>STRICT</p>
      </div>
      <div class="on-off">
        <button id="on-off" onclick="turnGameOnOff();"></button>
        <p>ON/OFF</p>
      </div>
    </div>
  </div>
  <div class="top">
    <div class="buttons green" onclick="buttonClicks('green')"></div>
    <div class="buttons red" onclick="buttonClicks('red')"></div>
  </div>
  <div class="bottom">
    <div class="buttons yellow" onclick="buttonClicks('yellow')"></div>
    <div class="buttons blue" onclick="buttonClicks('blue')"></div>
  </div>
</div>

<div class="instructions">
  <div class="open" onclick="openClose('open')">
    OPEN RULES
  </div>
  <div class="close-wrapper"></div>
  <div class="close" onclick="openClose('close')">
      CLOSE
  </div>
  <div class="instruction-text">
    <h2>WELCOME TO THE GAME OF SIMON</h2>
    <p>GAME EXPLANATION:</p>
    <ol>
      <li>Your objective is to follow the pattern the computer sets by clicking on the buttons in the same order.</li>
      <li>If you get to 20, you win!</li>
      <li>If you take too long to remember the pattern, you lose.</li>
      <li>If you mess up the pattern, you lose.</li>
    </ol>
    <p>HOW TO PLAY:</p>
    <ol>
      <li>Turn on the game.</li>
      <li>You may play in "strict" mode, which means if you fail, the game will go right back into playing with a new sequence.</li>
      <li>Give each click about a second to register, especially when repeating a color. Each sound plays for a full second and won't play again unless you give it time to finish.</li>
      <li>If you do press a button and don't hear a sound, the click was registered. Go on to the next color. Pressing it again to hear a sound will make the game result in a fail if it isn't part of the sequence.</li>
    </ol>
  </div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/alangecodemaster/simon-game-RQMwGj */
body{
  background-image: url('http://res.cloudinary.com/alangecodemaster/image/upload/v1520202474/green-energy_rwc5xu.jpg');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  padding: 100px 0;
  position: relative;
  margin: 0;
}
.black-plastic{
  width: 450px;
  background: #121111;
  height: 450px;
  border-radius: 50%;
  margin: 25px auto;
  position: relative;
  border: 15px solid #121111;
}
.game-controls{
  background: #fafafa;
  width: 225px;
  height: 225px;
  border-radius: 50%;
  z-index: 100;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left:50%;
  right: 50%;
  transform: translate(-50%,-50%);
  border: 20px solid #121111;
}
h1{
  text-align: center;
  margin-top: 25px;
}
.counter{
  font-family: 'Russo One', sans-serif;
  margin: 0 auto;
  text-align: center;
  background-color: black;
  width: 60px;
  padding: 5px;
  color: red;
  font-size: 20px;
  letter-spacing: 7px;
}
.counter p{
  margin-left: 13%;
  display: inline;
}
.start-stop, .mode, .on-off{
  display: inline-block;
  margin: 15px;
  text-align: center;
  font-family: 'Julius Sans One', sans-serif;
  letter-spacing: -1px;
  font-size: 12px;
}
button{
  with: 20px;
  height: 15px;
  background: white;
}
button:focus{
  outline: 0;
}
.start-stop{
  margin-left: 63px;
}
.on-off{
  display: block;
  margin-top: -20px;
}
.buttons{
  width: 203px;
  height: 203px;
  border: 10px solid #121111;
  display: inline-block;
}
.green{
  background-color: #379843;
  border-radius: 100% 0 0 0;
}
.red{
  background-color: #a30008;
  border-radius: 0 100% 0 0;
}
.yellow{
  background-color: #d9d284;
  border-radius: 0 0 0 100%;
}
.blue{
  background-color: #4e5fda;
  border-radius: 0 0 100% 0;
}
.bright-green{
  background: #2fff00;
}
.bright-red{
  background: #ff0004;
}
.bright-yellow{
  background: yellow;
}
.bright-blue{
  background: #0051ff;
}
.instructions{
  position: absolute;
  width: 0;
  top:0;
  bottom:0;
  right: 0;
  height: 100%;
  z-index:2000;
  transition: width .3s;
  overflow-y: scroll;
}
.instructions-open{
  width: 30%;
  border-left: 3px solid #068e46;
  background: black;
}
.instructions-open-too-far{
  width: 34%;
  background: black;
}
.open, .close{
  background: #068e46;
  padding: 10px;
  width: 100px;
  text-align: center;
  color: white;
  position: fixed;
  right: 10.5%;
  top: 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: .3s;
  margin-bottom: 25px;
  z-index:1001;
}
.close{
  display: none;
}
.close-wrapper{
  background: black;
  width: 100%;
  height: 90px;
  position: fixed;
  z-index: 1000;
}
.open:hover, .close:hover{
  background: rgba(6, 142, 70, .8);
}
.instruction-text{
  position: absolute;
  color: white;
  top: 15%;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 17px;
  font-family: "Arial";
  letter-spacing: 1px;
}
.instruction-text h2{
  text-align: center;
}
.instruction-text p{
  margin-top: 25px;
}
.instruction-text li{
  margin-bottom: 10px;
}

/*Downloaded from https://www.codeseek.co/alangecodemaster/simon-game-RQMwGj */
let gameOn = false,
    playing = false,
    randomComputerColor,
    counterToneInterval = 0,
    numberCompleted = 0,
    displayNumber,
    strictMode = false,
    compRunning = false,
    started = false,
    gameRunning = 1,
    playerTimeout,
    playerTimer,
    storedSequence = [],
    playerSequence = [];

function turnGameOnOff(){
  if(gameOn){
    gameOn = false;
    $('#on-off').style.background = "buttonface";
    $('.numbers').innerHTML = "--";
    $('#strict').style.background = 'buttonface';
    clearInterval(playerTimeout);
    resetGame();
  }else{
    gameOn = true;
    $('#on-off').style.background = "green";
    $('.numbers').innerHTML = "00";
  }
}

function runComp(){
  started = true;
  if (gameOn === false || compRunning || started === false){
    return;
  }
  compRunning = true;
  if(storedSequence.length < 20){
    playerSequence = [];
    randomComputerColor = randomizeColor();
    pushToArray(randomComputerColor, "comp");
    intervalSequence();
    numberCompleted++;
    switch(numberCompleted){
      case 1:
        displayNumber = "01";
        break;
      case 2:
        displayNumber = "02";
        break;
      case 3:
        displayNumber = "03";
        break;
      case 4:
        displayNumber = "04";
        break;
      case 5:
        displayNumber = "05";
        break;
      case 6:
        displayNumber = "06";
        break;
      case 7:
        displayNumber = "07";
        break;
      case 8:
        displayNumber = "08";
        break;
      case 9:
        displayNumber = "09";
        break;
      default:
        displayNumber = numberCompleted;
    }
    $(".numbers").innerHTML = displayNumber;
  }else{
    alert("You Got to 20! Ain't you da shizz...");
    resetGame();
    if(strictMode){
      runComp();
    }
  }
}

function player5Seconds(){
  playerTimer = 0;
  playerTimeout = setInterval(function(){
    playerTimer++;
    if(playerTimer == 5){
      endGame();
    }
  }, 1000);
}

function buttonClicks(associatedColor){
  playerTimer = 0;
  clearInterval(playerTimeout);
  pushToArray(associatedColor, "player");
  for(let i = 0; i < playerSequence.length; i++){
    if(playerSequence[i] != storedSequence[i]){
      endGame();
      return;
    }
  }
  playSound(associatedColor);
  if(playerSequence.length == storedSequence.length){
    runComp();
    return;
  }else{
    player5Seconds();
  }
}

function intervalSequence(){
  counterToneInterval = 0;
  let computerToneInterval = setInterval(function(){
    playSound(storedSequence[counterToneInterval]);
    if (counterToneInterval == storedSequence.length - 1){
      compRunning = false;
      setTimeout(player5Seconds,300);
      clearInterval(computerToneInterval);
    }
    counterToneInterval++;
  },1500);
}

function strictModeSet(){
  if(gameOn === false){
    return;
  }
  if(strictMode){
    strictMode = false;
    $('#strict').style.background = 'buttonface';
  }else{
    strictMode = true;
    $('#strict').style.background = 'yellow';
  }
}

function playSound(color){
  let classColor = "bright-" + color;
  $("#"+color).play();
  $("."+color).classList.add(classColor);
  setTimeout(function(){
    $("."+color).classList.remove(classColor);
  },300)
}

function randomizeColor(){
  let assignColor,
      randomGenerator = Math.floor((Math.random() * 4) + 1);
  switch (randomGenerator){
    case 1:
      assignColor = "green";
      break;
    case 2:
      assignColor = "red";
      break;
    case 3:
      assignColor = "yellow";
      break;
    case 4:
      assignColor = "blue";
      break;
  }
  return assignColor;
}

function pushToArray(newPushValue, compOrPlayer){
  if(compOrPlayer == "comp"){
    storedSequence.push(newPushValue);
  }else if(compOrPlayer == "player"){
    playerSequence.push(newPushValue);
  }
}
//replaces 'document.querySelector'every time I want to target certain elements.
function $(selector){
  return document.querySelector(selector);
}

function endGame(){
  alert("Game over, loser. Your score was " + displayNumber);
  clearInterval(playerTimeout);
  resetGame();
  if(strictMode){
    runComp();
  }
  return;
}

function resetGame(){
    if(gameOn){
      gameOn;
      $('.numbers').innerHTML = "00";
    }else{
      gameOn = false;
    }
    playing = false;
    randomComputerColor = null;
    counterToneInterval = 0;
    numberCompleted = 0;
    displayNumber = "00";
    if(strictMode){
      strictMode;
    }else{
      strictMode = false;
    }
    compRunning = false;
    gameRunning = false;
    started = false;
    clearInterval(playerTimeout);
    playerTimeout = null;
    playerTimer = 0;
    storedSequence = [];
    playerSequence = [];
}
//open - close instructions
function openClose(state){
  if(state == 'open'){
    $(".instructions").classList.add('instructions-open-too-far');
    setTimeout(function(){
      $(".instructions").classList.remove('instructions-open-too-far');
      $(".instructions").classList.add('instructions-open');
    },300);
    $(".open").style.display = "none";
    $(".close").style.display = "block";
  }else if(state == 'close'){
    $(".instructions").classList.add('instructions-open-too-far');
    setTimeout(function(){
      $(".instructions").classList.remove('instructions-open-too-far');
      $(".instructions").classList.remove('instructions-open');
    },200);
    $(".open").style.display = "block";
    $(".close").style.display = "none";
  }
}

// class Game{
//   let lives;
//   let _player => (userLives){
//     lives = userLives;
//   }
//   if(logic == hit){
//     _deathHappened();
//   }
//   function _deathHappened(){
//     lives--;
//   }
// }

// Game.new
// Game._player(3)
// Game.lives // 3
// Game.logic(hit)
// Game.lives // 2

Comments