Question

这是JS代码：

    <script language="javascript" type="text/javascript">
        var step = 1;
        var e;
        function move(a){
            if (step % 2 == 0)
                e = "O";
            else
                e = "X";
            document.getElementById(a).innerHTML = e;
            step++;
            alert(document.getElementById(a).value);
        }
    </script>

和HTML：

        <table border="1" align="center">
            <tr>
                <th colspan="3">X O Game</th>
            </tr>
            <tr align="center">
                <td id="td1" height="50" width="50" onclick="move('td1');"></td>
                <td id="td2" height="50" width="50" onclick="move('td2');"></td>
                <td id="td3" height="50" width="50" onclick="move('td3');"></td>
            </tr>
            <tr align="center">
                <td id="td4" height="50" width="50" onclick="move('td4');"></td>
                <td id="td5" height="50" width="50" onclick="move('td5');"></td>
                <td id="td6" height="50" width="50" onclick="move('td6');"></td>
            </tr>
            <tr align="center">
                <td id="td7" height="50" width="50" onclick="move('td7');"></td>
                <td id="td8" height="50" width="50" onclick="move('td8');"></td>
                <td id="td9" height="50" width="50" onclick="move('td9');"></td>
            </tr>
        </table>

似乎td是未定义的，为什么会这样？..任何人都可以帮助我吗？如果按下使用过的td，它就会降低它。

Answer 1

您无法在TD上使用.value。使用innerHTML。在将其设置为新值之前，请检查它是否为空。例如：

   function move(a) {
       var elem = document.getElementById(a);
       if (!a.innerHTML) {
           if (step % 2 == 0) e = "O";
           else e = "X";

           elem.innerHTML = e;
           step++;
       }
   }

请参阅：http://jsfiddle.net/wo2t5Lrn/

现在，如果您单击已使用的单元格，它将忽略它。例如，如果要显示错误消息而不是使用忽略用户，则可以添加else子句。

我假设您下一步将弄清楚谁赢了。看看这个：2 in a row c# program game虽然它是C＃（但我只用伪代码回答），原理是一样的。你只需要通过检查它是否是三行中的一部分来检查当前移动是否是获胜状态的一部分。

编辑：为了好玩，我决定尝试让事情真正发挥作用：

http://jsfiddle.net/wo2t5Lrn/4/

XO游戏没有按预期工作

1 个答案: