<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优雅五子棋</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 800px;
width: 100%;
margin: 0 auto;
text-align: center;
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
font-size: 2.5rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.game-info {
display: flex;
justify-content: space-between;
width: 480px;
margin: 0 auto 20px;
font-size: 1.2rem;
color: #34495e;
}
.player-info {
padding: 10px 20px;
border-radius: 30px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.black {
background-color: #2c3e50;
color: white;
}
.white {
background-color: #ecf0f1;
color: #2c3e50;
border: 1px solid #bdc3c7;
}
.active {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.board {
display: grid;
grid-template-columns: repeat(15, 32px);
grid-template-rows: repeat(15, 32px);
gap: 0;
margin: 0 auto;
background-color: #e8bb6e;
border: 2px solid #8d6e3a;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
border-radius: 4px;
position: relative;
}
.cell {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
}
.cell::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #8d6e3a;
z-index: 1;
}
.cell::after {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 100%;
background-color: #8d6e3a;
z-index: 1;
}
.piece {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
top: 2px;
left: 2px;
z-index: 2;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
transition: transform 0.2s;
}
.piece.black {
background-color: #2c3e50;
background: radial-gradient(circle at 30% 30%, #34495e, #2c3e50);
}
.piece.white {
background-color: #ecf0f1;
background: radial-gradient(circle at 30% 30%, #ffffff, #bdc3c7);
}
.piece.last-move {
box-shadow: 0 0 0 2px #e74c3c, 0 3px 5px rgba(0,0,0,0.3);
}
.controls {
margin-top: 30px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 30px;
cursor: pointer;
margin: 0 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 100;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 400px;
width: 90%;
}
.modal h2 {
color: #2c3e50;
margin-bottom: 20px;
}
.modal button {
margin-top: 20px;
}
@media (max-width: 600px) {
.board {
grid-template-columns: repeat(15, 20px);
grid-template-rows: repeat(15, 20px);
}
.cell {
width: 20px;
height: 20px;
}
.piece {
width: 18px;
height: 18px;
top: 1px;
left: 1px;
}
.game-info {
width: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>优雅五子棋</h1>
<div class="game-info">
<div class="player-info black active" id="black-info">黑棋回合</div>
<div class="player-info white" id="white-info">白棋</div>
</div>
<div class="board" id="board"></div>
<div class="controls">
<button id="restart-btn">重新开始</button>
<button id="undo-btn">悔棋</button>
</div>
</div>
<div class="modal" id="win-modal">
<div class="modal-content">
<h2 id="winner-message">黑棋获胜!</h2>
<button id="play-again-btn">再玩一局</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('board');
const blackInfo = document.getElementById('black-info');
const whiteInfo = document.getElementById('white-info');
const restartBtn = document.getElementById('restart-btn');
const undoBtn = document.getElementById('undo-btn');
const winModal = document.getElementById('win-modal');
const winnerMessage = document.getElementById('winner-message');
const playAgainBtn = document.getElementById('play-again-btn');
const BOARD_SIZE = 15;
let currentPlayer = 'black';
let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
let gameOver = false;
let moveHistory = [];
// 初始化棋盘
function initBoard() {
board.innerHTML = '';
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleCellClick);
board.appendChild(cell);
}
}
}
// 处理点击事件
function handleCellClick(e) {
if (gameOver) return;
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
if (gameBoard[row][col] !== null) return;
placePiece(row, col);
if (checkWin(row, col)) {
gameOver = true;
const winner = currentPlayer === 'black' ? '黑棋' : '白棋';
winnerMessage.textContent = `${winner}获胜!`;
winModal.style.display = 'flex';
} else {
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
updatePlayerInfo();
}
}
// 放置棋子
function placePiece(row, col) {
gameBoard[row][col] = currentPlayer;
moveHistory.push({ row, col, player: currentPlayer });
const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
const piece = document.createElement('div');
piece.className = `piece ${currentPlayer}`;
// 移除上一个棋子的last-move类
const lastMove = document.querySelector('.last-move');
if (lastMove) {
lastMove.classList.remove('last-move');
}
piece.classList.add('last-move');
cell.appendChild(piece);
// 添加动画效果
piece.style.transform = 'scale(0)';
setTimeout(() => {
piece.style.transform = 'scale(1)';
}, 10);
}
// 检查获胜
function checkWin(row, col) {
const directions = [
[0, 1], // 水平
[1, 0], // 垂直
[1, 1], // 对角线
[1, -1] // 反对角线
];
const player = gameBoard[row][col];
for (const [dx, dy] of directions) {
let count = 1;
// 正向检查
for (let i = 1; i < 5; i++) {
const newRow = row + i * dx;
const newCol = col + i * dy;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || gameBoard[newRow][newCol] !== player) {
break;
}
count++;
}
// 反向检查
for (let i = 1; i < 5; i++) {
const newRow = row - i * dx;
const newCol = col - i * dy;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || gameBoard[newRow][newCol] !== player) {
break;
}
count++;
}
if (count >= 5) {
return true;
}
}
return false;
}
// 更新玩家信息显示
function updatePlayerInfo() {
if (currentPlayer === 'black') {
blackInfo.classList.add('active');
whiteInfo.classList.remove('active');
} else {
blackInfo.classList.remove('active');
whiteInfo.classList.add('active');
}
}
// 重新开始游戏
function restartGame() {
gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
currentPlayer = 'black';
gameOver = false;
moveHistory = [];
updatePlayerInfo();
initBoard();
winModal.style.display = 'none';
}
// 悔棋
function undoMove() {
if (moveHistory.length === 0 || gameOver) return;
const lastMove = moveHistory.pop();
gameBoard[lastMove.row][lastMove.col] = null;
const cell = document.querySelector(`.cell[data-row="${lastMove.row}"][data-col="${lastMove.col}"]`);
const piece = cell.querySelector('.piece');
if (piece) {
piece.remove();
}
// 更新最后一个棋子的样式
const newLastMove = moveHistory[moveHistory.length - 1];
if (newLastMove) {
const newCell = document.querySelector(`.cell[data-row="${newLastMove.row}"][data-col="${newLastMove.col}"]`);
const newPiece = newCell.querySelector('.piece');
if (newPiece) {
newPiece.classList.add('last-move');
}
}
currentPlayer = lastMove.player;
updatePlayerInfo();
}
// 事件监听
restartBtn.addEventListener('click', restartGame);
undoBtn.addEventListener('click', undoMove);
playAgainBtn.addEventListener('click', restartGame);
// 初始化游戏
initBoard();
});
</script>
</body>
</html>
