WackThat WackThat - 2 years ago 96
jQuery Question

JS & Jquery: functions goes crazy after being called.

in the game, when it shows the colors that you need to click and you click on the wrong color, after it alerts the colors start going crazy, the 2 functions that possibly doing that are in lines 24 and 55, but i cant find the problem in both.
i want after the fail alert the colors run normaly.
how can i fix this?
here is the code:

CodePen



// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = true;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = ['red', 'red', 'yellow', 'blue', 'green'];
var colorsClicked = [];
var level = 1;
var index = 0;
var lindex = 0;
var showOn = false;
// Game Status Function
$('#start').click(function(){
if(gameStatus == false){
gameStatus = true;
gameStart();
}
});
// Game Start Function
function gameStart(){
// left this function for later
}
// Chaning color buttons
$('.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(colorsPicked[index] !== colorsClicked[index]){
alert('Failed! Try again.');
showColorStart();
index=0;
} else {
if(colorsPicked.length == colorsClicked.length){
level++;
randomColor();
showColorStart();
}
}
index++;
} 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 == false){
showOn == true;
playerTurn = false;
lindex = 0;
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');
}, 1000);
if(lindex == colorsPicked.length){
clearInterval();
lindex = 0;
index = 0;
playerTurn = true;
}
lindex++;
}, 1500);
} else {
return;
}
}
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

On your code you are never actually clearing the interval, and that might be causing the issue. There are some minor things, like instead of if(playerTurn == true) you could just do if(playerTurn)these not causing the issue you are having but it's just good practice.

Not sure how this whole thing should work, but clearing the interval does seems to fix the issue you were having.

// Setting Variables
var gameStatus = false;
var strict = false;
var playerTurn = true;
var colors = ['green', 'red', 'yellow', 'blue'];
var colorsPicked = ['red', 'red', 'yellow', 'blue', 'green'];
var colorsClicked = [];
var level = 1;
var index = 0;
var lindex = 0;
var showOn = false;
// Game Status Function
$('#start').click(function(){
    if(!gameStatus){
        gameStatus = true;
        gameStart();
    }
});
// Game Start Function
function gameStart(){
// left this function for later
}
// Chaning color buttons
$('.cubes').click(function(e){
    if(playerTurn){
        $(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
        console.log(colorsPicked[index], colorsClicked[index]);
        if(colorsPicked[index] !== colorsClicked[index]){
            alert('Failed! Try again.');
            showColorStart();
            index = 0;
        } else {
            if(colorsPicked.length == colorsClicked.length){
                level++;
                randomColor();
                showColorStart();
            }
        }
        index++;
    } 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;
   // save timer
    var gameTimer = 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');
    }, 1000); 
    if(lindex === colorsPicked.length){
      // clear timer
        clearInterval(gameTimer);
        lindex = 0;
        index = 0;
        playerTurn = true;
    }
    lindex++;
    }, 1500);
 } else {
     return;
 }
}
showColorStart();
@import url('https://fonts.googleapis.com/css?family=Orbitron');

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

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

.menu {
  margin-bottom: 20px;
}

.display {
  width: 130px;
  height: 40px;
  background-color: #282828;
  margin: 0 auto;
  text-align: center;
  font-family: Orbitron, sans-serif;
}

table {
  margin: 0 auto;
}

.cubes {
  width: 150px;
  height: 150px;
}

#green {
  border: 2px solid green;
  border-right: 2px solid red;
}

#red {
  border: 2px solid red;
  border-bottom: 2px solid blue;
}

#yellow {
  border: 2px solid yellow;
}

#blue {
  border: 2px solid blue;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

#disp {
  font-size: 12px;
  color: #000;
  padding: 8px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Game</title>
</head>
<body>
<div class="container">
  <div class="menu">
    <input type='button' value='Start/Restart' id='start' 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://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

Codepen link https://codepen.io/azs06/pen/eGRgeK

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