Question

我已经建立了西蒙游戏。如果用户正确播放，它可以正常运行，但是为了使其完全打样，我想在计算机显示下一个模式时禁止用户单击选项。我已尝试过将jquery .on / .off .unbind / .bind与e.preventDefault一起使用的许多组合，但没有成功。有人可以帮助我解决添加此功能的问题。如果您想要查看完整的项目，这是一个代码链接，因为我只会发布它下面的相关代码。 http://codepen.io/RawleJuglal/full/vKxwWw/

HTML：

<div class='gameContainer'>
   <div class="center"></div>
   <a href="#" id="1" class="field blue"></a>
   <a href="#" id="2" class="field yellow "></a>
   <a href="#" id="3" class="field red"></a>
   <a href="#" id="4" class="field green"></a> 
</div><!--End of gameContainer-->

CSS：

function playComputerSequence(seq,speed){
  //Preventing pressing not working
  $('.field').each(function(){
     $(this).off('click',function(e){
        e.preventDefault();
     });
  });
  //Everything below this working correctly
  var count = Number($('.count span').text());
  var i = 0;
  var interval = setInterval(function(){
     $('#'+seq[i]).addClass('on');
     var audio = new Audio(audioArray[seq[i]-1]);
     setTimeout(function(){
        audio.play();
        $('#'+seq[i]).removeClass('on');
        i++;
     },500)
     setTimeout(function(){
        if(i == count)
        {
           clearInterval(interval);
        }
     },500);
  },speed);
  $('.field').each(function(){
     $(this).off().on('click',recordUserChoice);
  });
}

function recordUserChoice(){
  userArray.push(this.id);
  var audio = new Audio(audioArray[this.id-1]);
  setTimeout(function(){
     audio.play();
  },500);
  checkSequence(userArray);
}

Answer 1

我的建议是使用某种标志来确定游戏的状态。

显然，.off()并没有做到这一点，所以我会说删除对它的所有引用。但是，我认为它不起作用的原因是因为你使用它错了。取消绑定时，您不需要使用.each()。这就是选择器的用途，因此如果您使用$('.field').off('click', '**')，则应从class='field'的任何元素中删除所有委派的点击处理程序。要了解正确用法，我建议您在此处查看：http://api.jquery.com/off/

但是，我仍然不相信您应该删除委派的事件。为了简化事情，只需要一个可以检查以查看游戏状态的标志。

var gameState = 0; //0 means the user can click, 1 means the user cannot

function playComputerSequence(seq, speed){
   gameState = 1;

   //Rest of function code
   //...

   gameState = 0;
}

function recordUserChoice(){
   if(gameState === 1) return; //if gameState is 1, jump out of the function

   //Rest of function code
   //...
}

虽然这种逻辑有效，但对于你的情况，它需要有所不同。

在代码开头，audioArray下方的代码下方。这将是您的field点击处理程序。

$(document).on('click', '.field', recordUserChoice);

然后，我意识到的一件事是gamestate基本上立即变回0，所以我把它放在你clearInterval(interval)的下方，因为这就决定了什么时候计算机是完成了。

if(i == count)
{
   clearInterval(interval);
  gamestate = 0;
  console.log(gamestate);
}

然后您可以删除$('.field').each()

的所有实例

请参阅此笔：http://codepen.io/anon/pen/wWJLyp

西蒙说游戏无法在电脑转弯时禁用彩色打击垫

1 个答案: