Simon Game

/*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")