游戏已开源，可以集成到个人网站
html
<!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>
:root {
/* 配色方案：深空蓝与霓虹色 */
--bg-gradient-start: #1a1c2c;
--bg-gradient-end: #4a192c;
--primary-color: #4ecca3; /* 玩家/高亮 */
--secondary-color: #e94560; /* AI/敌人 */
--text-color: #ecf0f1;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
/* 棋盘吸盘颜色 */
--board-bg: #16213e;
--cell-base: #0f3460;
--cell-hover: #1a4b85;
}
* {
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: radial-gradient(circle at center, var(--bg-gradient-start), #000);
background-size: cover;
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
/* --- 头部区域 --- */
header {
text-align: center;
margin-bottom: 20px;
animation: fadeIn Down 0.8s ease-out;
}
h1 {
margin: 0;
font-size: 2.5rem;
color: #fff;
text-shadow: 0 0 15px rgba(78, 204, 163, 0.6);
letter-spacing: 2px;
}
.subtitle {
font-size: 1rem;
color: #8d9db6;
margin-top: 8px;
font-weight: 300;
}
/* --- 主布局 --- */
main {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 100%;
max-width: 1000px;
}
/* --- 游戏控制区 (左侧) --- */
.game-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
/* 状态栏 */
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 15px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 50px;
border: 1px solid var(--glass-border);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.turn-badge {
padding: 6px 16px;
border-radius: 20px;
font-weight: bold;
font-size: 0.9rem;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.turn-player {
background: var(--primary-color);
color: #1a1c2c;
box-shadow: 0 0 10px rgba(78, 204, 163, 0.5);
}
.turn-ai {
background: var(--secondary-color);
color: #fff;
box-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
}
/* --- 棋盘 (吸盘风格) --- */
.board-container {
padding: 15px;
background: #2a2d3e;
border-radius: 16px;
box-shadow:
20px 20px 60px #15171f,
-20px -20px 60px #3f435d; /* 新拟态阴影 */
position: relative;
}
#board {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 6px; /* 格子间距，模仿吸盘间隔 */
width: 360px;
height: 360px;
}
.cell {
background-color: var(--cell-base);
border-radius: 50%; /* 圆形模仿吸盘 */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.05);
}
/* 鼠标悬停 */
.cell:hover {
transform: scale(0.95);
}
/* 可移动提示 (吸盘光晕) */
.cell.highlight {
background-color: rgba(78, 204, 163, 0.25);
box-shadow: 0 0 15px var(--primary-color), inset 0 0 10px var(--primary-color);
animation: pulse 1.5s infinite;
}
.cell.last-move {
background-color: rgba(255, 215, 0, 0.15);
box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.4);
}
/* --- 棋子 --- */
.piece {
width: 85%;
height: 85%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
font-weight: bold;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
}
.piece.player {
background: radial-gradient(circle at 30% 30%, #6ef7c7, #1a8f66);
border: 2px solid #a3ffce;
color: #052e1e;
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
}
.piece.ai {
background: radial-gradient(circle at 30% 30%, #ff7b93, #c82333);
border: 2px solid #ffccd5;
color: #4a0e15;
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
}
/* 棋子类型符号 */
.piece.king::after { content: '♔'; font-size: 1.4rem; }
.piece.pawn::after { content: '●'; font-size: 0.9rem; }
/* 选中状态 */
.piece.selected {
transform: scale(1.2);
box-shadow: 0 0 20px #fff;
z-index: 10;
}
/* --- 侧边栏 (右) --- */
aside {
flex: 1;
min-width: 280px;
max-width: 350px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* 按钮组 */
.btn-group {
display: flex;
gap: 10px;
}
button {
flex: 1;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
padding: 12px;
color: #fff;
font-weight: 600;
font-size: 0.95rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 1px;
}
button:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
button:active {
transform: translateY(1px);
}
button.primary {
background: var(--primary-color);
color: #1a1c2c;
border: none;
}
button.primary:hover {
background: #6ef7c7;
box-shadow: 0 0 15px rgba(78, 204, 163, 0.4);
}
/* 日志窗口 */
.log-container {
flex-grow: 1;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 15px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.85rem;
overflow-y: auto;
max-height: 200px;
min-height: 150px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
/* 自定义滚动条 */
.log-container::-webkit-scrollbar { width: 6px; }
.log-container::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 3px; }
.log-entry { margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }
.log-player { color: var(--primary-color); }
.log-ai { color: var(--secondary-color); }
.log-system { color: #8899ac; font-style: italic; }
/* --- 模态框 (规则 & 结束) --- */
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.modal {
background: #1f2233;
padding: 30px;
border-radius: 16px;
text-align: center;
border: 1px solid var(--glass-border);
max-width: 90%;
width: 400px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
transform: translateY(20px);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.active .modal {
transform: translateY(0);
}
.modal h2 {
color: var(--primary-color);
margin-top: 0;
font-size: 1.8rem;
}
.modal-content {
text-align: left;
color: #ccc;
margin-bottom: 25px;
line-height: 1.6;
font-size: 0.95rem;
}
.modal-content strong { color: #fff; }
.modal-content ul { padding-left: 20px; margin: 5px 0; }
.modal-content li { margin-bottom: 6px; }
.modal-btn {
background: var(--primary-color);
color: #1a1c2c;
width: 100%;
font-weight: bold;
}
/* --- 动画 --- */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(78, 204, 163, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(78, 204, 163, 0); }
100% { box-shadow: 0 0 0 0 rgba(78, 204, 163, 0); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.shake { animation: shake 0.5s; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
/* 响应式调整 */
@media (max-width: 600px) {
#board { width: 300px; height: 300px; gap: 4px; }
main { flex-direction: column; align-items: center; }
aside { width: 100%; }
}
</style>
</head>
<body>
<header>
<h1>战推棋</h1>
<div class="subtitle">Battle Push Chess - 极简推挤策略</div>
</header>
<main>
<div class="game-wrapper">
<!-- 状态栏 -->
<div class="status-bar">
<div id="turn-indicator" class="turn-badge turn-player">玩家回合</div>
<div id="game-state" style="font-size: 0.85rem; color: #aaa;">进行中</div>
</div>
<!-- 棋盘 -->
<div class="board-container">
<div id="board"></div>
</div>
</div>
<!-- 侧边栏 -->
<aside>
<div class="btn-group">
<button onclick="openRulesModal()">查看规则</button>
<button class="primary" onclick="game.init()">重新开始</button>
</div>
<div class="log-container" id="game-log">
<div class="log-entry log-system">欢迎来到战推棋！</div>
<div class="log-entry log-system">请点击绿色棋子开始。</div>
</div>
</aside>
</main>
<!-- 规则弹窗 -->
<div id="rules-modal" class="modal-overlay">
<div class="modal">
<h2>游戏规则</h2>
<div class="modal-content">
<p><strong>胜利条件：</strong>粉碎对方的主帅(♔)。</p>
<ul>
<li><strong>移动：</strong>点击己方棋子，再点击高亮光圈移动。</li>
<li><strong>推挤：</strong>移动到敌方位置会将其向后推1格。</li>
<li><strong>粉碎（Crush）：</strong>
<br>- 被推棋子后方是墙壁、边界或友军 -> <span style="color:var(--secondary-color)">直接粉碎</span>。
<br>- 主帅被推挤或被粉碎 -> 游戏结束。
</li>
<li><strong>棋子：</strong>
<br>♔ 主帅：可向周围8个方向移动。
<br>● 先锋：仅可向上下左右4个方向移动。
</li>
</ul>
</div>
<button class="modal-btn" onclick="closeRulesModal()">明白了，开始战斗</button>
</div>
</div>
<!-- 游戏结束弹窗 -->
<div id="end-modal" class="modal-overlay">
<div class="modal">
<h2 id="end-title">游戏结束</h2>
<p id="end-message" style="color:#fff; font-size:1.1rem;">你赢了！</p>
<button class="modal-btn" onclick="closeEndModal()">再来一局</button>
</div>
</div>
<script>
/**
* 游戏配置与常量
*/
const BOARD_SIZE = 6;
const PLAYER = 1; // 绿方
const AI = -1; // 红方
const TYPE_KING = 'king';
const TYPE_PAWN = 'pawn';
/**
* 游戏核心逻辑类
*/
class Game {
constructor() {
this.board = [];
this.turn = PLAYER;
this.selectedPiece = null; // {r, c}
this.validMoves = []; // Array of {r, c, type...}
this.isGameOver = false;
this.lastMove = null; // {from: {r,c}, to: {r,c}}
this.isAiThinking = false;
// DOM 缓存
this.boardEl = document.getElementById('board');
this.turnIndEl = document.getElementById('turn-indicator');
this.stateEl = document.getElementById('game-state');
this.logEl = document.getElementById('game-log');
this.init();
}
// 初始化/重置游戏
init() {
this.board = Array(BOARD_SIZE).fill(null).map(() => Array(BOARD_SIZE).fill(null));
this.turn = PLAYER;
this.isGameOver = false;
this.selectedPiece = null;
this.validMoves = [];
this.lastMove = null;
this.isAiThinking = false;
this.setupBoard();
this.render();
this.updateStatus("玩家回合");
this.log("游戏开始，绿方先手。", "system");
document.getElementById('end-modal').classList.remove('active');
}
// 布局棋子
setupBoard() {
// 放置 AI (红方, 上方)
this.board[0][2] = { type: TYPE_KING, owner: AI };
this.board[0][1] = { type: TYPE_PAWN, owner: AI };
this.board[0][3] = { type: TYPE_PAWN, owner: AI };
this.board[1][2] = { type: TYPE_PAWN, owner: AI };
// 放置 Player (绿方, 下方)
this.board[5][3] = { type: TYPE_KING, owner: PLAYER };
this.board[5][2] = { type: TYPE_PAWN, owner: PLAYER };
this.board[5][4] = { type: TYPE_PAWN, owner: PLAYER };
this.board[4][3] = { type: TYPE_PAWN, owner: PLAYER };
}
// 渲染棋盘
render() {
this.boardEl.innerHTML = '';
for (let r = 0; r < BOARD_SIZE; r++) {
for (let c = 0; c < BOARD_SIZE; c++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.r = r;
cell.dataset.c = c;
// 检查是否是合法移动位置 (吸盘高亮)
const move = this.validMoves.find(m => m.r === r && m.c === c);
if (move) {
cell.classList.add('highlight');
}
// 检查是否是上一步
if (this.lastMove &&
((this.lastMove.from.r === r && this.lastMove.from.c === c) ||
(this.lastMove.to.r === r && this.lastMove.to.c === c))) {
cell.classList.add('last-move');
}
// 绘制棋子
const pieceData = this.board[r][c];
if (pieceData) {
const piece = document.createElement('div');
piece.className = `piece ${pieceData.owner === PLAYER ? 'player' : 'ai'} ${pieceData.type}`;
if (this.selectedPiece && this.selectedPiece.r === r && this.selectedPiece.c === c) {
piece.classList.add('selected');
}
cell.appendChild(piece);
}
cell.addEventListener('click', () => this.handleCellClick(r, c));
this.boardEl.appendChild(cell);
}
}
}
// 处理点击事件
handleCellClick(r, c) {
if (this.isGameOver || this.isAiThinking || this.turn !== PLAYER) return;
const clickedPiece = this.board[r][c];
// 1. 选中己方棋子
if (clickedPiece && clickedPiece.owner === PLAYER) {
this.selectedPiece = { r, c };
this.validMoves = this.getValidMoves(this.board, r, c);
this.render();
return;
}
// 2. 移动到合法位置
const move = this.validMoves.find(m => m.r === r && m.c === c);
if (this.selectedPiece && move) {
this.executeMove(this.selectedPiece, move);
return;
}
// 3. 点击空白或无效处 -> 取消选中
this.selectedPiece = null;
this.validMoves = [];
this.render();
}
// 获取合法移动 (包括推挤逻辑)
getValidMoves(board, r, c) {
const piece = board[r][c];
if (!piece) return [];
const moves = [];
const directions = [];
// 定义移动方向
if (piece.type === TYPE_KING) {
// 8个方向
directions.push(
{dr: -1, dc: 0}, {dr: 1, dc: 0}, {dr: 0, dc: -1}, {dr: 0, dc: 1},
{dr: -1, dc: -1}, {dr: -1, dc: 1}, {dr: 1, dc: -1}, {dr: 1, dc: 1}
);
} else {
// 4个方向
directions.push(
{dr: -1, dc: 0}, {dr: 1, dc: 0}, {dr: 0, dc: -1}, {dr: 0, dc: 1}
);
}
for (let d of directions) {
const nr = r + d.dr;
const nc = c + d.dc;
// 边界检查
if (nr < 0 || nr >= BOARD_SIZE || nc < 0 || nc >= BOARD_SIZE) continue;
const target = board[nr][nc];
if (!target) {
// 空地：直接移动
moves.push({ r: nr, c: nc, type: 'move' });
} else if (target.owner !== piece.owner) {
// 敌人：尝试推挤
const pushR = nr + d.dr;
const pushC = nc + d.dc;
let isCrush = false;
// 检查推挤后的位置状态 (边界或被占用)
if (pushR < 0 || pushR >= BOARD_SIZE || pushC < 0 || pushC >= BOARD_SIZE) {
isCrush = true; // 推出界
} else if (board[pushR][pushC] !== null) {
isCrush = true; // 撞到友军或墙壁
}
moves.push({
r: nr, c: nc,
type: 'push',
pushTo: {r: pushR, c: pushC},
crush: isCrush
});
}
}
return moves;
}
// 执行移动
async executeMove(from, move) {
const piece = this.board[from.r][from.c];
const target = this.board[move.r][move.c]; // 目标格原有内容（可能是敌人）
// 记录步数
this.lastMove = { from: {...from}, to: {r: move.r, c: move.c} };
if (move.type === 'move') {
// 普通移动
this.board[move.r][move.c] = piece;
this.board[from.r][from.c] = null;
} else if (move.type === 'push') {
// 攻击移动
const actorName = piece.owner === PLAYER ? '玩家' : 'AI';
if (target.type === TYPE_KING) {
this.log(`${actorName} 粉碎了敌方主帅!`, piece.owner === PLAYER ? 'player' : 'ai');
} else {
this.log(`${actorName} 推挤了敌方先锋!`, piece.owner === PLAYER ? 'player' : 'ai');
}
// 攻击者占据目标位
this.board[move.r][move.c] = piece;
this.board[from.r][from.c] = null;
// 处理被推者
if (move.crush) {
// 粉碎：直接移除
// 视觉特效：震动
this.shakeBoard();
} else {
// 推移：被推者移动到pushTo
this.board[move.pushTo.r][move.pushTo.c] = target;
}
}
// 清理状态
this.selectedPiece = null;
this.validMoves = [];
this.render();
// 检查胜利
if (this.checkWin()) return;
// 切换回合
this.turn = this.turn === PLAYER ? AI : PLAYER;
if (this.turn === AI) {
this.updateStatus("AI 思考中...");
this.isAiThinking = true;
setTimeout(() => this.makeAiMove(), 800);
} else {
this.updateStatus("玩家回合");
}
}
shakeBoard() {
const container = document.querySelector('.board-container');
container.classList.remove('shake');
void container.offsetWidth; // trigger reflow
container.classList.add('shake');
}
checkWin() {
let playerKing = false;
let aiKing = false;
for(let r=0; r<BOARD_SIZE; r++){
for(let c=0; c<BOARD_SIZE; c++){
const p = this.board[r][c];
if(p && p.type === TYPE_KING){
if(p.owner === PLAYER) playerKing = true;
if(p.owner === AI) aiKing = true;
}
}
}
if (!playerKing) {
this.endGame(AI);
return true;
}
if (!aiKing) {
this.endGame(PLAYER);
return true;
}
return false;
}
endGame(winner) {
this.isGameOver = true;
this.updateStatus("游戏结束");
const modal = document.getElementById('end-modal');
const title = document.getElementById('end-title');
const msg = document.getElementById('end-message');
modal.classList.add('active');
if (winner === PLAYER) {
title.textContent = "胜利！";
title.style.color = "var(--primary-color)";
msg.textContent = "恭喜！你成功粉碎了敌方主帅！";
} else {
title.textContent = "失败";
title.style.color = "var(--secondary-color)";
msg.textContent = "你的主帅被粉碎了，再接再厉。";
}
}
updateStatus(text) {
this.stateEl.textContent = text;
this.turnIndEl.className = `turn-badge ${this.turn === PLAYER ? 'turn-player' : 'turn-ai'}`;
this.turnIndEl.textContent = this.turn === PLAYER ? "玩家回合" : "AI 回合";
}
log(msg, type) {
const div = document.createElement('div');
div.className = `log-entry log-${type}`;
div.textContent = `> ${msg}`;
this.logEl.prepend(div);
}
// --- AI 逻辑 ---
makeAiMove() {
const depth = 3;
const bestMove = this.minimaxRoot(depth, true);
if (bestMove) {
this.executeMove(bestMove.from, bestMove.move);
} else {
this.log("AI 无路可走，跳过回合。", "ai");
this.turn = PLAYER;
this.updateStatus("玩家回合");
this.isAiThinking = false;
}
this.isAiThinking = false;
}
evaluateBoard(board) {
let score = 0;
for (let r = 0; r < BOARD_SIZE; r++) {
for (let c = 0; c < BOARD_SIZE; c++) {
const piece = board[r][c];
if (piece) {
let val = 0;
// 基础分
if (piece.type === TYPE_KING) val = 10000;
else val = 100;
// 位置分：AI在上方，r越大越接近玩家(攻击性)，但也越危险
val += (r * 6);
// 中心控制分
const centerDist = Math.abs(2.5 - r) + Math.abs(2.5 - c);
val -= (centerDist * 3);
if (piece.owner === AI) {
score += val;
} else {
score -= val;
}
}
}
}
return score;
}
minimaxRoot(depth, isMaximizing) {
const moves = this.getAllMoves(this.board, AI);
let bestMove = null;
let bestValue = -Infinity;
moves.sort(() => Math.random() - 0.5); // 增加随机性
for (let move of moves) {
const savedBoard = this.cloneBoard(this.board);
this.simulateMove(savedBoard, move.from, move.move);
const value = this.minimax(savedBoard, depth - 1, -Infinity, Infinity, !isMaximizing);
if (value > bestValue) {
bestValue = value;
bestMove = move;
}
}
return bestMove;
}
minimax(board, depth, alpha, beta, isMaximizing) {
if (depth === 0) {
return this.evaluateBoard(board);
}
// 检查胜负状态
let aiKing = false;
let plKing = false;
for(let r=0; r<BOARD_SIZE; r++) {
for(let c=0; c<BOARD_SIZE; c++) {
if(board[r][c] && board[r][c].type === TYPE_KING) {
if(board[r][c].owner === AI) aiKing = true;
else plKing = true;
}
}
}
if (!aiKing) return -100000;
if (!plKing) return 100000;
const turn = isMaximizing ? AI : PLAYER;
const moves = this.getAllMoves(board, turn);
if (moves.length === 0) return isMaximizing ? -1000 : 1000;
if (isMaximizing) {
let maxEval = -Infinity;
for (let move of moves) {
const newBoard = this.cloneBoard(board);
this.simulateMove(newBoard, move.from, move.move);
const evalVal = this.minimax(newBoard, depth - 1, alpha, beta, false);
maxEval = Math.max(maxEval, evalVal);
alpha = Math.max(alpha, evalVal);
if (beta <= alpha) break;
}
return maxEval;
} else {
let minEval = Infinity;
for (let move of moves) {
const newBoard = this.cloneBoard(board);
this.simulateMove(newBoard, move.from, move.move);
const evalVal = this.minimax(newBoard, depth - 1, alpha, beta, true);
minEval = Math.min(minEval, evalVal);
beta = Math.min(beta, evalVal);
if (beta <= alpha) break;
}
return minEval;
}
}
getAllMoves(board, player) {
const allMoves = [];
for (let r = 0; r < BOARD_SIZE; r++) {
for (let c = 0; c < BOARD_SIZE; c++) {
const piece = board[r][c];
if (piece && piece.owner === player) {
const moves = this.getValidMoves(board, r, c);
for (let m of moves) {
allMoves.push({ from: { r, c }, move: m });
}
}
}
}
return allMoves;
}
cloneBoard(board) {
return board.map(row => row.map(cell => cell ? {...cell} : null));
}
simulateMove(board, from, move) {
const piece = board[from.r][from.c];
const target = board[move.r][move.c];
if (move.type === 'move') {
board[move.r][move.c] = piece;
board[from.r][from.c] = null;
} else if (move.type === 'push') {
if (!move.crush) {
board[move.pushTo.r][move.pushTo.c] = target;
}
board[move.r][move.c] = piece;
board[from.r][from.c] = null;
}
}
}
// --- UI 交互函数 ---
function openRulesModal() {
document.getElementById('rules-modal').classList.add('active');
}
function closeRulesModal() {
document.getElementById('rules-modal').classList.remove('active');
}
function closeEndModal() {
document.getElementById('end-modal').classList.remove('active');
game.init();
}
// 启动游戏
const game = new Game();
</script>
</body>
</html>