Simon Game - Why does my code not work?


#1

var computerMovements = [];
var answers = [];
var rounds = 0;
var strict = true;
var lastChance = false;

var addColor = function(arr) {
var colorsArray = [“red”, “green”, “yellow”, “blue”];
return arr.push(colorsArray[Math.floor(Math.random() * colorsArray.length)]);
};

var flashLights = function(arr) {
var i = 0;
var interval = setInterval(function() {
("#" + arr[i]).fadeTo("slow", 0).fadeTo("slow", 1); ("#sound-" + arr[i]) [0].play();
i++;
if (i >= arr.length) {
clearInterval(interval);
}
}, 1500);
};

var resetAnswers = function() {
answers = [];
};

var updateRounds = function() {
rounds++;
$("#show-rounds").html(rounds);
};

var resetGame = function() {
rounds = 0;
computerMovements = [];
if (strict === false) {
lastChance = true;
}
resetAnswers();
};

var playerTurn = function() {
$("#mode").click(function() {
return false;
});

if (rounds === 20) {
alert(“Congrats, You Win!”);
resetGame();
}

updateRounds();
addColor(computerMovements);

(".button").off("click").on("click", function() { ("#sound-" + (this).attr("id")) [0].play(); answers.push((this).attr(“id”));

for (var i = 0; i < answers.length; i++) {

if (JSON.stringify(computerMovements) === JSON.stringify(answers)) {
  resetAnswers();
  playerTurn();
  break;
  
}

if (answers[i] !== computerMovements[i]) {
  if (strict === false && lastChance === true) {
    lastChance = false;
    alert("You have 1 more try!");
    resetAnswers()
    flashLights(computerMovements);
  } 
  
  else if (
    answers[i] !== computerMovements[i] && lastChance === false) {
      alert("Whoops, You have lost the game!");
      resetGame();
      break;
    }
}

}
});
};

("#mode").click(function() { switch (strict) { case true: strict = false; lastChance = true; ("#mode").html(“Mode: Medium”);
break;

  case false:
    strict = true;
    lastChance = false;
    $("#mode").html("Mode: Strict");
    break;

}
});

$("#start").click(function() {
playerTurn();
});

body{
background-color: pink;
font-family: sans-serif;
color: white;
}

.container{
margin: 0 auto;
text-align: center;
}

.pad{
margin: 0;
float: left;
position: relative;
width: 294px;
height: 294px;
z-index: 8;
border: 3px solid white;
}
.simonBoard{
margin: 0 auto;
margin-top: 50px;
border: 3px solid white;
border-radius: 600px;
width: 600px;
height: 600px;
box-shadow: -10px 10px 7px 0px rbga(50, 50, 50, 0.75);
}

#yellow{
background-color: yellow;
-moz-border-radius: 300px 0 0 0;
border-radius: 0 0 0 300px;
}

#yellow-active{
background-color: gold !important;
}

#red{
background-color: red;
-moz-border-radius: 300px 0 0 0;
border-radius: 300px 0 0 0;
}

#red-active{
background-color: darkred !important;
}

#blue{
background-color: blue;
-moz-border-radius: 300px 0 0 0;
border-radius: 0 0 300px 0;
}

#blue-active{
background-color: darkblue !important;
}

#green{
background-color: green;
-moz-border-radius: 300px 0 0 0;
border-radius: 0 300px 0 0;
}

#green-active{
background-color: darkgreen !important;
}

.controls{
position:absolute;
background-color: pink;
border: 3px solid white;
width:200px;
height:200px;
margin-top: 150px;
margin-bottom: 150px;
margin-left: 125px;
position: center !important;
border-radius:50%;
z-index: 12;
}

.gameContainer {
position:relative;
width:440px;
height:440px;
margin:0 auto;
margin-top: 50px;
border: solid 1px black;
border-radius: 50%;
background-color: grey;

}

.title{
font-size: 26px;
margin-top: 30px;
margin-bottom: 30px;
font-weight: bold;
}

.inline{
display: inline-block;
vertical-align: middle;
}

.display{
border: 1px solid white;
height: 30px;
width: 40px;
position: center;
color: black;
border-radius: 10px;
font-size: 26px;
background-color: pink;
}

.start, .strict{
margin: 0;
text-align: center;
color: white;
border: 1px solid white;
height: 55px;
width: 55px;
margin-left: 20px;
border-radius: 30px;
line-height: 55px;
}

.start{
background-color: red;
cursor: pointer;
}

.strict{
background-color: green;
cursor: pointer;
}

.switch-container{
margin-top: 10px;
}

.outter-switch{
border: solid 2px white;
width: 60px;
height: 25px;
background-color: pink;
}

.outter-active{
background-color: gray !important;
}

.inner-switch{
background-color: gray;
width: 30px;
height: 25px;
position: relative !important;
}

.inner-inactive{
background-color: black !important;
}

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

        <script src="java.js"></script>
<title>Simon Game</title>
    <link rel="stylesheet" href="assests/style.css" type="text/css"/>
<audio preload ="auto" id ="sound-red">
    <source src=""></source>
</audio>
<audio preload ="auto" id ="sound-blue">
    <source src=""></source>
</audio>
<audio preload ="auto" id ="sound-yellow">
    <source src=""></source>
</audio>
<audio preload ="auto" id ="sound-green">
    <source src=""></source>
</audio>

  <div class="container">
        <div class="simonBoard">
            <div id="0" class="pad red" ></div>
            <div id="1" class="pad green"></div>
            <div id="2" class="pad yellow"></div>
            <div id="3" class="pad blue"></div>
            
        
        <div class="controls">
            <div class="title">SIMON</div>
            <div class="display">00</div>
            <div class="start-btn success">START</div>
            <div class="strict-btn">STRICT</div>
            
           </div>
           </div>
           </div>

START