Question

<script type="text/javascript">
var winArray = new Array;
var turn = 0;
var data1 = document.getElementById('data1');
var data2 = document.getElementById('data2');
var data3 = document.getElementById('data3');
var data4 = document.getElementById('data4');
var data5 = document.getElementById('data5');
var data6 = document.getElementById('data6');
var data7 = document.getElementById('data7');
var data8 = document.getElementById('data8');
var data9 = document.getElementById('data9');
var tiger = document.getElementById('tiger');
var dragon = document.getElementById('dragon');

function allowDrop(ev) {
ev.preventDefault();}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
document.getElementById(data).setAttribute("draggable", "false");
if (data == "dragon"){
    document.getElementById("dragon").setAttribute("style", "background: yellow;");}
else{
    document.getElementById("tiger").setAttribute("style", "background: blue;");}
ev.target.removeAttribute('ondrop');
document.getElementById(data).removeAttribute('id');
turn++;
whosTurn();
checkWinner();}

function whosTurn(){

if(turn % 2 == 0){
document.getElementById("tiger").setAttribute("draggable", "false");
document.getElementById("dragon").setAttribute("draggable", "true");}
else{
document.getElementById("tiger").setAttribute("draggable", "true");
document.getElementById("dragon").setAttribute("draggable", "false");
}}

function checkWinner(){
if ((data1 == data2 && data1 == data3 && data1 == tiger) ||
(data4 == data5 && data4 == data6 && data4 == tiger) ||
(data7 == data8 && data7 == data9 && data7 == tiger) ||
(data1 == data4 && data1 == data7 && data1 == tiger) ||
(data2 == data5 && data2 == data8 && data2 == tiger) || 
(data3 == data6 && data3 == data9 && data3 == tiger) ||
(data1 == data5 && data1 == data9 && data1 == tiger) ||
(data3 == data5 && data3 == data7 && data3 == tiger)) 
{
alert("Tiger wins!");
}
else if ((data1 == data2 && data1 == data3 && data1 == dragon) ||
(data4 == data5 && data4 == data6 && data4 == dragon) ||
(data7 == data8 && data7 == data9 && data7 == dragon) ||                                                                                            
(data1 == data4 && data1 == data7 && data1 == dragon) ||
(data2 == data5 && data2 == data8 && data2 == dragon) || 
(data3 == data6 && data3 == data9 && data3 == dragon) ||
(data1 == data5 && data1 == data9 && data1 == dragon) ||
(data3 == data5 && data3 == data7 && data3 == dragon)) 
{
alert("Dragon wins!");
}}

</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 id="data1" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
        <td id="data2" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
        <td id="data3" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
    </tr>

    <tr>
        <td id="data4" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
        <td id="data5" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
        <td id="data6" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
    </tr>
    <tr>
        <td id="data7" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
        <td id="data8" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
        <td id="data9" class="tictac" ondrop="drop(event)" ondragover="allowDrop(event)"> </td>
    </tr>


</table>

<img id="dragon" src="Dragon.gif" alt="dragon" draggable="true" ondragstart="drag(event)" width="75" height="75" />
<img id="tiger" src="Tiger.gif" alt="tiger" draggable="false" ondragstart="drag(event)" width="75" height="75" />

我想在一行或一列中有三个相同的图像时宣布获胜者。但问题是checkWinner（），每当我将图像放入表格时，它会自动说老虎是胜利者帮助

Javascript tic tac toe，试图宣布获胜者

0 个答案: