Zipline Simon

index.html

<audio id="sound1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
<audio id="sound2" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
<audio id="sound3" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="sound4" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
<audio id="victory" src="https://lordmalvern.github.io/snd/Jingle_Achievement_00.mp3"></audio>
<audio id="failure" src="https://lordmalvern.github.io/snd/333785__projectsu012__8-bit-failure-sound.mp3"></audio>
<div class="row">
  <div class="col-md-6 col-xs-12 col-md-offset-3 text-center">
    <div class="panel panel-default">
      <div class="panel-body">
        <h1>Simple Simon</h1>
        <div class="input-group">
          <div class="input-group-btn">
            <button class="btn btn-lg btn-default" id="start">Start Game</button>
            <button class="btn btn-lg btn-default" id="reset">Reset Game</button>
          </div>
        </div>
        <br>
        <input type="checkbox" aria-label="Strict Mode" id="strict"> Strict Mode</input>
        <br>
        <br>
        <button class="btn btn-primary btn-lg game-btn" id=1> 1 </button>
        <button class="btn btn-success btn-lg game-btn" id=2> 2 </button>
        <button class="btn btn-warning btn-lg game-btn" id=3> 3 </button>
        <button class="btn btn-danger btn-lg game-btn" id=4> 4 </button>
        <br>
        <br>
        <h3> Number of Steps: <span id="numSteps">0</span> </h3>
        <br>
        <h1 id="gameover"></h1>
      </div>
    </div>
    <p>Music by: <a href="http://www.littlerobotsoundfactory.com/">Little Robot Sound Factory</a></p>
    <p>Sound by: <a href="http://www.freesound.org/people/ProjectsU012/sounds/333785/">ProjectsU012</a></p>
  </div>
</div>

script.js

var isStarted = false,
  isPlayerTurn = false,
  isStrict = false,
  simonSays = [],
  playerSays = [];

function Game() {
  this.numSteps = 0;
  var self = this;
  this.add = function(arr, num) {
    return arr.push(num);
  };
  this.reset = function() {
    simonSays = [];
    playerSays = [];
    this.numSteps = 0;
    self.simonTurn();
  };
  this.playSeq = function() {
    simonSays.forEach(function(num, i) {
      window.setTimeout(function() {
        $("#sound" + num)[0].play();
        $("#" + num).addClass("active");
        window.setTimeout(function() {
          $("#" + num).removeClass("active");
        }, 500);
      }, i * 700);
    });
  };
  this.toggleStrict = function() {
    if (isStrict) {
      isStrict = false;
    } else {
      isStrict = true;
    }
  };
  this.simonTurn = function() {
    playerSays = [];
    var randNum = Math.floor(Math.random() * 4) + 1;
    console.log("randNum: " + randNum);
    this.numSteps = self.add(simonSays, randNum);
    console.log(simonSays);
    console.log("numSteps: " + this.numSteps);
    $("#numSteps").empty();
    $("#numSteps").text(this.numSteps);
    self.playSeq();
    isPlayerTurn = true;
  };
  this.playerTurn = function(num) {
    var index = self.add(playerSays, num) - 1;
    console.log("index = " + index);
    console.log(playerSays);
    if (playerSays[index] != simonSays[index]) {
      //TODO: Add failure message.
      $("#gameover").text("INCORRECT");
      isPlayerTurn = false;
      playerSays = [];
      $("#failure")[0].play();
      window.setTimeout(function() {
        $("#gameover").empty();
        if (!isStrict) {
          self.playSeq();
          isPlayerTurn = true;
        } else {
          self.reset();
        }
      }, 900);
    } else {
      $("#sound" + num)[0].play();
    }
  };
  this.start = function() {
    isStarted = true;
    $("#start").attr("disabled", "disabled");
    self.simonTurn();
  };
  this.update = function() {
    if (isStarted) {
      if (playerSays.length === simonSays.length && isPlayerTurn) {
        isPlayerTurn = false;
        if (simonSays.length === 20) {
          //TODO: Add victory message.
          $("#gameover").text("VICTORY");
          $("#victory")[0].play();
          window.setTimeout(function() {
            $("#gameover").empty();
            self.reset();
          }, 2100);

        } else {
          window.setTimeout(function() {
            self.simonTurn();
          }, 700);
        }
      }

    }
  };
}

var game = new Game();
$(".game-btn").click(function() {
  if (isPlayerTurn) {
    var num = $(this).attr("id");
    game.playerTurn(num);
  }
});
$("#start").click(game.start);
$("#reset").click(game.reset);
$("#strict").click(game.toggleStrict);
window.setInterval(game.update, 1000 / 60);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

zipline-simon.markdown

Zipline Simon

A Pen by Brian Puschell on CodePen.

License.