Question

我正在建立像西蒙这样的记忆游戏。我的问题是，在第一次转弯后，即使在读取正确后，它也会将其他所有内容都读为错误。它还在控制台中重复多次。我无法弄清楚为什么会这样。我相信问题出在player_turn和check_move函数中。

我的所有JavaScript代码如下：

var sqrArray =['one', 'two', 'three', 'four']; 

var game = {
    count: 0,
    sequence: [],
    is_strict: false
}

// get random array element
function random_sqr() {
  return sqrArray[Math.floor(Math.random() * 4)];
} 

// adds and remove green background
function makelight(n) {
  $('#' + n).addClass('light');
  setTimeout(function() {
  $('#' + n).removeClass('light');
  }, 300);
}

// assignes makelight() in order of array elements
function play() {
var i = 0;
var sequenceInter = setInterval(function() {
    makelight(game.sequence[i]);
    i++;
    if(i>=game.sequence.length) {
        clearInterval(sequenceInter);
    }
   }, 600);
}

// adds random sqr to game
function addToSequence() {
  game.sequence.push(random_sqr());
}

function play_game() {
  game.count++
  game.sequence.push(random_sqr());
  play();
}
var checkCount = 0;

//player picks sqr
function player_pick() {
  play_game();
  player_turn();
}

function player_turn() {
  if(checkCount < game.sequence.length) {
    check_move();
  } else {
    checkCount = 0;
    player_pick();
    console.log('The end!');
    console.log('check: ' + checkCount);
  }
}

// Checks player choice
function check_move() {
  $('.sqr').click(function() {
    if(this.id === game.sequence[checkCount]) {
      console.log('Correct!');
      checkCount++;
      console.log('after increment ' + checkCount);
      player_turn();
    } else if(this.id !== game.sequence[checkCount]) {
      console.log('incorrect');
      console.log('Array ' + game.sequence[checkCount]);
    }
  })
}

player_pick();

这是HTML：

<div class="sqr" id="one" ></div>
<div class="sqr" id="two"></div>
<div class="sqr" id="three"></div>
<div class="sqr" id="four"></div>

Answer 1

您在代码中看到的问题是由check_move函数多次注册单击处理程序引起的：每次调用该函数时，都会注册一个额外的处理程序，并在发生单击时调用所有处理程序。 / p>

要解决此问题，请只拨打$('.sqr').click一次。

JavaScript游戏无法按预期工作

1 个答案: