JavaScriptのゲームが期待通りに動作しない

Question

私はSimonのようなメモリゲームを構築しています。私の問題は、最初のターンの後に正しいものとしてそれを読んだ後でさえ、他のものをすべて正しくないものとして読み取ることです。また、コンソールで複数回繰り返します。なぜこれが起こっているのか分かりません。問題は、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を1回だけ呼び出してください。