CODEWITHSUNDEEP
javascriptjqueryfunction
user8142459
user8142459

Reputation:

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>

Upvotes: 0

Views: 42

Answers (2)

azs06
azs06

Reputation: 3517

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

Upvotes: 1

Nishesh Pratap Singh
Nishesh Pratap Singh

Reputation: 2181

Instead of calling showColorStart() in case of failure you can also call $('#start').click(); to reset the game.

When you are calling showColorStart() in case of failure it is only resetting index and that too after showColorStart() is called. So there might me some variables that you need to reset before calling showColorStart().

Upvotes: 0

Related Questions