-4

三目並べゲームを作っています。

次のコードを変更して、完了が真になる前に勝者を宣言でき（すべての正方形が塗りつぶされ）、勝者が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');
        }       
    }
}
4

1 に答える 1

0

あなたの機能はほぼ正しいです。主に、プレーヤーがセルの値を変更するたびに呼び出す必要があるだけです。

関数を少し調整して、複数回呼び出せるようにしました。見つけやすくするために、変更したセクションにコメントを追加しました。

// 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を作成しました。

于 2012-05-08T20:31:14.460 に答える