---

##记忆翻牌游戏 — 功能说明

### 一、游戏定位

这是一个面向运营活动的**记忆翻牌配对游戏**，用户通过记忆卡牌位置、翻牌配对来通关，过关后可参与抽奖。游戏内嵌手机号收集功能，用于后续领奖和记录查询。

---

### 二、游戏流程

整个游戏分为三个阶段，由 `gameStatus` 变量控制：

**阶段一：未开始（gameStatus = 0）**

页面加载后，卡牌区域被半透明遮罩覆盖，显示"游戏玩法说明"弹窗，内容包括三条规则：

1. 在规定时间内，记忆牌面内容及位置

2. 点击任意两张牌，若图案相同则配对成功，全部配对即过关

3. 过关后可获得一次抽奖机会

同时提供一个手机号输入框和"开始"按钮。按钮有两种视觉状态：未输入手机号时显示灰色按钮图（start_btn2.png），输入后切换为亮色按钮图（start_btn.png），通过 CSS 类 `.active` 切换。

点击开始前会做两层校验：先检查是否为空，再通过正则验证手机号格式。正则覆盖了 13、14、15、16、17、18、19 等主流号段。

**阶段二：记忆阶段（gameStatus = 1）**

点击开始后，12 张卡牌全部翻开，让用户观察并记忆每张牌的位置和图案。页面左上角显示"记忆时间:"倒计时，初始为 **10 秒**（常量 TM1）。

倒计时结束后自动进入游戏阶段。

**阶段三：游戏阶段（gameStatus = 2）**

所有卡牌盖回，左上角文字变为"倒计时间:"，重新以 **20 秒**（常量 TM2）倒计时。用户每次点击一张牌将其翻开，再点击另一张：

- 两张图案相同（index 值相等）→ 配对成功，两张牌保持翻开状态，标记 `cardStatus = ’success’`

- 两张图案不同 → 600 毫秒后两张牌自动盖回

翻牌时有锁定机制（`isChecking`），在两张牌等待判定的 600 毫秒内不允许点击第三张。12 张全部配对成功后，倒计时停止，弹出"恭喜您，获得了一次抽奖机会"，引导用户去抽奖。

若倒计时归零仍未完成全部配对，弹出"手速不够快，再来一次！"超时提示。

---

### 三、卡牌系统

卡牌共 12 张，由 6 种图案各出现 2 次构成。6 种图案对应的静态资源为：

```

/static/img-1.jpg

/static/img-2.jpeg

/static/img-3.jpeg

/static/img-4.jpeg

/static/img-5.jpg

/static/img-6.jpg

```

每次初始化时使用 **Fisher-Yates 洗牌算法**随机打乱顺序，确保每局排列不同。卡牌以 3 列 × 4 行的网格布局，通过绝1对定位按公式计算坐标：

```

left = （cardWidth + 13） × （列号 % 3）

top  = （cardHeight + 13） × floor（行号 / 3）

```

卡牌宽度和高度均为 80px，间距 13px。翻牌动画使用 CSS `rotateY` 3D 翻转：

- 翻开：正面 `.front` 旋转 180 度隐藏到背面，背面 `.back` 旋转 0 度展示出来

- 盖回：移除 `card-flipped` 类，恢复初始状态

---

### 四、抽奖系统

过关后进入抽奖环节，当前为**模拟实现**：

- 固定返回中奖状态（status = 1）

- 奖品池含五个等级：特等奖、一等奖、二等奖、三等奖、安慰奖

- 随机抽取一个奖品名，加入 `myLottery` 数组

- 弹出中奖弹窗，展示奖品名称

代码中标注了 `TODO: 替换为真实抽奖接口`，预留了未中奖分支（status ≠ 1 时弹出"太遗憾了，奖品与你擦肩而过"）。

---

### 五、弹窗系统

通过 `showModalIndex` 变量控制，共五种弹窗：

| 编号 | 触发场景 | 内容 |

|---|---|---|

| 3 | 点击"查看中奖纪录" | 显示中奖列表（`myLottery` 数组），无记录时显示"暂无中奖记录"，有手机号时显示"去领奖"按钮 |

| 4 | 全部配对成功 | "恭喜您，获得了一次抽奖机会" + "赶快去抽奖"按钮 |

| 5 | 超时 或 抽奖未中奖 | 超时显示"手速不够快，再来一次！"，未中奖显示"太遗憾了，奖品与你擦肩而过"，提供"关闭"和"再玩一次" |

| 7 | 抽中奖品 | "恭喜您获得了：XX奖品哦～"，提供"查看奖品"和"再玩一次" |

弹窗打开时游戏倒计时暂停，关闭弹窗时恢复计时。每种弹窗有不同的头部装饰图（t2.jpg ~ t6.jpg），右上角有关闭按钮。

---

### 六、辅助功能

- **再玩一次**：关闭弹窗后自动调用 `startGame（）`，手机号保留无需重新输入

- **中奖记录**：需要先输入手机号才能查看，当前数据存储在本地 `myLottery` 数组

