JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="container-fluid">
<h1>Simon Game</h1>
<div class="buttons" id="red" val="0"></div>
<div class="buttons" id="blue" val="1"></div>
<div class="buttons" id="green" val="2"></div>
<div class="buttons" id="yellow" val="3"></div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-1"><h4>Count: <span id="count">0</span></h4></div>
</div>
</div>
CSS
h1 {
font-size: 3em;
}
.buttons {
cursor: pointer;
height: 200px;
width: 200px;
}
.act {
background-color: black !important;
}
#red {
background-color: red;
}
#red:active {
background-color: black;
}
#blue {
background-color: blue;
}
#blue:active {
background-color: black;
}
#green {
background-color: green;
}
#green:active {
background-color: black;
}
#yellow {
background-color: yellow;
}
#yellow:active {
background-color: black;
}
JavaScript
$(document).ready(function(){
var button = $(".buttons");
var redbtn = $("#red");
var bluebtn = $("#blue");
var greenbtn = $("#green");
var yellowbtn = $("#yellow");
var allButtons = [redbtn, bluebtn, greenbtn, yellowbtn];
var sequence, playerTurn, wins, strict, seqPosition;
startGame();
function startGame() {
console.log("Starting game...");
strict = confirm("Would you like to play the difficult mode?");
sequence = [];
playerTurn = false;
wins = 0;
computerTurn();
}
function computerTurn() {
seqPosition = 0; // position of player in sequence
$("#count").html(wins);
console.log("It's the computer's turn");
if (wins === 20) {
alert("You win!");
startGame();
} else {
sequence.push(Math.floor(Math.random() * 4));
console.log("Picked new button");
playSequence();
}
}
function playSequence() {
setTimeout(function(){
console.log("Playing the sequence... " + sequence.toString());
playSound(allButtons[sequence[0]]);
var progress = false;
for (var i = 1; i < sequence.length; i++){
console.log(i);
playSound(allButtons[sequence[i]])
}
playerTurn = true;
}, 1000)
}
function playSound(btn) {
btn.toggleClass("act");
console.log("Playing the sound...");
var link;
switch (parseInt(btn.attr("val"))) {
case 0:
link = "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3";
break;
case 1:
link = "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3";
break;
case 2:
link = "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3";
...