帮我写一个html5实现拖放操作的井字棋游戏的代码
时间: 2023-06-05 11:06:22 浏览: 58
好的,以下是一个简单的拖放操作的井字棋游戏的HTML5代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe Game</title>
<style>
#board {
display: flex;
flex-wrap: wrap;
width: 330px;
height: 330px;
margin: auto;
border: solid 1px black;
}
.square {
width: 100px;
height: 100px;
border: solid 1px black;
text-align: center;
font-size: 72px;
line-height: 96px;
cursor: pointer;
}
.square.x {
color: blue;
}
.square.o {
color: red;
}
</style>
</head>
<body>
<h1>Tic Tac Toe Game</h1>
<div id="board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<script>
const squares = document.querySelectorAll('.square');
let currentPlayer = "x";
let gameStatus = ["", "", "", "", "", "", "", "", ""];
function handleDragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function handleDragEnter(event) {
event.preventDefault();
event.target.classList.add("over");
}
function handleDragOver(event) {
event.preventDefault();
}
function handleDragLeave(event) {
event.target.classList.remove("over");
}
function handleDrop(event) {
event.preventDefault();
const square = event.target;
const id = event.dataTransfer.getData("text/plain");
const draggedSquare = document.getElementById(id);
const squareIndex = Array.prototype.indexOf.call(squares, square);
const draggedSquareIndex = Array.prototype.indexOf.call(squares, draggedSquare);
if (gameStatus[squareIndex] === "") {
square.classList.remove("over");
square.classList.add(currentPlayer);
square.innerHTML = currentPlayer.toUpperCase();
gameStatus[squareIndex] = currentPlayer;
draggedSquare.classList.remove(currentPlayer);
draggedSquare.innerHTML = "";
gameStatus[draggedSquareIndex] = "";
checkResult();
changePlayer();
}
}
function changePlayer() {
currentPlayer = currentPlayer === "x" ? "o" : "x";
}
function checkResult() {
const winningCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let i = 0; i < winningCombos.length; i++) {
const combo = winningCombos[i];
if (gameStatus[combo[0]] !== "" &&
gameStatus[combo[0]] === gameStatus[combo[1]] &&
gameStatus[combo[1]] === gameStatus[combo[2]]) {
alert(currentPlayer.toUpperCase() + " has won!");
resetGame();
break;
}
else if (gameStatus.indexOf("") === -1) {
alert("Draw!");
resetGame();
break;
}
}
}
function resetGame() {
for (let i = 0; i < squares.length; i++) {
squares[i].classList.remove("x", "o");
squares[i].innerHTML = "";
gameStatus[i] = "";
}
currentPlayer = "x";
}
for (let i = 0; i < squares.length; i++) {
const square = squares[i];
square.addEventListener("dragstart", handleDragStart);
square.addEventListener("dragenter", handleDragEnter);
square.addEventListener("dragover", handleDragOver);
square.addEventListener("dragleave", handleDragLeave);
square.addEventListener("drop", handleDrop);
}
</script>
</body>
</html>