五子棋html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>五子棋游戏</title>
<style>body {display: flex;flex-direction: column;align-items: center;background: #f0d9b5;font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 20px;}h1 {margin-bottom: 10px;}#board {display: grid;grid-template-columns: repeat(15, 30px);grid-template-rows: repeat(15, 30px);gap: 1px;background-color: #333;border: 2px solid #333;}.cell {width: 30px;height: 30px;background-color: #f0d9b5;border-radius: 3px;cursor: pointer;position: relative;}.cell:hover {background-color: #e0cfa3;}.stone {position: absolute;top: 50%;left: 50%;width: 24px;height: 24px;border-radius: 50%;transform: translate(-50%, -50%);}.black {background-color: black;}.white {background-color: white;border: 1px solid black;}#scoreboard {margin-top: 20px;font-size: 18px;}#resetBtn {margin-top: 15px;padding: 8px 16px;font-size: 16px;cursor: pointer;}
</style>
</head>
<body><h1>五子棋游戏</h1><div id="board"></div><div id="scoreboard">黑方胜利次数: <span id="blackWins">0</span> 白方胜利次数: <span id="whiteWins">0</span></div><button id="resetBtn">重新开始</button><script>const boardSize = 15;const board = document.getElementById('board');const blackWinsSpan = document.getElementById('blackWins');const whiteWinsSpan = document.getElementById('whiteWins');const resetBtn = document.getElementById('resetBtn');let currentPlayer = 'black';let boardState = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));let blackWins = 0;let whiteWins = 0;let gameOver = false;function createBoard() {board.innerHTML = '';for (let row = 0; row < boardSize; row++) {for (let col = 0; col < boardSize; col++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = row;cell.dataset.col = col;cell.addEventListener('click', onCellClick);board.appendChild(cell);}}}function onCellClick(e) {if (gameOver) return;const row = parseInt(e.target.dataset.row);const col = parseInt(e.target.dataset.col);if (boardState[row][col] !== null) return;boardState[row][col] = currentPlayer;const stone = document.createElement('div');stone.classList.add('stone', currentPlayer);e.target.appendChild(stone);if (checkWin(row, col, currentPlayer)) {gameOver = true;if (currentPlayer === 'black') {blackWins++;blackWinsSpan.textContent = blackWins;setTimeout(() => alert('黑方获胜！'), 0);} else {whiteWins++;whiteWinsSpan.textContent = whiteWins;setTimeout(() => alert('白方获胜！'), 0);}return;}currentPlayer = currentPlayer === 'black' ? 'white' : 'black';}function checkWin(row, col, player) {return (checkDirection(row, col, player, 1, 0) || // 横向checkDirection(row, col, player, 0, 1) || // 纵向checkDirection(row, col, player, 1, 1) || // 斜向 \checkDirection(row, col, player, 1, -1) // 斜向 /);}function checkDirection(row, col, player, deltaRow, deltaCol) {let count = 1;// 向一个方向计数let r = row + deltaRow;let c = col + deltaCol;while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && boardState[r][c] === player) {count++;r += deltaRow;c += deltaCol;}// 向相反方向计数r = row - deltaRow;c = col - deltaCol;while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && boardState[r][c] === player) {count++;r -= deltaRow;c -= deltaCol;}return count >= 5;}resetBtn.addEventListener('click', () => {gameOver = false;boardState = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));currentPlayer = 'black';createBoard();});createBoard();</script>
</body>
</html>