1

私は三目並べプログラムを書いています。これまでのところ、3x3 グリッドがあり、X と O の画像をグリッドにドラッグ アンド ドロップできます。

勝者を宣言するには、if else ステートメントを使用しますか?

勝者をどのように宣言できるのか疑問に思っています。これにはjavascriptが必要だと思います。

jsfiddle のコードと、以下にコンパイルしたものを次に示します。

http://jsfiddle.net/VXQ7P/

<!DOCTYPE HTML>
<html>
<head>

<style type="text/css">

  #div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9 {
      width: 80px;
      height: 80px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      float: left;
  }
  
</style>

 <script type="text/javascript">

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
        helper:clone;
    }

    function drop(ev) {
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data).cloneNode(true));
        ev.preventDefault();
    }
</script>

<title>JavaScript  Drag &amp; Drop Tic-Tac-Toe</title>
</head>

<body>
    <p>Drag the X and O images into the tic-tac-toe board:</p>
    
    <table>
        <tr>
            <td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
        </tr>
        <tr>
            <td><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
        </tr>
        <tr>
            <td><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            <td><div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
        </tr>
    </table>

    <img id="drag1" src="X.png" ondragstart="drag(event)" width="75" height="75"/>
    <img id="drag2" src="O.png" draggable="true" ondragstart="drag(event)" width="75" height="75"/> 
</body>
</html>
4

3 に答える 3

3

私の意見では、あなたはそこに間違った道を進んでいます。すべてのフィールドに「onclick()」を使用してから、div の innerhtml を X または O に変更する必要があります。「tic tac toe javascript」をグーグルで検索することもできます。以前は多くの人がこれを行っていました。たとえば、これを確認してください: http://jsfiddle.net/rtoal/ThPEH/ 勝者を定義する方法は非常に理解しやすく、よく説明されています。;) サイトから取得:

/*
 * To determine a win condition, each square is "tagged" from left
 * to right, top to bottom, with successive powers of 2.  Each cell
 * thus represents an individual bit in a 9-bit string, and a
 * player's squares at any given time can be represented as a
 * unique 9-bit value. A winner can thus be easily determined by
 * checking whether the player's current 9 bits have covered any
 * of the eight "three-in-a-row" combinations.
 *
 *     273                 84
 *        \               /
 *          1 |   2 |   4  = 7
 *       -----+-----+-----
 *          8 |  16 |  32  = 56
 *       -----+-----+-----
 *         64 | 128 | 256  = 448
 *       =================
 *         73   146   292
 *
 */
wins = [7, 56, 448, 73, 146, 292, 273, 84],

編集: 各 TicTacToe セルの状態と値を配列に格納できます。このようにして、それらに簡単にアクセスして、勝者がいるかどうかを判断できます。 http://pastebin.com/xDhBUfeS

于 2013-11-08T05:20:26.653 に答える
1

プレイヤーが勝つ方法は 8 つあります。簡単な方法は、if-then-else を使用してそれぞれの方法をテストすることです。しかし、最初に 2 つの配列を使用して移動を記録し、各正方形に番号を付けるとよいでしょう。

于 2013-11-08T05:14:25.233 に答える