0

我正在编写一个使用拖放的 HTML/Javascript 井字游戏。基本上，玩家将 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>
4

2 回答 2

0

}您在 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 &更改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"); }
}

但这完全取决于你

于 2013-11-09T05:50:35.323 回答
0

看来您还没有定义player1and player2。如果您F12在浏览器中点击，您应该会收到错误消息。

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

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

然后您必须检查该函数的输出以确定获胜者，因此您checkForWinner();在onDrop()函数中的位置，请尝试以下操作：

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

和处理程序没有识别你的函数定义，所以我通过在对象上定义它们使它们成为全局的，ondragstart而且你没有定义一个辅助函数，所以我做了一个空白的。这是工作示例：ondropwindowclone

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

没有弹出警报的原因是因为您只是将所有单元格设置为等于null。您需要在函数中x或函数中设置正确的单元格值，然后它应该可以完美地工作，假设您有足够的语句来处理所有可能的游戏动作。oonDropif

于 2013-11-09T05:51:25.980 回答