Question

我正在编写一个使用拖放的HTML / Javascript tic-tac-toe游戏。基本上玩家将x或o图像拖放到棋盘上，而我目前必须检查并声明获胜者的代码无效。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

.square {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaa;
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();
    }

    var cell1 = null;
    var cell2 = null;
    var cell3 = null;
    var cell4 = null;
    var cell5 = null;
    var cell6 = null;
    var cell7 = null;
    var cell8 = null;
    var cell9 = null;

function onDrop(event) {
var id = event.target.id;
if (player1) {
  cell = 'o';
} else {
  cell = 'x';
}
checkForWinner();
}

function checkForWinner() {
if (cell1 === 'o' && cell2 === 'o' && cell3 === 'o') {
 return player1;
} else if (cell1 === 'x' && cell2 === 'x' && cell3 === 'x') {
 return player2;
} else if (cell4 === 'O' && cell5 === 'O' && cell6 === 'O') {
 return player1;
} else if (cell4 === 'x' && cell5 === 'x' && cell6 === 'x') {
 return player2;
} else if (cell7 === 'o' && cell8 === 'o' && cell9 === 'o') {
 return player1;
} else if (cell7 === 'x' && cell8 === 'x' && cell9 === 'x') {
 return player2;
} else if (cell1 === 'o' && cell4 === 'o' && cell7 === 'o') {
 return player1;
} else if (cell1 === 'x' && cell4 === 'x' && cell7 === 'x') {
 return player2;
} else if (cell2 === 'o' && cell5 === 'o' && cell8 === 'o') {
 return player1;
} else if (cell2 === 'x' && cell5 === 'x' && cell8 === 'x') {
 return player2;
} else if (cell3 === 'o' && cell6 === 'o' && cell9 === 'o') {
 return player1;
} else if (cell3 === 'x' && cell6 === 'x' && cell9 === 'x') {
 return player2;
} else if (cell1 === 'o' && cell5 === 'o' && cell9 === 'o') {
 return player1;
} else if (cell1 === 'x' && cell5 === 'x' && cell9 === 'x') {
 return player2;
} else if (cell3 === 'o' && cell5 === 'o' && cell7 === 'o') {
 return player1;
} else if (cell3 === 'x' && cell5 === 'x' && cell7 === 'x') {
 return player2;
}
}

</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 border="0">
    <tr>
        <td id="cell1" class="square" ondrop="drop(event)"    ondragover="allowDrop(event)"></td>
        <td id="cell2" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell3" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td id="cell4" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell5" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell6" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td id="cell7" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell8" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
        <td id="cell9" class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></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>

Answer 1

你在checkForWinner（）函数的末尾缺少一个结束大括号}，特别是关闭你的最后一个条件

 function checkForWinner() {
   if (cell1 === 'o' && cell2 === 'o' && cell3 === 'o') {
     return player1;
   /* ... */
   } else if (cell3 === 'x' && cell5 === 'x' && cell7 === 'x') {
     return player2;

   // vvv HERE vvv
   }

}

drop函数也在调用checkForWinner()，它实际上没有做任何事情......

如果您更改了player1＆amp; player2字符串，例如"player1" / "player2"您可以尝试执行类似

的操作

function onDrop(event) {
    var id = event.target.id;
    if (player1) {
      cell = 'o';
    } else {
      cell = 'x';
    }
    if ( checkForWinner() === "player1" ) { alert("Player 1 Wins");}
    else if ( checkForWinnder() === "player2") { alert("Player 2 Wins"); }
}

但这完全取决于你

Answer 2

您似乎尚未定义player1和player2。如果您在浏览器中点击 F12 ，则应该收到错误。

尝试将这两行放在checkForWinner()函数的开头：

var player1 = 'player1';
var player2 = 'player2';

然后你必须检查该功能的输出以确定胜利者，所以checkForWinner();功能中onDrop()的位置，请尝试：

var winner = checkForWinner();
if(winner == 'player1' || winner == 'player2')
    alert(winner+' won!');

ondragstart和ondrop处理程序无法识别您的函数定义，因此我通过在window对象上定义它们使它们全局化，并且您没有{{1定义了辅助函数，所以我做了一个空白的。这是一个有效的例子：

http://jsfiddle.net/9me7n/1/

警报未弹出的原因是您只是将所有单元格设置为clone。您需要在null函数中将正确的单元格值设置为x或o，然后它应该完美无缺，假设您有足够的onDrop语句用于所有可能的游戏动作。

在tic-tac-toe中宣布胜利者不确定出了什么问题

2 个答案: