DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋游戏title>
<style>
.board {
display: grid;
grid-template-columns: repeat(15, 40px);
grid-template-rows: repeat(15, 40px);
gap: 1px;
background-color: #f0d9b5;
}
.cell {
width: 40px;
height: 40px;
background-color: #fff;
border: 1px solid #000;
cursor: pointer;
}
.cell:hover {
background-color: #ccc;
}
#reset-button {
display: block;
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.player-one {
background-color: #000;
border-radius: 50%;
}
.player-two {
background-color: #fff;
border-radius: 50%;
}
style>
head>
<body>
<div class="board" id="board">
div>
<button id="reset-button">重新开始button>
<script>
const board = document.getElementById("board");
const resetButton = document.getElementById("reset-button");
const gridSize = 15;
const cellSize = 40;
let currentPlayer = "player-one";
let gameOver = false;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const cell = document.createElement("div");
cell.className = "cell";
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener("click", handleCellClick);
board.appendChild(cell);
}
}
function handleCellClick(event) {
if (gameOver) return;
const cell = event.target;
if (!cell.classList.contains("player-one") && !cell.classList.contains("player-two")) {
cell.classList.add(currentPlayer);
if (checkForWin(parseInt(cell.dataset.row), parseInt(cell.dataset.col))) {
showWinMessage();
} else {
currentPlayer = currentPlayer === "player-one" ? "player-two" : "player-one";
}
}
}
function showWinMessage() {
gameOver = true;
alert(currentPlayer === "player-one" ? "玩家一获胜！" : "玩家二获胜！");
}
function resetGame() {
const cells = document.querySelectorAll(".cell");
cells.forEach((cell) => {
cell.classList.remove("player-one", "player-two");
});
currentPlayer = "player-one";
gameOver = false;
}
resetButton.addEventListener("click", resetGame);
function checkForWin(row, col) {
const currentPlayerClass = currentPlayer === "player-one" ? "player-one" : "player-two";
if (
checkDirection(row, col, 0, 1, currentPlayerClass) ||
checkDirection(row, col, 0, -1, currentPlayerClass)
) {
showWinMessage();
return;
}
if (
checkDirection(row, col, 1, 0, currentPlayerClass) ||
checkDirection(row, col, -1, 0, currentPlayerClass)
) {
showWinMessage();
return;
}
if (
checkDirection(row, col, 1, 1, currentPlayerClass) ||
checkDirection(row, col, -1, -1, currentPlayerClass) ||
checkDirection(row, col, 1, -1, currentPlayerClass) ||
checkDirection(row, col, -1, 1, currentPlayerClass)
) {
showWinMessage();
return;
}
}
function checkDirection(row, col, rowDelta, colDelta, currentPlayerClass) {
let count = 0;
for (let i = 0; i < 5; i++) {
const newRow = row + i * rowDelta;
const newCol = col + i * colDelta;
if (
newRow >= 0 &&
newRow < gridSize &&
newCol >= 0 &&
newCol < gridSize &&
document.querySelector(`[data-row="${newRow}"][data-col="${newCol}"]`).classList.contains(currentPlayerClass)
) {
count++;
} else {
break;
}
}
return count >= 5;
}
script>
body>
html>
