JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

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() {
       
            console.log("Playing the sequence... " + sequence.toString());
            playSound(allButtons[sequence[0]]);
            var i = 0
            var progress = false;
            (function loop(){
            if(i++ == sequence.length) return;
            
            setTimeout(function(){
                playSound(allButtons[sequence[i]])
								loop();
            },1000);    
            
            })();
            playerTurn = true;
        
    }
    
    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:
                   ...