Simon Says Игра неспособна отключить колодки цвета во время поворота компьютера

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