记忆翻牌配对游戏｜uni-app 多端源码H5/小程序/App｜看激励...

zhang*** · 2026-5-5 17:52:18

看激励广告联盟流量主｜记忆翻牌配对游戏｜uni-app 多端源码H5/小程序/App｜过关抽奖·手机号收集

复制代码

记忆翻牌配对游戏｜uni-app 多端源码H5/小程序/App｜看激励广告联盟流量主·过关抽奖·手机号收集

复制代码

---
##记忆翻牌游戏 — 功能说明
### 一、游戏定位
这是一个面向运营活动的**记忆翻牌配对游戏**，用户通过记忆卡牌位置、翻牌配对来通关，过关后可参与抽奖。游戏内嵌手机号收集功能，用于后续领奖和记录查询。
---
### 二、游戏流程
整个游戏分为三个阶段，由 `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 行的网格布局，通过绝对定位按公式计算坐标：
```
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` 引入 `<ad-unit>` 组件或调用激励视频 API。
1. 在 `manifest.json` 中添加 `uniad` 配置节点，填入从 uniAD 后台获取的广告位 ID
2. 在页面中引入 `<ad-unit>` 组件或使用 `uni.createRewardedVideoAd()` 等 API
3. 适合插入广告的位置：游戏开始前（插屏广告）、过关后抽奖前（激励视频，抽奖前看广告）、弹窗关闭时（Banner 广告）
---
### 十、流量主广告（小程序）
**当前状态：开启小程序流量主广告。**
流量主广告需要在小程序后台开通流量主功能后，在代码中使用微信原生 `<ad>` 组件。
- 页面模板中没有引入 `<ad>` 标签
- 配置广告单元 ID（adUnitId）
**接入流量主广告：**
1. 小程序后台开通流量主
2. 创建广告位，获取广告单元 ID
3. 在模板中添加 `<ad unit-id="xxx"></ad>` 原生组件
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/小程序）、功能（倒计时、抽奖、表单），层次清晰，搜索覆盖广。

复制代码

egc*** · 2026-5-5 17:52:19

已加客服

feif*** · 2026-5-5 17:53:43

沙发！！

yuj*** · 2026-5-5 17:53:53

你历害！！

michae*** · 2026-5-5 23:19:28

支持！！！

axs123*** · 2026-5-6 15:31:14

不错！！

qdqi*** · 2026-5-6 15:31:58

支持！！！

dasd*** · 2026-5-7 19:19:31

顶一下！！

lib_t*** · 2026-5-8 15:51:38

非常好！！

mm135*** · 2026-5-8 15:52:17

你好棒！！

		自动登录	找回密码
密码			立即注册