Значения Jquery/JQuery, толкающие более одного раза

Question

Я работаю над созданием Simon Game, аналогично тому, как вы можете найти здесь: https://codepen.io/Em-Ant/full/QbRyqq/. Соответствующий фрагмент кода ниже и весь мой код, написанный до сих пор, можно найти здесь: https://github.com/JamesRiall/Simon-Game/blob/master/js/index.js

По существу программа добавляет к краю «красный», «зеленый», «синий» или «желтый», когда каждый соответствующий панель на игре. Затем я могу использовать этот массив clicksInRound для проверки последовательности, которой должен следовать игрок, либо ничего не делать (если выбор прав, но они еще не завершили раунд), переместите их на следующий уровень (если выбор правильный и они завершили последовательность этого раунда) или сбросить игру (если не так).

Моя проблема заключается в том, что когда я играю в игру, массив clicksInRound имеет слишком много значений, которые ему нажимают. Ниже приведен результат console.log из clicksInRound, когда я играю в игру и нажмите на желтый дважды (с желтым первый цвет в сгенерированной последовательности):

[ «желтый»]

[ «желтый»]

[ «желтый», «желтая»]

Выхода я хочу здесь просто «желтый» в течение первых двух строк (первый клик мой выбор желтый в первом раунде, а затем второй клик моего выбора является желтым только до сих пор во втором раунде). Тем не менее, я получаю третью строку [«желтый», «желтый»], которая выбрасывает все мои чеки. Если я нажму на желтый, затем синий во втором раунде, мой массив clicksInRound будет [«желтый», «желтый», «синий»], когда я хочу, чтобы мой результат был [«желтый», «синий»]

Can кто-нибудь диагностирует проблему из фрагмента кода ниже или из моего полного кода в GitHub? (извините за несколько неполный фрагмент кода, здесь можно опубликовать соответствующие фрагменты без просто копирования во всей программе).

Спасибо!

$(".game-button").click(function() { 
    if (sequencePlaying === false && running === true) { 
    if ($(this).is("#red")) { 
     playRedInSequence(); 
     clicksInRound.push("red"); 
     whereInRound++; 
     checkClickIsCorrect(); 
    } else if ($(this).is("#blue")) { 
     playBlueInSequence(); 
     clicksInRound.push("blue"); 
     whereInRound++; 
     checkClickIsCorrect(); 
    } else if ($(this).is("#yellow")) { 
     playYellowInSequence(); 
     clicksInRound.push("yellow"); 
     whereInRound++; 
     checkClickIsCorrect(); 
    } else if ($(this).is("#green")) { 
     playGreenInSequence(); 
     clicksInRound.push("green"); 
     whereInRound++; 
     checkClickIsCorrect(); 
    } 
    } 
}); 

Answer 1

Проблема, похоже, не в вашем JavaScript-коде. В вашем HTML вы не закрыли div на line 28.

<table style="margin-left: auto; margin-right: auto" id="game"> 
     <tr> 
      <td> 
       <div class="game-button" id="green"></div> 
      </td> 
      <td> 
       <div class="game-button" id="red"><div> <!-- PROBLEM PROBLEM!! --> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="game-button" id="yellow"></div> 
      </td> 
      <td> 
       <div class="game-button" id="blue"></div> 
      </td> 
     </tr> 
    </table> 

Если вы закроете div и запустите код, он работает нормально, хотя я не совсем понимаю игру. Здесь я создал jsFiddle из вашего кода github с исправлением. Кажется, это работает.