- 完整的游戏功能：
- 黑白双方轮流下棋
- 自动判定胜负
- 支持重新开始游戏
- 美观的界面：
- 标准的15×15棋盘
- 棋盘带有网格线和五个星位点
- 棋子使用渐变效果，看起来更立体
- 状态显示清晰
- 用户友好：
- 实时显示当前回合信息
- 有效的落子位置检测
- 简单直观的操作方式
- 代码特性：
- 使用Canvas绘制棋盘和棋子
- 完整的胜负判定算法
- 响应式的用户交互
- 清晰的代码结构和注释
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>五子棋游戏</title>
<style>
.container {
text-align: center;
margin: 20px auto;
}
#chessboard {
border: 2px solid #8B4513;
margin: 0 auto;
background-color: #DEB887;
}
.status {
margin: 20px;
font-size: 24px;
color: #333;
}
.restart-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.restart-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<p class="container">
<p class="status" id="status">黑方回合</p>
<canvas id="chessboard" width="600" height="600"></canvas>
<br>
<button class="restart-btn" onclick="restartGame()">重新开始</button>
</p>
<script>
const canvas = document.getElementById('chessboard');
const ctx = canvas.getContext('2d');
const statusDiv = document.getElementById('status');
const GRID_SIZE = 40; // 格子大小
const BOARD_SIZE = 15; // 15x15的棋盘
const PIECE_RADIUS = 18; // 棋子半径
let currentPlayer = 1; // 1为黑棋，2为白棋
let gameOver = false;
let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
// 初始化棋盘
function initBoard() {
// 绘制棋盘背景
ctx.fillStyle = '#DEB887';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制棋盘线
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
// 绘制横线
for (let i = 0; i < BOARD_SIZE; i++) {
ctx.beginPath();
ctx.moveTo(GRID_SIZE, GRID_SIZE + i * GRID_SIZE);
ctx.lineTo(GRID_SIZE * BOARD_SIZE, GRID_SIZE + i * GRID_SIZE);
ctx.stroke();
}
// 绘制竖线
for (let i = 0; i < BOARD_SIZE; i++) {
ctx.beginPath();
ctx.moveTo(GRID_SIZE + i * GRID_SIZE, GRID_SIZE);
ctx.lineTo(GRID_SIZE + i * GRID_SIZE, GRID_SIZE * BOARD_SIZE);
ctx.stroke();
}
// 绘制中心点和四个星位
const points = , , , , ];
points.forEach(() => {
ctx.beginPath();
ctx.arc(GRID_SIZE + x * GRID_SIZE, GRID_SIZE + y * GRID_SIZE, 5, 0, Math.PI * 2);
ctx.fillStyle = '#000';
ctx.fill();
});
}
// 绘制棋子
function drawPiece(row, col, player) {
const x = GRID_SIZE + col * GRID_SIZE;
const y = GRID_SIZE + row * GRID_SIZE;
ctx.beginPath();
ctx.arc(x, y, PIECE_RADIUS, 0, Math.PI * 2);
// 创建渐变
const gradient = ctx.createRadialGradient(
x - 5, y - 5, 1,
x, y, PIECE_RADIUS
);
if (player === 1) { // 黑棋
gradient.addColorStop(0, '#666');
gradient.addColorStop(1, '#000');
} else { // 白棋
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#ccc');
}
ctx.fillStyle = gradient;
ctx.fill();
ctx.strokeStyle = player === 1 ? '#000' : '#ccc';
ctx.stroke();
}
// 检查是否获胜
function checkWin(row, col) {
const directions = , ], // 水平
, ], // 垂直
, ], // 主对角线
, ] // 副对角线
];
for (let of directions) {
let count = 1;
// 向一个方向查找
for (let i = 1; i < 5; i++) {
const newRow = row + dir1 * i;
const newCol = col + dir1 * i;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) break;
if (board !== currentPlayer) break;
count++;
}
// 向相反方向查找
for (let i = 1; i < 5; i++) {
const newRow = row + dir2 * i;
const newCol = col + dir2 * i;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) break;
if (board !== currentPlayer) break;
count++;
}
if (count >= 5) return true;
}
return false;
}
// 处理点击事件
canvas.addEventListener('click', (e) => {
if (gameOver) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 计算落子的行列
const col = Math.round((x - GRID_SIZE) / GRID_SIZE);
const row = Math.round((y - GRID_SIZE) / GRID_SIZE);
// 检查是否在有效范围内
if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) return;
// 检查该位置是否已有棋子
if (board !== 0) return;
// 放置棋子
board = currentPlayer;
drawPiece(row, col, currentPlayer);
// 检查是否获胜
if (checkWin(row, col)) {
statusDiv.textContent = (currentPlayer === 1 ? '黑方' : '白方') + '获胜！';
gameOver = true;
return;
}
// 切换玩家
currentPlayer = currentPlayer === 1 ? 2 : 1;
statusDiv.textContent = (currentPlayer === 1 ? '黑方' : '白方') + '回合';
});
// 重新开始游戏
function restartGame() {
board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
currentPlayer = 1;
gameOver = false;
statusDiv.textContent = '黑方回合';
initBoard();
}
// 初始化游戏
initBoard();
</script>
</body>
</html>