- **领奖**：点击"去领奖"弹出"领奖功能敬请期待"

- **活动规则**：卡牌区域下方固定展示规则文字，内容在 `init（）` 中动态生成

---

### 七、页面布局

从上到下依次为：

1. **顶部横幅**（banner.png 背景图，高度 250rpx）

2. **按钮栏**：左侧黄色圆角框显示倒计时，右侧红色圆角框"查看中奖纪录"

3. **卡牌区域**：青蓝色背景（#1bafd2），内含 3×4 卡牌网格

4. **活动规则区**：白字展示规则文字

整体配色以青蓝色（#41d1eb）为主色调，辅以黄、红色按钮点缀。

让我重新检查配置文件中关于广告和平台的完整信息。

你说得对，之前的介绍确实遗漏了这两块。基于实际代码和配置，以下是完整补充：

---

## 补充：支持端详解

### 八、多端支持详情

**1. H5 浏览器端（当前运行方式）**

**2. App 端（Android / iOS）**

**3. 微信小程序端（mp-weixin）**

**4. 支付宝小程序端（mp-alipay）**

**5. 百度小程序端（mp-baidu）**

**6. 头条/抖音小程序端（mp-toutiao）**

**7. 快应用端（quickapp）**

**跨端兼容注意事项：**

### 九、App 端uniAD 广告支持

**当前状态：不支持，项目中未配置任何广告相关代码或参数。**

 `uniad`、`ad`、`激励视频`、`banner`、`插屏广告` 。`pages/index/index.vue` 引入 `` 组件或调用激励视频 API。

1. 在 `manifest.json` 中添加 `uniad` 配置节点，填入从 uniAD 后台获取的广告位 ID

2. 在页面中引入 `` 组件或使用 `uni.createRewardedVideoAd（）` 等 API

3. 适合插入广告的位置：游戏开始前（插屏广告）、过关后抽奖前（激励视频，抽奖前看广告）、弹窗关闭时（Banner 广告）

---

### 十、流量主广告（小程序）

**当前状态：开启小程序流量主广告。**

流量主广告需要在小程序后台开通流量主功能后，在代码中使用微信原生 `` 组件。

- 页面模板中没有引入 `` 标签

- 配置广告单元 ID（adUnitId）

**接入流量主广告：**

1. 小程序后台开通流量主

2. 创建广告位，获取广告单元 ID

3. 在模板中添加 `` 原生组件

4. 合适的广告场景：游戏页面底部 Banner 广告、过关后插屏广告、抽奖前激励视频

---

基于代码实际内容，以下是 SEO 优化标题：

---

## 推荐标题

### 主标题

> **uni-app 记忆翻牌配对游戏源码 — 多端适配的运营活动抽奖互动前端模板**

### 备选标题

1. **Vue2 翻牌消消乐源码｜带抽奖的 H5/小程序记忆配对游戏模板**

2. **uni-app 多端翻牌小游戏源码 — 含倒计时记忆挑战 + 随机抽奖 + 手机号收集，运营活动必备**

3. **记忆翻牌配对游戏 uni-app 源码｜12 牌 3×4 网格·Fisher-Yates 洗牌·CSS 3D 翻转·过关抽奖**

---

### 标题关键词拆解（基于源码）

| 关键词 | 代码依据 |

|---|---|

| **uni-app** | 整体项目基于 uni-app 框架，多端配置 |

| **记忆翻牌** | `gameStatus=1` 记忆阶段，10 秒观察全部卡牌 |

| **配对游戏** | `clickCard` 逻辑：两张相同 index 则匹配成功 |

| **多端适配** | 7 个平台（H5/Android/iOS/4 小程序/快应用） |

| **抽奖** | `lottery（）` 方法 + 5 级奖品池 |

| **运营活动** | 手机号收集 `mobile` + 中奖记录 `myLottery` |

| **前端模板** | 开箱即用，预留 API 接口 TODO 标记 |

| **Vue2** | `vueVersion: "2"`，Vue 2.7 |

| **Fisher-Yates 洗牌** | `_buildCards（）` 中洗牌算法 |

| **CSS 3D 翻转** | `rotateY` + `backface-visibility` + `keyframes flips` |

| **倒计时** | `TM1=10s` 记忆 + `TM2=20s` 游戏，递归 setTimeout |

| **H5/小程序** | H5 当前运行 + 4 个小程序 manifest 配置 |

| **源码** | 完整可运行的 .vue 单文件组件 |

---

### 推荐最终使用

> **uni-app 记忆翻牌配对游戏源码 — 多端运营活动模板｜H5/小程序通用·倒计时挑战·过关抽奖·手机号收集**

该标题覆盖了项目最核心的卖点：框架（uni-app）、玩法（记忆翻牌配对）、场景（运营活动）、多端（H5/小程序）、功能（倒计时、抽奖、表单），层次清晰，搜索覆盖广。

定制看需求，一般几小时内完成，也不贵。