0

ドラッグ アンド ドロップを使用する 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>
4

2 に答える 2