写一个好玩的html源码
时间: 2023-12-18 20:03:03 浏览: 46
当然可以!以下是一个简单的井字棋游戏的HTML源码,希望你喜欢!
```html
<!DOCTYPE html>
<html>
<head>
<title>井字棋游戏</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
width: 80px;
height: 80px;
border: 1px solid black;
text-align: center;
font-size: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>井字棋游戏</h1>
<table>
<tr>
<td id="cell-0" onclick="makeMove(0)"></td>
<td id="cell-1" onclick="makeMove(1)"></td>
<td id="cell-2" onclick="makeMove(2)"></td>
</tr>
<tr>
<td id="cell-3" onclick="makeMove(3)"></td>
<td id="cell-4" onclick="makeMove(4)"></td>
<td id="cell-5" onclick="makeMove(5)"></td>
</tr>
<tr>
<td id="cell-6" onclick="makeMove(6)"></td>
<td id="cell-7" onclick="makeMove(7)"></td>
<td id="cell-8" onclick="makeMove(8)"></td>
</tr>
</table>
<script>
var currentPlayer = "X";
var cells = document.getElementsByTagName("td");
function makeMove(cellIndex) {
var cell = cells[cellIndex];
if (cell.innerHTML === "") {
cell.innerHTML = currentPlayer;
cell.style.color = currentPlayer === "X" ? "red" : "blue";
checkWinner();
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
}
function checkWinner() {
var 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 (var i = 0; i < winningCombos.length; i++) {
var combo = winningCombos[i];
if (cells[combo[0]].innerHTML !== "" &&
cells[combo[0]].innerHTML === cells[combo[1]].innerHTML &&
cells[combo[1]].innerHTML === cells[combo[2]].innerHTML) {
alert("玩家 " + currentPlayer + " 赢了!");
resetBoard();
return;
}
}
if (isBoardFull()) {
alert("平局!");
resetBoard();
}
}
function isBoardFull() {
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML === "") {
return false;
}
}
return true;
}
function resetBoard() {
for (var i = 0; i < cells.length; i++) {
cells[i].innerHTML = "";
cells[i].style.color = "black";
}
currentPlayer = "X";
}
</script>
</body>
</html>
```
这是一个简单的井字棋游戏,通过点击格子来下棋。希望你喜欢!