JavaScript-игра не работает должным образом

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 функции регистрирующих обработчики кликов несколько раз : каждый раз, когда вы вызываете эту функцию, регистрируется дополнительный обработчик, и все вызывается, когда происходит щелчок.

Чтобы исправить это, позвоните только по телефону $('.sqr').click.