- 完整的游戏功能：
- 黑白双方轮流下棋
- 自动判定胜负
- 支持重新开始游戏
- 美观的界面：
- 标准的15×15棋盘
- 棋盘带有网格线和五个星位点
- 棋子使用渐变效果，看起来更立体
- 状态显示清晰
- 用户友好：
- 实时显示当前回合信息
- 有效的落子位置检测
- 简单直观的操作方式
- 代码特性：
- 使用Canvas绘制棋盘和棋子
- 完整的胜负判定算法
- 响应式的用户交互
- 清晰的代码结构和注释
五子棋游戏
<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.movetogrid_size i grid_size grid_size ctx.linetogrid_size i grid_size grid_size board_size ctx.stroke const points='[[7,' 7 3 3 3 11 11 3 11 11 points.foreachx> {
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 = [
[[0, 1], [0, -1]], // 水平
[[1, 0], [-1, 0]], // 垂直
[[1, 1], [-1, -1]], // 主对角线
[[1, -1], [-1, 1]] // 副对角线
];
for (let [dir1, dir2] of directions) {
let count = 1;
// 向一个方向查找
for (let i = 1; i < 5; i++) {
const newRow = row + dir1[0] * i;
const newCol = col + dir1[1] * i;
if (newRow < 0 newrow>= BOARD_SIZE || newCol < 0 newcol>= BOARD_SIZE) break;
if (board[newRow][newCol] !== currentPlayer) break;
count++;
}
// 向相反方向查找
for (let i = 1; i < 5; i++) {
const newRow = row + dir2[0] * i;
const newCol = col + dir2[1] * i;
if (newRow < 0 newrow>= BOARD_SIZE || newCol < 0 newcol>= BOARD_SIZE) break;
if (board[newRow][newCol] !== 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[row][col] !== 0) return;
// 放置棋子
board[row][col] = 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>
