2
\$\begingroup\$

Here is the JS Fiddle: https://jsfiddle.net/4jo9hvpk/

The code is fully functional. Could someone point out any mistakes in style? Any redundancies? I want to work on making my code look better and being more efficient.

$(document).ready(function(){
    var button = $(".buttons");
    var allButtons = [$("#red"), $("#blue"), $("#green"), $("#yellow")];
    var sequence, playerTurn, wins, strict, seqPosition;

    startGame();

    // post: initializes the variables and starts the game
    function startGame() {
        strict = confirm("Would you like to play the difficult mode?");
        sequence = []; // current random sequence of buttons
        playerTurn = false;
        wins = 0;
        computerTurn();
    }

    // post: picks a random button and adds its position to the sequence;
    //       if the player has won 20 times, ends the game and starts over
    function computerTurn() {
        seqPosition = 0; // position of player in sequence
        $("#count").html(wins);
        if (wins === 20) {
            alert("You win!");
            startGame();
        } else {
            sequence.push(Math.floor(Math.random() * 4)); // randomly pick 0, 1, 2, or 3
            playSequence();
        }
    }

    // post: goes through each button and changes its color and plays the sound
    function playSequence() {
            playSound(allButtons[sequence[0]]);
            var i = 0
            var progress = false;
            loop();

            // post: if sequence has been played completely, exits the function;
            //       plays sound for, and changes color of, button in sequence
            function loop(){
                i++;
                if(i == sequence.length)
                    return;

                setTimeout(function(){
                    playSound(allButtons[sequence[i]])
                    loop();
                }, 1000);    
            };

            playerTurn = true;
    }

    // pre: takes a button as a parameter
    // post: changes the color of the button and plays the appropriate sound
    function playSound(btn) {
        btn.toggleClass("act");
        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";
                    break;
                case 3:
                    link = "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3";
                    break;
        }
        var audio = new Audio(link);
        audio.play();
        setTimeout(function(){
            btn.toggleClass("act")
        }, 700);
    }

    // post: if in strict mode, restarts the game if the player makes a mistake;
    //       if not in strict mode, replays the sequence if player makes a mistake;
    //       lets the player replay the sequence and then gives control back to the computer
    button.on("click", function(){
        if (playerTurn) {
            var btnVal = parseInt($(this).attr("val"));
            if (btnVal === sequence[seqPosition]) {
                playSound(allButtons[sequence[seqPosition]]);
                seqPosition++;
                setTimeout(function(){
                    if (seqPosition === sequence.length) {
                        playerTurn = false;
                        wins++;
                        computerTurn();
                    }
                }, 1000);

            } else {
                playerTurn = false;
                if (strict) {
                    alert("You lose!");
                    startGame();
                } else {
                    seqPosition = 0;

                    var audio = new Audio("horn.mp3");
                    audio.play();

                    setTimeout(function(){
                        playSequence();
                    }, 1000);
                }
            }
        }
    });
});
body {
    text-align: center;
}

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;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-md-5"></div>
    <div class="col-md-1">
      <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>
  </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>

\$\endgroup\$
0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.