# 温馨连连看

**Repository Path**: decentant/sweety-link

## Basic Information

- **Project Name**: 温馨连连看
- **Description**: 为我爱玩连连看的老婆创作的一款连连看小游戏
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-25
- **Last Updated**: 2026-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎮 连连看 - Link Link Game

一款基于 Vue 3 + TypeScript + Electron 的精美连连看游戏，支持多种难度等级、皮肤主题、自定义素材和本地持久化。

## ✨ 特色功能

- 🎯 **5种难度等级**：从新手入门到大师困难，循序渐进
- 🎨 **6种Emoji皮肤主题**：爱情、动物、运动、节日庆祝、食物、差异化
- ⚡ **难度递增**：每通关10关为一个循环，下一循环初始时间和奖励时间均缩短20%
- 🔊 **音效与BGM**：支持背景音乐循环和消除音效
- 🖼️ **自定义背景**：支持多张背景图片切换
- ⏱️ **双层时间系统**：基础时间 + 奖励时间（每关重置）
- 📊 **排行榜系统**：记录每种难度的最佳成绩
- 🧩 **智能提示与洗牌**：死局自动检测与提示
- 💾 **进度保存**：自动保存游戏进度
- 🎯 **新手引导**：首次游戏自动展示教程

---

## 🚀 快速开始

### 环境要求

- Node.js 18+
- pnpm（推荐）或 npm

### 安装与运行

```bash
# 进入项目目录
cd link-game

# 安装依赖
pnpm install

# 开发模式运行
pnpm run dev
```

游戏将在本地开发服务器上运行，通常是 `http://localhost:5173`。

### 构建与打包

```bash
# 构建生产版本
pnpm run build

# 打包为Electron应用（需要Electron-builder）
pnpm run dist
```

打包后的应用将生成在 `release/` 目录下。

---

## 📁 项目结构

```
link-game/
├── electron/              # Electron主进程
│   ├── main.ts           # 主进程入口（窗口管理、资源扫描）
│   └── preload.ts        # 预加载脚本（IPC通信）
│
├── src/
│   ├── assets/           # 静态资源目录
│   │   ├── game-res/    # 游戏素材（音效、背景等）
│   │   │   ├── bg/      # 背景图片
│   │   │   ├── bgm/     # 背景音乐
│   │   │   └── sound/    # 音效文件
│   │   └── skin/        # 图片皮肤素材
│   │
│   ├── components/       # Vue组件
│   │   ├── MainMenu.vue         # 主菜单
│   │   ├── GameView.vue         # 游戏主界面
│   │   ├── GameCanvas.vue       # 游戏画布
│   │   ├── SkinPicker.vue       # 皮肤选择器
│   │   ├── ResultDialog.vue    # 结算弹窗
│   │   └── ...（其他组件）
│   │
│   ├── core/             # 游戏核心逻辑
│   │   ├── board.ts      # 棋盘生成与洗牌
│   │   ├── connect.ts    # 连通性检测算法
│   │   ├── difficulty.ts # 难度配置
│   │   └── drops.ts      # 填补规则（8种）
│   │
│   ├── render/            # 渲染层
│   │   └── canvas.ts     # Canvas渲染器
│   │
│   ├── stores/            # Pinia状态管理
│   │   └── game.ts       # 游戏状态、计时、关卡
│   │
│   ├── systems/           # 系统模块
│   │   ├── audio.ts      # 音频管理器
│   │   ├── skins.ts      # 皮肤系统
│   │   ├── storage.ts    # 本地存储
│   │   └── resources.ts  # 资源扫描
│   │
│   ├── types/            # TypeScript类型定义
│   │   └── game.ts
│   │
│   ├── App.vue           # 根组件
│   ├── main.ts          # 前端入口
│   └── style.css        # 全局样式
│
├── public/              # 公共静态资源
├── release/            # 打包输出目录（构建后生成）
└── package.json
```

---

## 🎵 音频素材

游戏支持音频文件，如不存在则静默降级，不影响游戏运行。

### 音效文件清单

将以下所有文件放入 `assets/game-res/sound/` 目录：

| 文件名 | 触发时机 | 格式建议 | 推荐时长 | 风格建议 |
|--------|----------|----------|----------|----------|
| `link.mp3` | 成功消除一对方块时 | MP3, 44.1kHz | 0.3-0.8秒 | 清脆的"叮"或"嗖"声 |
| `error.mp3` | 连接失败时 | MP3, 44.1kHz | 0.2-0.5秒 | 低沉的"咚"或错误提示音 |
| `click.mp3` | 点击方块时 | MP3, 44.1kHz | 0.05-0.15秒 | 轻微的点击/确认声 |
| `hint.mp3` | 使用提示功能时 | MP3, 44.1kHz | 0.3-0.6秒 | 提示性的"叮铃"声 |
| `shuffle.mp3` | 洗牌时 | MP3, 44.1kHz | 0.4-1秒 | 洗牌/切换的过渡音效 |
| `clear.mp3` | 通关时 | MP3, 44.1kHz | 1-2秒 | 欢快的胜利/庆祝音效 |
| `over.mp3` | 游戏结束（失败）时 | MP3, 44.1kHz | 1-3秒 | 低沉的结果揭晓音效 |
| `warning.mp3` | 倒计时≤10秒时 | MP3, 44.1kHz | 0.5-1.5秒 | 紧迫警告/心跳音效 |

### 音效风格建议

| 音效 | 风格 | 示例描述 |
|------|------|----------|
| `link.mp3` | 轻快愉悦 | "叮~" "嗖~" "✨" 成功反馈 |
| `error.mp3` | 轻微警示 | "咚~" "错误提示音" 温和提示 |
| `click.mp3` | 清脆简洁 | "嗒" "咔" 轻微点击确认 |
| `hint.mp3` | 提示引导 | "叮铃~叮铃~" 引导性音效 |
| `shuffle.mp3` | 过渡流畅 | "哗啦啦~" "切换声" 过渡音效 |
| `clear.mp3` | 欢快庆祝 | "🎉" "🎊" 胜利庆祝音效 |
| `over.mp3` | 沉稳收尾 | "结果揭晓" 结束感音效 |
| `warning.mp3` | 紧迫警告 | "心跳~" "滴滴滴~" 倒计时紧迫感 |

### 背景音乐文件

将音乐文件放入 `assets/game-res/bgm/` 目录：

| 文件名 | 说明 | 格式建议 | 时长 |
|--------|------|----------|------|
| `bgm1.mp3` | 背景音乐1 | MP3, 44.1kHz | 2-4分钟 |
| `bgm2.mp3` | 背景音乐2（可选，更多文件随机播放） | MP3, 44.1kHz | 2-4分钟 |
| ... | 可添加任意数量的BGM | | |

**特性**：
- 支持多首BGM随机循环播放
- 如果目录为空或无文件，BGM功能自动禁用
- 每次通关后随机切换下一首BGM

### 免费音效资源推荐

可以从以下网站获取免费游戏音效：

**综合音效库**：
- **Freesound**: https://freesound.org （CC0协议，免费下载）
- **Mixkit**: https://mixkit.co/free-sound-effects/ （无需注册）
- **Pixabay 音效**: https://pixabay.com/zh/sound-effects/ （免费可商用）
- **Kenney**: https://kenney.nl/assets (CC0协议，高质量)

**搜索关键词建议**：
- `pop`, `click`, `tap` - 点击音效
- `success`, `achievement`, `coin` - 成功/获得音效
- `error`, `wrong`, `buzz` - 错误提示音效
- `shuffle`, `whoosh`, `transition` - 过渡/洗牌音效
- `victory`, `win`, `celebration` - 胜利/庆祝音效
- `game over`, `result`, `ending` - 游戏结束音效
- `countdown`, `warning`, `urgent`, `heartbeat` - 倒计时警告音效

---

## 🖼️ 图片素材

### 背景图片

将背景图片放入 `assets/game-res/bg/` 目录：

```
assets/game-res/bg/
├── bg1.jpg
├── bg2.png
├── bg3.webp
└── ...（支持 jpg, png, webp, gif）
```

**要求**：
- 支持格式：JPG、PNG、WebP、GIF
- 推荐尺寸：1920x1080 或更高
- 游戏会以居中、完整显示的方式呈现（contain模式）
- 如果目录为空，使用默认渐变背景

### Banner图片（可选）

将Banner图片放入 `assets/game-res/` 目录：

| 文件名 | 说明 | 推荐尺寸 |
|--------|------|----------|
| `banner.png` | 游戏顶部Banner图 | 800x200 px |

---

## 🎨 皮肤系统

### Emoji皮肤（内置）

游戏内置5个Emoji皮肤主题，无需额外素材：

| 主题ID | 名称 | 图案数 | 说明 |
|--------|------|--------|------|
| `emoji-love` | Emoji - 爱情 | 32个 | 默认主题，适合难度1-4 |
| `emoji-animals` | Emoji - 动物 | 48个 | 支持所有难度 |
| `emoji-sports` | Emoji - 运动 | 48个 | 支持所有难度 |
| `emoji-celebration` | Emoji - 节日庆祝 | 32个 | 适合难度1-4 |
| `emoji-food` | Emoji - 食物 | 48个 | 支持所有难度 |

### 图片皮肤（自定义）

如果想使用自己的图片素材作为皮肤，按以下结构放置：

```
assets/skin/
├── my-theme/           # 皮肤文件夹（任意名称）
│   ├── 1.png          # 第1种图案
│   ├── 2.png          # 第2种图案
│   ├── 3.png          # 第3种图案
│   └── ...            # 更多图案
└── another-theme/     # 另一个皮肤
    ├── 1.png
    ├── 2.png
    └── ...
```

**命名规则**：
- 图片文件名必须是连续数字：`1.png`, `2.png`, `3.png`...
- 图片格式支持：PNG（推荐，有透明背景）、JPG、WebP
- 推荐尺寸：64x64 px 到 128x128 px
- 图案数量必须满足当前难度需求（详见下表）

**难度与图案需求**：

| 难度 | 名称 | 所需图案数 | 图案范围 |
|------|------|------------|----------|
| 1 | 新手入门 | 8种 | 8-14对 |
| 2 | 简单休闲 | 15种 | 15-20对 |
| 3 | 标准模式 | 24种 | 21-30对 |
| 4 | 进阶挑战 | 35种 | 31-40对 |
| 5 | 大师困难 | 48种 | 41-48对 |

**示例**：
如果要在难度5使用自定义皮肤，至少需要48张不同的图案图片。

---

## 🎮 游戏操作

### 快捷键

| 按键 | 功能 | 说明 |
|------|------|------|
| `T` | 提示 | 显示一组可消除的方块 |
| `R` | 洗牌 | 重新随机排列所有方块 |
| `P` | 暂停/继续 | 暂停游戏或继续游戏 |
| `ESC` | 放弃 | 放弃当前关卡（需确认） |
| `D` | 跳关（Debug） | 仅在Debug模式下可用，快速通关当前关 |

### 鼠标操作

- **左键点击**：选中方块
- **再次点击相同方块**：取消选中
- **点击不同方块**：尝试连接

---

## ⚙️ 配置选项

### 设置菜单

在主菜单或游戏中点击设置按钮，可以调整以下选项：

| 选项 | 说明 | 默认值 |
|------|------|--------|
| 音效开关 | 开启/关闭音效 | 开启 |
| 音效音量 | 0-100% | 80% |
| 音乐开关 | 开启/关闭BGM | 开启 |
| 音乐音量 | 0-100% | 50% |
| 始终置顶 | 窗口始终显示在最前面 | 关闭 |
| 均衡分布 | 方块图案均衡分布 | 开启 |
| Debug模式 | 显示调试选项 | 关闭 |

---

## 🔧 开发指南

### 添加新的填补规则

游戏支持10种方块填补规则（每关循环），位于 `src/core/drops.ts`：

1. **无位移** - 消除后方块不动
2. **向下填补** - 所有方块向下填充空白
3. **向左填补** - 所有方块向左压缩
4. **上下分离填补** - 上半部向下、下半部向上
5. **向右填补** - 所有方块向右压缩
6. **向中央填补** - 从两侧向中间压缩
7. **左右分离填补** - 左半部向右、右半部向左
8. **左上-右下定向填补** - 沿对角线方向填补
9. **右上-左下定向填补** - 沿反对角线方向填补
10. **四向扩散填补** - 从中心四散填补

如需添加新规则，在 `drops.ts` 中添加新的 `case` 分支。

### 添加新难度

在 `src/core/difficulty.ts` 中修改难度配置：

```typescript
export const DIFFICULTIES: Record<number, DifficultyConfig> = {
  1: { name: '新手入门', rows: 4, cols: 6, patterns: 8, time: 180, stageTime: 180 },
  // 添加新难度...
}
```

---

## 📝 素材清单汇总

以下是游戏所需的所有素材文件：

### 必需文件（无则自动禁用）

```
assets/
└── game-res/
    ├── sound/           # 音效（可选）
    │   ├── link.mp3    # 消除音效
    │   └── error.mp3   # 错误音效
    ├── bgm/            # 背景音乐（可选）
    │   └── *.mp3       # 任意数量的BGM文件
    ├── bg/             # 背景图片（可选）
    │   └── *.{jpg,png,webp,gif}
    └── banner.png      # Banner图（可选）
```

### 可选文件（增强体验）

```
assets/
├── game-res/
│   └── sound/          # 音效
└── skin/               # 图片皮肤（可选）
    └── {theme-name}/
        └── {1,2,3,...}.{png,jpg,webp}
```

---

## 🐛 常见问题

### Q: 为什么看不到背景图片？
A: 确保图片放在 `assets/game-res/bg/` 目录，并使用正确的文件扩展名。

### Q: 为什么音效不播放？
A: 检查音效文件是否命名为 `link.mp3` 和 `error.mp3`，格式是否为MP3。

### Q: 为什么自定义皮肤无法选择？
A: 检查图片是否命名为 `1.png`, `2.png` 等连续数字，且图案数量是否满足当前难度需求。

### Q: 如何重置游戏数据？
A: 删除应用数据目录（Windows: `%APPDATA%/link-game`，macOS: `~/Library/Application Support/link-game`）。

---

## 📄 许可证

本项目仅供学习和交流使用。

---

## 🙏 致谢

- Vue 3 - 渐进式JavaScript框架
- Vite - 下一代前端构建工具
- Electron - 使用JavaScript、HTML和CSS构建跨平台桌面应用
- Pinia - Vue的状态管理库
- Emoji - 由开源社区维护的表情符号