최대한 빨리 승자를 선언하는 함수를 수정하십시오.

Question

나는 틱택 테크 게임을 만들고 있습니다.

완료가 true (모든 사각형이 채워짐)가되기 전에 승자가 선언 될 수 있고 승자가 마지막으로 달성 할 수있는 값이 아닌 3 개의 일치하는 값을 얻을 수 있도록 다음 코드를 어떻게 변경합니까?

function check_squares() { 
    var values = new Array(); 
    var complete = true; 

    $('.square').each(function() {  
     values.push($(this).html()); 
     //if ($(this).html() == '') complete = false; 
    }); 

    if (complete == true) { 
     var winner = false; 

     if (values[0] == values[1] && values[1] == values[2]) winner = values[0]; 
     if (values[3] == values[4] && values[4] == values[5]) winner = values[3]; 
     if (values[6] == values[7] && values[7] == values[8]) winner = values[6]; 
     if (values[0] == values[3] && values[3] == values[6]) winner = values[0]; 
     if (values[1] == values[4] && values[4] == values[7]) winner = values[1]; 
     if (values[2] == values[5] && values[5] == values[8]) winner = values[2]; 
     if (values[0] == values[4] && values[4] == values[8]) winner = values[0]; 
     if (values[2] == values[4] && values[4] == values[6]) winner = values[2]; 

     if (winner) {   
      $('#output').html('Winner: ' + winner); 
     } else {   
      $('#output').html('No Winner'); 
     } 
    } else {  
     if (player_x == true) {  
      $('#output').html('x turn to move'); 
     } else {   
      $('#output').html('o turn to move'); 
     }  
    } 
} 

Answer 1

사용자의 기능이 거의 정확합니다. 주로 플레이어가 셀 값을 변경할 때마다 호출하면됩니다.

나는 여러 번 호출 할 수 있도록 약간의 기능을 조정했다. 내가 찾은 부분을 쉽게 찾을 수 있도록 변경 한 부분에 주석을 추가했습니다.

// Move these two variables into the global scope so that they are not reset 
// by each call to check_squares and so that our click function can access them. 
var complete = false; 
var winner = null; 

function check_squares() { 
    var values = new Array(); 

    $('.square').each(function() {  
     values.push($(this).html()); 
     //if ($(this).html() == '') complete = false; 
    }); 

    // Debug statement to see the order of the values. 
    console.log(values); 

    if (!complete) { 
     if (values[0] == values[1] && values[1] == values[2]) winner = values[0]; 
     if (values[3] == values[4] && values[4] == values[5]) winner = values[3]; 
     if (values[6] == values[7] && values[7] == values[8]) winner = values[6]; 
     if (values[0] == values[3] && values[3] == values[6]) winner = values[0]; 
     if (values[1] == values[4] && values[4] == values[7]) winner = values[1]; 
     if (values[2] == values[5] && values[5] == values[8]) winner = values[2]; 
     if (values[0] == values[4] && values[4] == values[8]) winner = values[0]; 
     if (values[2] == values[4] && values[4] == values[6]) winner = values[2]; 

     if (winner) {   
      $('#output').html('Winner: ' + winner); 
      // Indicate that there was a winner so no more input is allowed. 
      complete = true; 
     } else {   
      $('#output').html('No Winner'); 
     } 
    } else {  
     if (player_x == true) {  
      $('#output').html('x turn to move'); 
     } else {   
      $('#output').html('o turn to move'); 
     }  
    } 
} 

// Add a click handler to each square that checks for win conditions after each 
// X or 0 is added. 
$(".square").click(function() { 
    if (!complete) 
    { 
    // This obviously needs to be changed to determine which player is going. 
    $(this).html("X"); 
    check_squares(); 
    } 
}); 

나는 간단한 예제 인 JSFiddle을 만들었습니다.