Im trying to make a simon game and i ran through a problem that just randomly occurred (it worked fine before), every time after the showColorStart() function executes and you click on the given color, the if statement on line 33 runs even tho colorsClicked[index] is equal to colorsPicked[index], and the statement needs to run when they are not equal. i cant find the problem, im looking through the code over and over again and cant find the problem. here's the code:
// 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="http://ift.tt/2n9t8Vj"></script>
<script src="app.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire