@my-games/minesweeper

一个纯 JavaScript 实现的经典扫雷游戏，还原 Windows 经典风格，零依赖，开箱即用。

特性

• 🎮 三种难度 — 初级 (9×9, 10雷)、中级 (16×16, 40雷)、高级 (16×30, 99雷)
• 🎨 多主题支持 — 内置经典、暗色、蓝色三种主题，支持通过 CSS 变量自定义主题
• 🚩 自动标记 — 智能推断并自动标记地雷
• 📱 响应式布局 — 自适应容器大小
• ⚡ 零依赖 — 纯原生 JavaScript，无任何第三方依赖
• 📦 多格式构建 — 提供 ESM / CJS / UMD 三种模块格式
• 🖱️ 首次安全点击 — 第一次点击保证不踩雷

安装

// 使用 npm
npm install @my-games/minesweeper

// 或者使用 yarn
yarn add @my-games/minesweeper

// 或者使用 pnpm
pnpm install @my-games/minesweeper

快速开始

ESM（推荐）

  import Minesweeper from '@my-games/minesweeper';

const game = new Minesweeper('#game-container', {
  difficulty: 'intermediate',
  theme: 'classic',
  autoMarkEnabled: true,
});

CommonJS

  const Minesweeper = require('@my-games/minesweeper');

const game = new Minesweeper('#game-container');

UMD（<script> 标签）

<div id="game-container"></div>
<script src="https://unpkg.com/@my-games/minesweeper/dist/minesweeper.umd.js"></script>
<script>
  const game = new Minesweeper('#game-container');
</script>

API

new Minesweeper(container, options?)

| 参数 | 类型 | 说明 | |-------------|-------------------------|--------------------------------------| | container | string \| HTMLElement | 游戏容器，支持 CSS 选择器或 DOM 元素 | | options | object | 可选配置，见下表 |

Options

| 选项 | 类型 | 默认值 | 说明 | |-------------------|--------------------------------------------|-------------|------------------| | difficulty | 'beginner' \| 'intermediate' \| 'expert' | 'expert' | 游戏难度 | | theme | 'classic' \| 'dark' \| 'blue' | 'classic' | 界面主题 | | autoMarkEnabled | boolean | true | 是否启用自动标记 |

实例方法

| 方法 | 说明 | |---------------------------------|---------------------------------| | game.newGame(difficulty?) | 开始新游戏，可传入难度 | | game.setTheme(theme) | 切换主题 | | game.toggleAutoMark(enabled?) | 开关自动标记 | | game.getGameState() | 获取当前游戏状态 | | game.destroy() | 销毁游戏实例，清理 DOM 与定时器 |

自定义主题

游戏所有视觉样式均通过 CSS 变量控制，你可以轻松创建自己的主题。

CSS 变量一览

| 变量名 | 默认值 | 说明 | |---------------------------------|-------------|----------------------------| | --primary-bg | #f0f0f0 | 游戏区域格子外的背景 | | --secondary-bg | #e0e0e0 | 面板或控制区域的背景色 | | --panel-bg | #d8d8d8 | 揭开后格子的背景 | | --border-light | #ffffff | 边框亮色（上边和左边） | | --border-dark | #a0a0a0 | 边框暗色（下边和右边） | | --text-color | #000000 | 通用文本颜色 | | --button-face | #c0c0c0 | 揭开前格子的背景 | | --button-text | #000000 | 按钮文本颜色 | | --highlight-color | #ffff00 | 高亮背景色（旗帜标记格子） | | --flag-color | #ff0000 | 旗帜标记的颜色 | | --number-color-1 | #0000ff | 数字 1 的颜色 | | --number-color-2 | #008000 | 数字 2 的颜色 | | --number-color-3 | #ff0000 | 数字 3 的颜色 | | --number-color-4 | #000080 | 数字 4 的颜色 | | --number-color-5 | #800000 | 数字 5 的颜色 | | --number-color-6 | #008080 | 数字 6 的颜色 | | --number-color-7 | #000000 | 数字 7 的颜色 | | --number-color-8 | #808080 | 数字 8 的颜色 | | --win-bg | #c0ffc0 | 获胜时的背景色 | | --lose-bg | #ffc0c0 | 输掉时雷的背景色 | | --lose-flagged-bg | #65ff37 | 输掉时标记雷的背景色 | | --lose-auto-flagged-bg | #2cb204 | 输掉时自动标记雷的背景色 | | --exploded-mine-bg | #ff4444 | 踩雷爆炸时的背景色 | | --wrong-flag-bg | #ffaa00 | 错误标记（误标）的背景色 | | --cell-size | 30px | 每个格子的尺寸大小 | | --max-board-height | 70vh | 棋盘最大高度 | | --max-board-width | 95vw | 棋盘最大宽度 |

使用方式

在游戏容器元素上覆盖对应的 CSS 变量即可生效，无需修改任何源码。

方式一：内联样式

<div id="game-container" style="--primary-bg: #1a1a2e; --button-face: #16213e;">
</div>

方式二：自定义 CSS 类

.my-theme {
  --primary-bg: #1a1a2e;
  --secondary-bg: #16213e;
  --panel-bg: #0f3460;
  --border-light: #e94560;
  --border-dark: #533483;
  --text-color: #eaeaea;
  --button-face: #0f3460;
  --button-text: #eaeaea;
  --highlight-color: #e94560;
  --flag-color: #ff6b6b;
  --number-color-1: #00d2ff;
  --number-color-2: #00ff88;
  --number-color-3: #ff6b6b;
  --number-color-4: #a855f7;
  --number-color-5: #ff9f43;
  --number-color-6: #00cec9;
  --number-color-7: #dfe6e9;
  --number-color-8: #b2bec3;
  --win-bg: #00b894;
  --lose-bg: #d63031;
  --exploded-mine-bg: #ff3838;
  --wrong-flag-bg: #fdcb6e;
  --cell-size: 28px;
}

<div id="game-container" class="my-theme"></div>

方式三：JavaScript 动态设置

const container = document.getElementById('game-container');

container.style.setProperty('--primary-bg', '#1a1a2e');
container.style.setProperty('--button-face', '#0f3460');
container.style.setProperty('--border-light', '#e94560');
container.style.setProperty('--cell-size', '32px');

提示：CSS 变量具有继承性，在容器或其任意祖先元素上设置均可生效。

构建

git clone https://github.com/xyj2156/minesweeper.git
cd minesweeper
npm install
npm run build

构建产物输出至 dist/ 目录：

| 文件 | 格式 | 说明 | |--------------------------|------|--------------------------------------| | minesweeper.esm.js | ESM | ES 模块，含 sourcemap | | minesweeper.esm.min.js | ESM | 压缩版 | | minesweeper.cjs | CJS | CommonJS，含 sourcemap | | minesweeper.min.cjs | CJS | 压缩版 | | minesweeper.umd.js | UMD | 全局变量 Minesweeper，含 sourcemap | | minesweeper.umd.min.js | UMD | 压缩版 |

本地预览

npm run build
npm run preview
# 访问 http://localhost:65520

License

MIT © 阿杰很厉害