1

私はhtml、css、およびJavaScriptを使用して三目並べゲームを書いています。関数から入力を取得するボタンを作成markbox(cell)し、ゲームに勝つための条件をチェックするwining_conditionと呼ばれるderes関数を作成しました。

私のコードでは、winning_condition問題が発生したことを適切にチェックしていませんか??

これが私のコードです

<html>
<head>
    <title>TIC TAC TOE</title>
    <script type="text/javascript">
    var cell;
    var symbol = "X";
    function markbox(cell)
    {
        if (cell.value == "     ")
        {
        cell.value = symbol;
        if (symbol == "X")
        symbol = "O";
        else
        symbol = "X";
        }
        //else 
        //{
        //alert("This square is occupied");
        //}
        if (winning_condition())
        {
        alert ("You win!");
        return;
        }
        else  if(!winning_condition())
        {
        alert("You loose!");
        }
        else 
        {
        alert("Draw!")
        }
    }
    function winning_condition()
        {
        if(document.f1.b00.value==symbol && document.f1.b01.value==symbol && document.f1.b02.value==symbol)
        return true;
        else if(document.f1.b10.value==symbol && document.f1.b11.value==symbol && document.f1.b12.value==symbol)
        return true;
        else if(document.f1.b20.value==symbol && document.f1.b21.value==symbol && document.f1.b22.value==symbol)
        return true;
        else if(document.f1.b00.value==symbol && document.f1.b10.value==symbol && document.f1.b20.value==symbol)
        return true;
        else if(document.f1.b01.value==symbol && document.f1.b11.value==symbol && document.f1.b21.value==symbol)
        return true;
        else if(document.f1.b02.value==symbol && document.f1.b12.value==symbol && document.f1.b22.value==symbol)
        return true;
        else if(document.f1.b00.value==symbol && document.f1.b11.value==symbol && document.f1.b22.value==symbol)
        return true;
        else if(document.f1.b02.value==symbol && document.f1.b11.value==symbol && document.f1.b20.value==symbol)
        return true;
        }
    function clearBtn()
    {
        status = "X"
        document.f1.b00.value="   ";
        document.f1.b01.value="   ";
        document.f1.b02.value="   ";
        document.f1.b10.value="   ";
        document.f1.b11.value="   ";
        document.f1.b12.value="   ";
        document.f1.b20.value="   ";
        document.f1.b21.value="   ";
        document.f1.b22.value="   ";
    }
    </script>
</head>
<body>
    <div align="center">
    <h1>Tic Tac Toe</h1>
    <form name="f1">
        <input type="button" name="b00" value="     " onclick="markbox(this)"/>
        <input type="button" name="b01" value="     " onclick="markbox(this)"/>
        <input type="button" name="b02" value="     " onclick="markbox(this)/></br>
        <input type="button" name="b10" value="     " onclick="markbox(this)"/>
        <input type="button" name="b11" value="     " onclick="markbox(this)"/>
        <input type="button" name="b12" value="     " onclick="markbox(this)"/></br>
        <input type="button" name="b20" value="     " onclick="markbox(this)"/>
        <input type="button" name="b21" value="     " onclick="markbox(this)"/>
        <input type="button" name="b22" value="     " onclick="markbox(this)"/>
        </br></br></br>
        <input type="reset" value="RESET GAME" onclick="clearBtn()">
    </form>     
    </div>
</body>

4

1 に答える 1

0

まず、HTML を正しく閉じていないことです。

onclick="markbox(this)/>

する必要があります:

onclick="markbox(this)" />

(末尾の " に注意してください)。

問題は、ボタンの 1 つをクリックした瞬間にシンボル var をリセットしているようです。勝つために常に間違ったシンボルをチェックします。var last_clicked を作成し、それを win_condition で使用します。

次のコードを試してください。

http://jsfiddle.net/wG9G5/1/

于 2013-03-01T07:25:21.237 に答える