宣布井字游戏获胜者答案

【问题标题】：Declaring a winner in tic tac toe宣布井字游戏获胜者
【发布时间】：2013-11-09 00:11:31
【问题描述】：

我正在编写井字游戏程序。到目前为止，我有 3x3 网格，并且可以将 X 和 O 图像拖放到网格中。

要宣布获胜者，我会使用 if else 语句吗？

我只是想知道如何宣布获胜者。我猜这需要javascript。

这是我在 jsfiddle 中的代码，以及我在下面编译的代码：

<!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>

【问题讨论】：

到目前为止你尝试过什么？有许多方法可能有效，但通常情况下，SO 用户不会为您解决这样的一般问题。
是的，我不是在寻找答案，而只是一个提示。我不确定我的语法是否正确，但我正在尝试制作 if else 语句

标签： javascript html

【解决方案1】：

在我看来，你走错了路。您应该对每个字段使用“onclick()”，然后将 div 的 innerhtml 更改为 X 或 O。您可能还想在 Google 上搜索“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],

编辑： 您可以将每个井字游戏单元的状态和值存储在一个数组中。通过这种方式，您可以轻松访问它们以确定是否有赢家。 http://pastebin.com/xDhBUfeS

【讨论】：

使用拖放的表格标签不能做到这一点吗？
这并不重要。这肯定也可以通过您的拖放方法实现。
如何像本例那样“标记”表格单元格以宣布获胜者？
我会在开始时创建一个数组。然后只需保存其中的转弯即可。如果用户在第三个单元格中输入 X，则如下所示： myArray[3] = "X";当用户在第 6 个单元格中放一个 O 时，就像：myArray[6] = "O";在每一回合之后，您现在可以轻松检查所有单元格并进行上述计算以确定获胜者。
我把链接放在了答案中。

【解决方案2】：

玩家可以通过 8 种方式获胜。一种直接的方法是使用 if-then-else 测试每种方式。但首先最好使用两个数组记录移动，并对每个方格进行编号。

【讨论】：

【解决方案3】：

循环怎么样？

遍历每一行和每一列（以及中间的两条对角线）

【讨论】：