WackThat WackThat - 3 years ago 135
Javascript Question

JS & Jquery: if statement run even tho the terms of the statement are not true

I'm trying to make a simon game and I ran through a problem that just randomly occurred (it worked fine before). After the

showColorStart()
function executes and you click on the given color, the if statement on line 33 runs, even though
colorsClicked[index]
is equal to
colorsPicked[index]
, and the statement needs to run when they are not equal.

Here's the code on Codepen.



// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = true;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = [];
var colorsClicked = [];
var level = 1;
var index = -1;
var lindex = 0;
var showOn = false;
// Game Status Function
$('#start').click(function(){
if(gameStatus == false){
gameStatus = true;
gameStart();
}
});
// Game Start Function
function gameStart(){

}
// Chaning color buttons
$('.cubes').click(function(e){
if(playerTurn = true){
index++;
$(e.target).addClass(e.target.id);
colorsClicked.push(e.target.id);
setTimeout(function(){
$(e.target).removeClass(e.target.id);
}, 500);
// Player's turn & check if got the right colors
if(colorsClicked[index] !== colorsPicked[index]){
index=0;
lindex=0;
alert('Failed! Try again.');
showColorStart();
} else {
if(colorsPicked.length == colorsClicked.length){
level++;
randomColor();
showColorStart();
}
}
} else {
return;
}
});
// Random Color Picking Function
function randomColor(){
var random = Math.floor(Math.random() * 4);
colorsPicked.push(colors[random]);
}
// Colors Showing at Start of a level
function showColorStart(){
if(!showOn){
showOn == true;
playerTurn = false;
lindex = 0;
var colorLoop = setInterval(function(){
if(colorsPicked[lindex] == 'green'){
$('#green').addClass('green');
} else if(colorsPicked[lindex] == 'red'){
$('#red').addClass('red');
} else if(colorsPicked[lindex] == 'yellow'){
$('#yellow').addClass('yellow');
} else if(colorsPicked[lindex] == 'blue'){
$('#blue').addClass('blue');
}
setTimeout(function(){
$('#green').removeClass('green');
$('#red').removeClass('red');
$('#yellow').removeClass('yellow');
$('#blue').removeClass('blue');
}, 500);
lindex++;
if(lindex == colorsPicked.length){
clearInterval(colorLoop);
showOn = false;
lindex = 0;
index = 0;
colorsClicked = [];
$('#disp').html('Your Turn!');
setTimeout(function(){
$('#disp').html('');
}, 1000);
playerTurn = true;
}
}, 1500);
} else {
return;
}
}
randomColor();
randomColor();
showColorStart();

<DOCTYPE html>
<html>
<head>
<title>Simon Game</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<link href='bootstrap.min.css' type="text/css"/>
</head>
<body>
<div class="container">
<div class="menu">
<input type='button' value='Start' id='start' class='btn'>
<input type='button' value='Restart' id='restart' class='btn'>
<input type='button' value='Strict' id='strict' class='btn'>
</div>
<div class='board'>
<div class='display'><p id='disp'></p></div>
<br>
<table>
<tbody>
<tr>
<td class='cubes' id='green'></td>
<td class='cubes' id='red'></td>
</tr>
<tr>
<td class='cubes' id='yellow'></td>
<td class='cubes' id='blue'></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>




Answer Source

It is because you increment your index before getting to the if. Put the increment at the end and it works perfectly.

$('.cubes').click(function(e){
    if(playerTurn = true){
        $(e.target).addClass(e.target.id);
        colorsClicked.push(e.target.id);
        setTimeout(function(){
            $(e.target).removeClass(e.target.id);
        }, 500);
        // Player's turn & check if got the right colors
        if(colorsClicked[index] !== colorsPicked[index]){
            index=0;
            lindex=0;
            alert('Failed! Try again.');
            showColorStart();
        } else {
            if(colorsPicked.length == colorsClicked.length){
                level++;
                randomColor();
                showColorStart();
            }
        }
        index++;
    } else {
        return;
    }
});

Arrays start at 0

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download