JS＆amp; Jquery：函数在被调用后变得疯狂。

时间：2017-09-29 10:03:23

标签： javascript jquery function

在游戏中，当它显示你需要点击的颜色并且你点击了错误的颜色，在它警告颜色开始变得疯狂之后，可能做的那两个功能在第24和55行，但我无法在两者中找到问题。 我希望在失败警报后颜色正常运行。 我怎样才能解决这个问题？ 这是代码：

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>

2 个答案:

答案 0 :(得分：1)

在您的代码中，您实际上从未清除间隔，这可能会导致问题。有一些小问题，比如if(playerTurn == true)而不是if(playerTurn)这些不会导致您遇到的问题，但这只是一种很好的做法。

不确定整个事情应该如何运作，但清除间隔确实可以解决您遇到的问题。

＆＃13;
＆＃13; 
// 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();
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

Codepen链接https://codepen.io/azs06/pen/eGRgeK

答案 1 :(得分：0)

除了在失败的情况下调用showColorStart()，您还可以致电$('#start').click();重置游戏。

如果您在失败的情况下致电showColorStart()，则只会在调用index后重置showColorStart()。因此，在调用showColorStart()之前，我可能需要重置一些变量。

相关问题
最新问题