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

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/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

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

  
</head>

<body>

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/bootstrap.switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css'>
 
      <link rel="stylesheet" href="css/style.css">
<div class="outer">
    <div class="middle">
      <div class="inner container text-center">
        <div class="row top20 txt"><small>Round</small><br /><span id="count">--</span></div>
        <div class="row">
          <div id="green" class="simon green">&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="simon red" id="red">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="row">
          <div class="simon yellow" id="yellow">&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="simon blue" id="blue">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="row top20">
          <button class="btn btn-sm" id="start">Start</button>
          <button class="btn btn-sm" id="reset">Reset</button>
        </div>
        <div><small>Strict Mode</small><br /><input id="strict-switch" type="checkbox" data-size="mini" data-on-text="On" data-off-text="Off" data-on-color="info"></div>
        <div>
          <div id="audio"></div>
          <div id="modal"></div>
        </div>
      </div>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/AbduAllah/simon-game-aYyBYM */
body { 
  background: url(https://www.raspberrypi.org/app/uploads/2015/07/Simon-DDR.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:white;
}

.top20 {
  padding: 20px;
}
 
.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
 
.middle {
  display: table-cell;
  vertical-align: middle;
}
 
.inner {
  margin-left: auto;
  margin-right: auto;
}
 
#count {
  font-weight: bold;
}
 
.simon {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
 
#green,
#red,
#yellow,
#blue {
  font-size: 5em;
}
 
.green {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
 
.red {
  background-color: #d9534f;
  border-color: #d43f3a;
}
 
.yellow {
  background-color: #f0ad4e;
  border-color: #eea236;
}
 
.blue {
  background-color: #337ab7;
  border-color: #2e6da4;
}
 
.green--active {
  background-color: #398439;
  border-color: #255625;
  transition: width 2s ease, height 2s ease;
}
 
.red--active {
  background-color: #ac2925;
  border-color: #761c19;
  transition: width 2s ease, height 2s ease;
}
 
.yellow--active {
  background-color: #d58512;
  border-color: #985f0d;
  transition: width 2s ease, height 2s ease;
}
 
.blue--active {
  background-color: #204d74;
  border-color: #122b40;
  transition: width 2s ease, height 2s ease;
}
 
.gameover {
  background-color: #ac2925;
  border-color: #761c19;
}
 
.winner {
  background-color: #398439;
  border-color: #255625;
}
 
small {
  color: white;
}
 
.txt {
  color: white;
}

/*Downloaded from https://www.codeseek.co/AbduAllah/simon-game-aYyBYM */
var game = [];
var squares = ["green", "red", "yellow", "blue"];
var step = 0;
var count = 0;
var speed = 800;
var strictmode = false;
 
var disableSquares = function(choice) {
    for (var y = 0; y < squares.length; y++) {
  if (choice) {
      document.getElementById(squares[y]).style.pointerEvents = 'none';
    } else {
      document.getElementById(squares[y]).style.pointerEvents = 'auto';
    }
  }
}
disableSquares(true);
 
// this function plays the sound
var playSound = function(color) {
  var noise;
  var audio = $('<audio autoplay></audio>');
  var soundurl = "http://lefkowitz.me/lab/simon/";
 
  if (squares.indexOf(color) > -1) {
    noise = squares.indexOf(color);
  } else if (color == "buzz") {
    noise = "buzz";
  } else {
    noise = "win";
  }
    audio.append("<source src='" + soundurl + noise + ".mp3'" + "/>");
    $("#sound").html(audio);
}
 
// this function plays the new round
var newRound = function() {
  disableSquares(true);
  // clears all active classes -- bug prevention
  for (var y = 0; y < squares.length; y++) {
      $("#"+squares[y]).removeClass(squares[y]+"--active")
    }
    // adds a new round to the end of the game array
  game.push(squares[Math.floor(Math.random() * squares.length)]);
  // updates current step count
  currentSteps();
  // starts playing from the first button
  playButton(game, 0);
}
 
// this function controls the animation and sound for each button press
var playButton = function(game, index) {
  if (step != 0) {
    if (index < game.length) {
 
      // check step count, speed up at 5th, 9th, and 13th step
      if (step == 5) {
        speed = 600;
      }
      if (step == 9) {
        speed = 400;
      }
      if (step == 13) {
        speed = 200;
      }
 
      // if this button exists, play it
      var color = game[index];
      $("#" + color).addClass(color + "--active", speed, function() {
        playSound(color);
        $("#" + color).removeClass(color + "--active", speed, function() {
          playButton(game, index + 1); // once this button was played, try to play the next button
        });
      });
    }
    if (index == game.length) {
      disableSquares(false);
    }
  }
}
 
// this function is for button clicks
var clickButton = function(color) {
  if (color == game[count]) {
    count++;
    if (count == game.length) {
      count = 0;
      newRound();
    }
  } else {
    if (strictmode == true) {
      loseGame();
    } else {
      // prevents user clicks
      disableSquares(true);
      playButton(game, 0);
      count = 0;
    }
  }
}
 
var loseGame = function() {
  playSound("buzz");
  $(".simon").addClass("gameover", function() {
    $(".simon").delay(1200).removeClass("gameover", function() {
      resetGame();
    });
  });
}
 
var winGame = function() {
  playSound("win");
  $(".simon").addClass("winner", function() {
    $(".simon").delay(1200).removeClass("winner", function() {
      resetGame();
    });
  });
}
 
// this function resets the game
var resetGame = function() {
  game = [];
  step = 0;
  count = 0;
  speed = 800;
  disableSquares(true);
  $("#start").prop("disabled", false);
  document.getElementById("count").innerHTML = "--";
}
 
// this function updates the current step count and plays winning animation
var currentSteps = function() {
  step += 1;
 
  if (step == 21) {
    winGame();
    return;
  }
  document.getElementById("count").innerHTML = step;
}
 
// click handler for guessing
$(".simon").click(function() {
  var currentId = $(this).attr('id');
  clickButton(currentId);
});
 
// controls the color change and sound on mouse clicks
$(".simon").mouseup(function() {
    var currentId = $(this).attr('id');
    $("#" + currentId).removeClass(currentId + "--active")
  })
  .mousedown(function() {
    var currentId = $(this).attr('id');
    $("#" + currentId).addClass(currentId + "--active")
    playSound(currentId);
  });
 
$("#start").click(function() {
  newRound();
  $("#start").prop("disabled", true);
})
 
$("#reset").click(function() {
  resetGame();
})
 
$('#strict-switch').bootstrapSwitch();
 
$('#strict-switch').on('switchChange.bootstrapSwitch', function() {
  strictmode = !strictmode;
});
 
$("body").backstretch("https://static.pexels.com/photos/7480/sky-night-stars.jpg")

Comments