Simon Game | freeCodeCamp

index.pug

.game
  .button.left.top#green-button
  .button.right.top#red-button
  .button.left.bottom#yellow-button
  .button.right.bottom#blue-button
  .centre-console 
    .logo Simon
    .counter 00
    .reset Start
    .strict.off Strict

script.js

let soundMP3 = [
  "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
  "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
  "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3",
  "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"
];
let errorMP3 = "http://soundbible.com/grab.php?id=1198&type=mp3";
let errorSound = null;
let sounds = [null, null, null, null];
let divIds = ["green-button", "red-button", "blue-button", "yellow-button"];
let litClasses = [
  "green-lit-button",
  "red-lit-button",
  "blue-lit-button",
  "yellow-lit-button"
];
let moves = [];
let currMove = -1;
let lastMove = -1;
let replayIndex = 0;
let strict = false;
var f;
const maxMoves = 20; //5; //number of moves after which you win

function pad(num, size) {
  var s = num + "";
  while (s.length < size) s = "0" + s;
  return s;
}

function setLastMove(index) {
  lastMove = index;
  $(".counter").text(pad(lastMove + 1, 2));
}

function getNewRandomMove() {
  return Math.floor(Math.random() * 4);
}

function unlight() {
  for (var i = 0; i < 4; i++) $(".button").removeClass(litClasses[i]);
}

function reset() {
  clearTimeout(f); //so user can press reset in the middle of the winning display, or during the PC's move
  $(".reset").text("Reset");
  moves.length = 0;
  for (var i = 0; i < maxMoves; i++) moves.push(getNewRandomMove());
  setLastMove(-1);
  playMoves();
}

function buttonPress(index) {
  $("#" + divIds[index]).addClass(litClasses[index]);
  sounds[index].pause();
  sounds[index].currentTime = 0; 
  sounds[index].play();
  setTimeout(unlight, 150);
}

function nextButtonPress() {
  buttonPress(moves[replayIndex]);
  replayIndex++;
  if (replayIndex <= lastMove) f = setTimeout(nextButtonPress, 500);
}

function nextWinPress() {
  buttonPress(replayIndex % 4);
  replayIndex++;
  if (replayIndex <= 40) f = setTimeout(nextWinPress, 150);
  else setTimeout(reset, 500);
}

function playMoves() {
  //console.log(moves);
  setLastMove(lastMove + 1);
  currMove = 0;
  if (lastMove >= maxMoves) {
    //play winning tune
    //for (var i = 0; i <= 12; i++) {
    //  setTimeout(function() {
    //    buttonPress(moves[i % 4]);
    //  }, i * 160);
    // }
    // setTimeout(function() {
    //   reset();
    //}, 13 * 160);
    $(".counter").text("You win!");
    replayIndex = 0;
    setTimeout(nextWinPress, 400);
  } else {
    //for (var i = 0; i <= lastMove; i++) {
    //  var move = moves[i];
    //  setTimeout(function() {
    //    buttonPress(move);
    //    console.log('move '+move);
    //  }, i * 500);
    //}
    replayIndex = 0;
    setTimeout(nextButtonPress, 600);
  }
}

function userButtonPress(index) {
  //console.log(moves[currMove] + " " + index);
  if (currMove < 0) {
    //game has not started, just test/practise mode, user can press buttons, and hear sounds
    buttonPress(index);
  } else if (moves[currMove] == index) {
    buttonPress(index);
    currMove++;
    //console.log(currMove + " " + lastMove);
    if (currMove > lastMove) {
      playMoves();
    }
  } else {
    errorSound.play();
    lastMove--;
    if (strict) setTimeout(reset, 600);
    else setTimeout(playMoves, 500);
  }
}

$(document).ready(function() {
  for (var i = 0; i < 4; i++) {
    sounds[i] = document.createElement("audio");
    sounds[i].setAttribute("src", soundMP3[i]);
  }
  errorSound = document.createElement("audio");
  errorSound.setAttribute("src", errorMP3);

  $("#green-button").click(function() {
    userButtonPress(0);
  });

  $("#red-button").click(function() {
    userButtonPress(1);
  });

  $("#blue-button").click(function() {
    userButtonPress(2);
  });

  $("#yellow-button").click(function() {
    userButtonPress(3);
  });

  $(".strict").click(function() {
    if (strict) {
      strict = false;
      $(".strict").addClass("off");
    } else {
      strict = true;
      $(".strict").removeClass("off");
    }
  });

  $(".reset").click(function() {
    reset();
  });
});

scripts

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

simon-game-freecodecamp.markdown

Simon Game | freeCodeCamp

Electronic version of the classic 80's game.

Press Start when you are ready, then copy Simon. Get 20 in a row correct, and you win!

Strict mode will reset and start a new game if you make a mistake.

Final freeCodeCamp project! (for their free online Front End Developer course)

A Pen by Maya Opperman on CodePen.

License.

style.scss

$cl-main-1: #03060F;
$cl-main-2: #0A122A;
$cl-blue: #0489E9;
$cl-green: #39CB46;
$cl-red: #F82211;
$cl-yellow: #FFF125;
$cl-black: #0E1E10;




body {
  background: radial-gradient(circle, $cl-main-1, $cl-main-2, $cl-main-1);
  font-family: 'Michroma', sans-serif;
}

.game {
  color: $cl-main-1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 500px;
  height: 500px;
 // border: solid 4px red;
  background: $cl-main-1;
  
}

.button {
  position: absolute;
  height: 47%;
  width: 47%;
  cursor: pointer;
  //border: solid 4px red;
}

.top {
  top: 0%;
}

.bottom {
  bottom: 0%;
}

.left {
  left: 0%;
}

.right {
  right: 0%;
}


#red-button {
  background-color: $cl-red;  
}
#blue-button {
  background-color: $cl-blue;  
}
#green-button {
  background-color: $cl-green;  
}
#yellow-button {
  background-color: $cl-yellow;  
}

.yellow-lit-button {
  background: radial-gradient(circle, white, $cl-yellow, white);
}

.blue-lit-button {
  background: radial-gradient(circle, white, $cl-blue, white);
}

.green-lit-button {
  background: radial-gradient(circle, white, $cl-green, white);
}

.red-lit-button {
  background: radial-gradient(circle, white, $cl-red, white);
}


.centre-console {
  position: absolute;
  height: 46%;
  width: 46%;
  top: 27%;
  left: 27%;
  background: $cl-main-1;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 35px;   
}

.logo {
  padding: 15% 0% 0% 0%;
}

.counter {
  font-size: 40px;   
}

.reset {
  font-size: 20px;   
  cursor: pointer;
}

.strict {
  font-size: 20px;   
  cursor: pointer;
  text-shadow: 2px 2px 2px #3E5270;
}

.off {
  color: #3E5270;
  text-shadow: none;
}



@media screen and (max-width: 500px) {
  .game {
    margin-top: 2%;
    width: 300px;
    height: 300px;
  }
  .centre-console {
    font-size: 15px;   
  }
  .counter {
    font-size: 25px;   
  }
  .reset {
    font-size: 15px;   
  }
  .strict {
    font-size: 15px;   
  }
}