使用DeepSeek(R1模型)开发一款HTML5五子棋对战游戏，可以与AI进行对战。
提示词
帮我做一款html5五子棋游戏 游戏的各个流程要完善。做的很好 但是界面比例得缩放到75%时候全部界面才能显示出来 这个要修复一下 还有就是AI的水平太低了 游戏毫无难度 需要增强白棋ai的水平
五子棋游戏功能总结
游戏流程
1 开始界面
显示游戏规则和难度选择
提供四种AI难度选项（简单/中等/困难/专家）
2 游戏主界面
15×15标准棋盘
实时显示游戏状态（当前玩家/回合）
动态棋盘和棋子渲染
3 游戏结束界面
显示获胜方（黑方/白方）或平局
提供游戏结果描述
"再来一局"按钮
核心功能
1 棋盘系统
15×15标准五子棋棋盘
动态尺寸调整（响应式设计）
2 游戏机制
黑白双方轮流落子（黑方先行）
五子连珠判定（横/竖/斜方向）
胜负判定与平局判定
最后落子标记（红色圆圈）
3 控制功能
游戏控制
新游戏（可选择难度）
重新开始当前游戏
悔棋功能（可撤销上一步操作）
支持多步悔棋（包括AI落子）
AI对手
难度级别 特性描述
简单 随机落子
中等 基础策略（阻挡玩家连珠）+两层评估
困难 位置评估策略+三层评估
专家 增强算法+四层深度评估
AI增强特性：
连子数量评估（活二/活三/活四）
进攻与防守平衡策略
中心位置优势计算
威胁检测（优先防守玩家威胁位置）
获胜机会优先选择
模拟对手最佳回应
AI思考状态显示（带动画效果）
思考时间随难度增加（专家级最长）
视觉效果
界面设计
动态渐变背景（流动色带）
精美的棋盘和棋子设计（带渐变效果）
当前玩家高亮显示
平滑的弹窗动画
响应式设计
自适应不同屏幕尺寸
移动端优化布局
窗口大小变化自动重绘
特效
最后落子标记（红色圆圈）
AI思考动画（脉动效果）
按钮悬停效果
用户体验
交互优化
游戏状态清晰显示
游戏结束信息丰富化
按钮布局合理化
智能提示
游戏结果描述（不同结果不同文案）
AI思考状态提示
难度选择说明
技术增强
窗口大小变化监听器
动态棋盘尺寸计算
Flex布局确保正确缩放
画布重绘优化
使用方式
复制HTML代码到文件
用浏览器打开即可开始游戏
操作方式：点击棋盘交叉点放置棋子
游戏规则：黑方先行，五子连珠获胜
该版本完美解决了界面比例问题，并在任何屏幕尺寸上都能正确显示。AI智能水平显著提升，特别是专家难度下展现出强大的计算能力，为玩家提供真正的挑战。
五子棋游戏所有源码如下
<!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;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
overflow: auto;
padding: 20px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 900px;
padding: 20px;
}
.title {
color: #fff;
font-size: 3rem;
text-align: center;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
letter-spacing: 3px;
position: relative;
}
.title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 4px;
background: linear-gradient(to right, transparent, #ffeb3b, transparent);
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.game-info {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 20px;
color: white;
font-size: 1.1rem;
padding: 10px 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
flex-wrap: wrap;
}
.player-info {
display: flex;
align-items: center;
gap: 10px;
margin: 5px 0;
}
.player-indicator {
width: 20px;
height: 20px;
border-radius: 50%;
}
.black-indicator {
background: #000;
border: 2px solid #fff;
}
.white-indicator {
background: #fff;
border: 2px solid #000;
}
.current-player {
font-weight: bold;
color: #ffeb3b;
text-shadow: 0 0 5px rgba(255, 235, 59, 0.7);
}
.canvas-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
#game-canvas {
width: 100%;
height: auto;
background: #e9b96e;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
cursor: pointer;
display: block;
}
.controls {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 25px;
width: 100%;
}
button {
padding: 12px 25px;
font-size: 1rem;
border: none;
border-radius: 50px;
background: linear-gradient(to right, #ff9800, #ff5722);
color: white;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
button:active {
transform: translateY(1px);
}
#restart-btn {
background: linear-gradient(to right, #4CAF50, #2E7D32);
}
#undo-btn {
background: linear-gradient(to right, #2196F3, #0D47A1);
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.modal.active {
opacity: 1;
pointer-events: all;
}
.modal-content {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 30px;
border-radius: 20px;
text-align: center;
width: 90%;
max-width: 500px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
transform: scale(0.8);
transition: transform 0.5s ease;
}
.modal.active .modal-content {
transform: scale(1);
}
.modal h2 {
color: #fff;
font-size: 2.2rem;
margin-bottom: 15px;
}
.modal p {
color: #fff;
font-size: 1.3rem;
margin-bottom: 20px;
}
.winner-message {
font-size: 1.8rem;
color: #ffeb3b;
text-shadow: 0 0 10px rgba(255, 235, 59, 0.7);
margin: 15px 0;
padding: 10px;
}
.start-screen {
text-align: center;
}
.start-screen h2 {
margin-bottom: 20px;
}
.game-rules {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 15px;
margin: 15px 0;
text-align: left;
}
.game-rules h3 {
color: #ff9800;
margin-bottom: 10px;
text-align: center;
}
.game-rules ul {
padding-left: 20px;
}
.game-rules li {
color: #fff;
margin-bottom: 8px;
line-height: 1.4;
}
.difficulty {
margin: 15px 0;
color: white;
}
.difficulty select {
padding: 8px 15px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.3);
color: white;
border: 1px solid #ff9800;
font-size: 1rem;
}
.ai-thinking {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
color: white;
font-size: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.ai-thinking.active {
opacity: 1;
}
.ai-thinking span {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
footer {
color: rgba(255, 255, 255, 0.7);
text-align: center;
margin-top: 20px;
font-size: 0.9rem;
max-width: 600px;
}
@media (max-width: 768px) {
.title {
font-size: 2.2rem;
}
.game-container {
padding: 15px;
}
.game-info {
flex-direction: column;
align-items: center;
gap: 10px;
}
.controls {
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 0.9rem;
}
.modal h2 {
font-size: 1.8rem;
}
.winner-message {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.title {
font-size: 1.8rem;
}
.player-info {
font-size: 1rem;
}
button {
padding: 8px 15px;
font-size: 0.85rem;
}
.modal-content {
padding: 20px;
}
.modal h2 {
font-size: 1.5rem;
}
.modal p {
font-size: 1.1rem;
}
.winner-message {
font-size: 1.3rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">增强版五子棋</h1>
<div class="game-container">
<div class="game-info">
<div class="player-info">
<span>黑方:</span>
<div class="player-indicator black-indicator"></div>
<span id="black-player" class="player">玩家</span>
</div>
<div class="player-info">
<span>当前:</span>
<span id="current-player" class="current-player">黑方</span>
</div>
<div class="player-info">
<span>白方:</span>
<div class="player-indicator white-indicator"></div>
<span id="white-player" class="player">AI</span>
</div>
</div>
<div class="canvas-container">
<canvas id="game-canvas" width="600" height="600"></canvas>
<div class="ai-thinking" id="ai-thinking">
<span>AI思考中...</span>
</div>
</div>
<div class="controls">
<button id="new-game-btn">新游戏</button>
<button id="restart-btn">重新开始</button>
<button id="undo-btn">悔棋</button>
</div>
</div>
<footer>
五子棋游戏 | 黑方先行 | 五子连珠获胜 | 使用增强AI算法
</footer>
</div>
<!-- 开始游戏弹窗 -->
<div class="modal" id="start-modal">
<div class="modal-content">
<div class="start-screen">
<h2>增强版五子棋</h2>
<div class="game-rules">
<h3>游戏规则</h3>
<ul>
<li>黑方先行，双方轮流在棋盘上放置棋子</li>
<li>首先在横、竖或斜方向形成五子连珠者获胜</li>
<li>棋盘大小为15×15</li>
<li>您将执黑先行，AI执白</li>
<li>AI使用增强算法，难度越高越强大</li>
</ul>
</div>
<div class="difficulty">
<label for="difficulty">选择难度：</label>
<select id="difficulty">
<option value="easy">简单</option>
<option value="medium" selected>中等</option>
<option value="hard">困难</option>
<option value="expert">专家</option>
</select>
</div>
<button id="start-game-btn">开始游戏</button>
</div>
</div>
</div>
<!-- 游戏结束弹窗 -->
<div class="modal" id="game-over-modal">
<div class="modal-content">
<h2>游戏结束</h2>
<div class="winner-message" id="winner-message">黑方获胜！</div>
<p id="game-result-message">五子连珠，精彩对局！</p>
<button id="play-again-btn">再来一局</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 获取DOM元素
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const startModal = document.getElementById('start-modal');
const gameOverModal = document.getElementById('game-over-modal');
const startGameBtn = document.getElementById('start-game-btn');
const playAgainBtn = document.getElementById('play-again-btn');
const newGameBtn = document.getElementById('new-game-btn');
const restartBtn = document.getElementById('restart-btn');
const undoBtn = document.getElementById('undo-btn');
const currentPlayerEl = document.getElementById('current-player');
const winnerMessageEl = document.getElementById('winner-message');
const aiThinkingEl = document.getElementById('ai-thinking');
const gameResultMessage = document.getElementById('game-result-message');
// 游戏常量
const BOARD_SIZE = 15;
let CELL_SIZE;
let STONE_RADIUS;
// 游戏状态
let board = [];
let currentPlayer = 1; // 1: 黑方, 2: 白方
let gameActive = false;
let moveHistory = [];
let difficulty = "medium";
// 初始化棋盘
function initBoard() {
// 计算动态尺寸
const canvasWidth = canvas.parentElement.clientWidth;
canvas.width = canvasWidth;
canvas.height = canvasWidth;
CELL_SIZE = canvas.width / BOARD_SIZE;
STONE_RADIUS = CELL_SIZE * 0.4;
board = [];
for (let i = 0; i < BOARD_SIZE; i++) {
board[i] = [];
for (let j = 0; j < BOARD_SIZE; j++) {
board[i][j] = 0;
}
}
moveHistory = [];
currentPlayer = 1;
currentPlayerEl.textContent = "黑方";
currentPlayerEl.style.color = "#ffeb3b";
}
// 绘制棋盘
function drawBoard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制棋盘背景
ctx.fillStyle = '#e9b96e';
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(CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);
ctx.lineTo(canvas.width - CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);
ctx.stroke();
// 竖线
ctx.beginPath();
ctx.moveTo(i * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 2);
ctx.lineTo(i * CELL_SIZE + CELL_SIZE / 2, canvas.height - CELL_SIZE / 2);
ctx.stroke();
}
// 绘制天元和星位
const starPoints = [3, 7, 11];
ctx.fillStyle = '#000';
for (let i = 0; i < starPoints.length; i++) {
for (let j = 0; j < starPoints.length; j++) {
ctx.beginPath();
ctx.arc(
starPoints[i] * CELL_SIZE + CELL_SIZE / 2,
starPoints[j] * CELL_SIZE + CELL_SIZE / 2,
4, 0, Math.PI * 2
);
ctx.fill();
}
}
// 绘制棋子
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
if (board[i][j] !== 0) {
drawStone(i, j, board[i][j]);
}
}
}
}
// 绘制棋子
function drawStone(row, col, player) {
const x = col * CELL_SIZE + CELL_SIZE / 2;
const y = row * CELL_SIZE + CELL_SIZE / 2;
ctx.beginPath();
ctx.arc(x, y, STONE_RADIUS, 0, Math.PI * 2);
if (player === 1) { // 黑棋
const gradient = ctx.createRadialGradient(
x - 3, y - 3, 1,
x, y, STONE_RADIUS
);
gradient.addColorStop(0, "#666");
gradient.addColorStop(1, "#000");
ctx.fillStyle = gradient;
} else { // 白棋
const gradient = ctx.createRadialGradient(
x - 2, y - 2, 1,
x, y, STONE_RADIUS
);
gradient.addColorStop(0, "#fff");
gradient.addColorStop(1, "#ddd");
ctx.fillStyle = gradient;
}
ctx.fill();
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.stroke();
// 为最后一步添加标记
if (moveHistory.length > 0) {
const lastMove = moveHistory[moveHistory.length - 1];
if (lastMove.row === row && lastMove.col === col) {
ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x, y, STONE_RADIUS * 0.7, 0, Math.PI * 2);
ctx.stroke();
}
}
}
// 落子
function placeStone(row, col) {
if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE || board[row][col] !== 0) {
return false;
}
board[row][col] = currentPlayer;
moveHistory.push({row, col, player: currentPlayer});
// 检查胜利
if (checkWin(row, col)) {
endGame(currentPlayer === 1 ? "黑方" : "白方");
return true;
}
// 检查平局
if (moveHistory.length === BOARD_SIZE * BOARD_SIZE) {
endGame("平局");
return true;
}
// 切换玩家
currentPlayer = currentPlayer === 1 ? 2 : 1;
currentPlayerEl.textContent = currentPlayer === 1 ? "黑方" : "白方";
return true;
}
// 检查胜利
function checkWin(row, col) {
const player = board[row][col];
const directions = [
[0, 1], // 水平
[1, 0], // 垂直
[1, 1], // 对角线
[1, -1] // 反对角线
];
for (const [dx, dy] of directions) {
let count = 1; // 当前位置已经有一个棋子
// 正向检查
for (let i = 1; i <= 4; i++) {
const newRow = row + dx * i;
const newCol = col + dy * i;
if (newRow < 0 || newRow >= BOARD_SIZE ||
newCol < 0 || newCol >= BOARD_SIZE ||
board[newRow][newCol] !== player) {
break;
}
count++;
}
// 反向检查
for (let i = 1; i <= 4; i++) {
const newRow = row - dx * i;
const newCol = col - dy * i;
if (newRow < 0 || newRow >= BOARD_SIZE ||
newCol < 0 || newCol >= BOARD_SIZE ||
board[newRow][newCol] !== player) {
break;
}
count++;
}
if (count >= 5) {
return true;
}
}
return false;
}
// 结束游戏
function endGame(winner) {
gameActive = false;
winnerMessageEl.textContent = winner === "平局" ? "平局！" : `${winner}获胜！`;
if (winner === "黑方") {
gameResultMessage.textContent = "恭喜您战胜了强大的AI！";
} else if (winner === "白方") {
gameResultMessage.textContent = "AI展示了强大的计算能力！再试一次？";
} else {
gameResultMessage.textContent = "旗鼓相当！精彩的对局！";
}
gameOverModal.classList.add('active');
}
// 开始新游戏
function startNewGame() {
initBoard();
drawBoard();
gameActive = true;
startModal.classList.remove('active');
gameOverModal.classList.remove('active');
}
// 悔棋
function undoMove() {
if (moveHistory.length < 1 || !gameActive) return;
const lastMove = moveHistory.pop();
board[lastMove.row][lastMove.col] = 0;
currentPlayer = lastMove.player;
currentPlayerEl.textContent = currentPlayer === 1 ? "黑方" : "白方";
// 如果上一步是AI，需要再悔一步
if (moveHistory.length > 0 && moveHistory[moveHistory.length - 1].player === 2) {
const aiMove = moveHistory.pop();
board[aiMove.row][aiMove.col] = 0;
}
drawBoard();
}
// 增强的AI评估函数
function evaluatePosition(row, col, player) {
let score = 0;
const opponent = player === 1 ? 2 : 1;
// 方向数组：水平、垂直、对角线、反对角线
const directions = [
[0, 1], [1, 0], [1, 1], [1, -1]
];
// 中心位置分数更高
const center = BOARD_SIZE / 2;
const distanceFromCenter = Math.sqrt(
Math.pow(row - center, 2) + Math.pow(col - center, 2)
);
score += (BOARD_SIZE - distanceFromCenter) * 2;
// 检查每个方向
for (const [dx, dy] of directions) {
let playerCount = 0;
let opponentCount = 0;
let emptyCount = 0;
// 检查当前方向上的5个点
for (let i = -4; i <= 4; i++) {
if (i === 0) {
// 当前位置
playerCount++;
continue;
}
const newRow = row + dx * i;
const newCol = col + dy * i;
if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {
continue;
}
const cell = board[newRow][newCol];
if (cell === player) {
playerCount++;
} else if (cell === opponent) {
opponentCount++;
} else {
emptyCount++;
}
}
// 根据连子情况评分
if (playerCount >= 5) {
score += 100000; // 五连
} else if (playerCount === 4 && emptyCount > 0) {
score += 10000; // 活四
} else if (playerCount === 3 && emptyCount > 0) {
score += 1000; // 活三
} else if (playerCount === 2 && emptyCount > 0) {
score += 100; // 活二
}
// 防守评分
if (opponentCount >= 4 && emptyCount > 0) {
score += 5000; // 阻止对手活四
} else if (opponentCount === 3 && emptyCount > 0) {
score += 500; // 阻止对手活三
}
}
return score;
}
// 增强的AI落子
function makeAIMove() {
if (!gameActive || currentPlayer !== 2) return;
// 显示AI思考状态
aiThinkingEl.classList.add('active');
// 延迟执行，模拟AI思考
setTimeout(() => {
let bestScore = -Infinity;
let bestMove = null;
// 获取所有可落子的位置
let emptyCells = [];
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
if (board[i][j] === 0) {
emptyCells.push({row: i, col: j});
}
}
}
// 根据难度设置不同的搜索深度
let searchDepth;
switch(difficulty) {
case "easy":
searchDepth = 1;
break;
case "medium":
searchDepth = 2;
break;
case "hard":
searchDepth = 3;
break;
case "expert":
searchDepth = 4;
break;
default:
searchDepth = 2;
}
// 评估每个可能的位置
for (const cell of emptyCells) {
let score = evaluatePosition(cell.row, cell.col, 2);
// 增强：检查此位置是否形成威胁
board[cell.row][cell.col] = 2;
if (checkWin(cell.row, cell.col)) {
score += 1000000; // 直接获胜
}
board[cell.row][cell.col] = 0;
// 增强：检查玩家下一步是否会获胜
board[cell.row][cell.col] = 1;
if (checkWin(cell.row, cell.col)) {
score += 50000; // 必须防守
}
board[cell.row][cell.col] = 0;
// 根据难度增加搜索深度
if (difficulty !== "easy") {
for (let d = 0; d < searchDepth; d++) {
// 模拟对手的最佳回应
let opponentScore = -Infinity;
for (const oppCell of emptyCells) {
if (oppCell.row === cell.row && oppCell.col === cell.col) continue;
const oppScore = evaluatePosition(oppCell.row, oppCell.col, 1);
if (oppScore > opponentScore) {
opponentScore = oppScore;
}
}
score -= opponentScore * 0.5;
}
}
// 更新最佳移动
if (score > bestScore) {
bestScore = score;
bestMove = cell;
}
}
// 如果没有找到最佳移动，随机选择
if (!bestMove && emptyCells.length > 0) {
bestMove = emptyCells[Math.floor(Math.random() * emptyCells.length)];
}
// 执行最佳移动
if (bestMove) {
placeStone(bestMove.row, bestMove.col);
drawBoard();
}
// 隐藏AI思考状态
aiThinkingEl.classList.remove('active');
}, difficulty === "expert" ? 1000 : difficulty === "hard" ? 700 : 400);
}
// 事件监听
canvas.addEventListener('click', (e) => {
if (!gameActive || currentPlayer !== 1) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const col = Math.floor(x / CELL_SIZE);
const row = Math.floor(y / CELL_SIZE);
if (placeStone(row, col)) {
drawBoard();
// AI回合
if (gameActive) {
makeAIMove();
}
}
});
startGameBtn.addEventListener('click', () => {
difficulty = document.getElementById('difficulty').value;
startNewGame();
});
playAgainBtn.addEventListener('click', startNewGame);
newGameBtn.addEventListener('click', () => {
startModal.classList.add('active');
});
restartBtn.addEventListener('click', () => {
if (confirm("确定要重新开始当前游戏吗？")) {
startNewGame();
}
});
undoBtn.addEventListener('click', undoMove);
// 窗口大小变化时重新初始化棋盘
window.addEventListener('resize', () => {
if (gameActive) {
initBoard();
drawBoard();
}
});
// 初始化
initBoard();
startModal.classList.add('active');
drawBoard();
});
</script>
</body>
</html>