下面是一个简单的游戏网页代码的示例:
<!DOCTYPE html>
<html>
<head>
<title>游戏网页</title>
<style>
#game-board {
width: 400px;
height: 400px;
margin: 0 auto;
border: 1px solid black;
}
.cell {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid black;
text-align: center;
vertical-align: middle;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>游戏网页</h1>
<div id="game-board">
<div class="cell" onclick="makeMove(0)"></div>
<div class="cell" onclick="makeMove(1)"></div>
<div class="cell" onclick="makeMove(2)"></div>
<div class="cell" onclick="makeMove(3)"></div>
<div class="cell" onclick="makeMove(4)"></div>
<div class="cell" onclick="makeMove(5)"></div>
<div class="cell" onclick="makeMove(6)"></div>
<div class="cell" onclick="makeMove(7)"></div>
<div class="cell" onclick="makeMove(8)"></div>
</div>
<script>
var currentPlayer = "X";
var board = ["", "", "", "", "", "", "", "", ""];
function makeMove(cellIndex) {
if (board[cellIndex] === "") {
board[cellIndex] = currentPlayer;
document.getElementsByClassName("cell")[cellIndex].innerText = currentPlayer;
if (checkWinner()) {
alert("玩家 " currentPlayer " 赢了!");
resetGame();
} else if (board.every(cell => cell !== "")) {
alert("平局!");
resetGame();
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
}
}
function checkWinner() {
var winningConditions = [
[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 < winningConditions.length; i ) {
var [a, b, c] = winningConditions[i];
if (board[a] !== "" && board[a] === board[b] && board[a] === board[c]) {
return true;
}
}
return false;
}
function resetGame() {
currentPlayer = "X";
board = ["", "", "", "", "", "", "", "", ""];
var cells = document.getElementsByClassName("cell");
for (var i = 0; i < cells.length; i ) {
cells[i].innerText = "";
}
}
</script>
</body>
</html>
这是一个井字棋游戏网页代码的示例。游戏网页包括一个游戏板,玩家可以点击单元格来下棋。游戏会检查是否有玩家获胜或者平局,并在相应的情况下弹出提示。游戏结束后,玩家可以点击“重置游戏”按钮来重新开始游戏。
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved