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

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

复制代码

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

复制代码

1. ---
   
2. 
   
3. ##记忆翻牌游戏 — 功能说明
   
4. 
   
5. ### 一、游戏定位
   
6. 
   
7. 这是一个面向运营活动的**记忆翻牌配对游戏**，用户通过记忆卡牌位置、翻牌配对来通关，过关后可参与抽奖。游戏内嵌手机号收集功能，用于后续领奖和记录查询。
   
8. 
   
9. ---
   
10. 
    
11. ### 二、游戏流程
    
12. 
    
13. 整个游戏分为三个阶段，由 `gameStatus` 变量控制：
    
14. 
    
15. **阶段一：未开始（gameStatus = 0）**
    
16. 
    
17. 页面加载后，卡牌区域被半透明遮罩覆盖，显示"游戏玩法说明"弹窗，内容包括三条规则：
    
18. 
    
19. 1. 在规定时间内，记忆牌面内容及位置
    
20. 2. 点击任意两张牌，若图案相同则配对成功，全部配对即过关
    
21. 3. 过关后可获得一次抽奖机会
    
22. 
    
23. 同时提供一个手机号输入框和"开始"按钮。按钮有两种视觉状态：未输入手机号时显示灰色按钮图（start_btn2.png），输入后切换为亮色按钮图（start_btn.png），通过 CSS 类 `.active` 切换。
    
24. 
    
25. 点击开始前会做两层校验：先检查是否为空，再通过正则验证手机号格式。正则覆盖了 13、14、15、16、17、18、19 等主流号段。
    
26. 
    
27. **阶段二：记忆阶段（gameStatus = 1）**
    
28. 
    
29. 点击开始后，12 张卡牌全部翻开，让用户观察并记忆每张牌的位置和图案。页面左上角显示"记忆时间:"倒计时，初始为 **10 秒**（常量 TM1）。
    
30. 
    
31. 倒计时结束后自动进入游戏阶段。
    
32. 
    
33. **阶段三：游戏阶段（gameStatus = 2）**
    
34. 
    
35. 所有卡牌盖回，左上角文字变为"倒计时间:"，重新以 **20 秒**（常量 TM2）倒计时。用户每次点击一张牌将其翻开，再点击另一张：
    
36. 
    
37. - 两张图案相同（index 值相等）→ 配对成功，两张牌保持翻开状态，标记 `cardStatus = 'success'`
    
38. - 两张图案不同 → 600 毫秒后两张牌自动盖回
    
39. 
    
40. 翻牌时有锁定机制（`isChecking`），在两张牌等待判定的 600 毫秒内不允许点击第三张。12 张全部配对成功后，倒计时停止，弹出"恭喜您，获得了一次抽奖机会"，引导用户去抽奖。
    
41. 
    
42. 若倒计时归零仍未完成全部配对，弹出"手速不够快，再来一次！"超时提示。
    
43. 
    
44. ---
    
45. 
    
46. ### 三、卡牌系统
    
47. 
    
48. 卡牌共 12 张，由 6 种图案各出现 2 次构成。6 种图案对应的静态资源为：
    
49. 
    
50. ```
    
51. /static/img-1.jpg
    
52. /static/img-2.jpeg
    
53. /static/img-3.jpeg
    
54. /static/img-4.jpeg
    
55. /static/img-5.jpg
    
56. /static/img-6.jpg
    
57. ```
    
58. 
    
59. 每次初始化时使用 **Fisher-Yates 洗牌算法**随机打乱顺序，确保每局排列不同。卡牌以 3 列 × 4 行的网格布局，通过绝对定位按公式计算坐标：
    
60. 
    
61. ```
    
62. left = (cardWidth + 13) × (列号 % 3)
    
63. top  = (cardHeight + 13) × floor(行号 / 3)
    
64. ```
    
65. 
    
66. 卡牌宽度和高度均为 80px，间距 13px。翻牌动画使用 CSS `rotateY` 3D 翻转：
    
67. 
    
68. - 翻开：正面 `.front` 旋转 180 度隐藏到背面，背面 `.back` 旋转 0 度展示出来
    
69. - 盖回：移除 `card-flipped` 类，恢复初始状态
    
70. 
    
71. ---
    
72. 
    
73. ### 四、抽奖系统
    
74. 
    
75. 过关后进入抽奖环节，当前为**模拟实现**：
    
76. 
    
77. - 固定返回中奖状态（status = 1）
    
78. - 奖品池含五个等级：特等奖、一等奖、二等奖、三等奖、安慰奖
    
79. - 随机抽取一个奖品名，加入 `myLottery` 数组
    
80. - 弹出中奖弹窗，展示奖品名称
    
81. 
    
82. 代码中标注了 `TODO: 替换为真实抽奖接口`，预留了未中奖分支（status ≠ 1 时弹出"太遗憾了，奖品与你擦肩而过"）。
    
83. 
    
84. ---
    
85. 
    
86. ### 五、弹窗系统
    
87. 
    
88. 通过 `showModalIndex` 变量控制，共五种弹窗：
    
89. 
    
90. | 编号 | 触发场景 | 内容 |
    
91. |---|---|---|
    
92. | 3 | 点击"查看中奖纪录" | 显示中奖列表（`myLottery` 数组），无记录时显示"暂无中奖记录"，有手机号时显示"去领奖"按钮 |
    
93. | 4 | 全部配对成功 | "恭喜您，获得了一次抽奖机会" + "赶快去抽奖"按钮 |
    
94. | 5 | 超时 或 抽奖未中奖 | 超时显示"手速不够快，再来一次！"，未中奖显示"太遗憾了，奖品与你擦肩而过"，提供"关闭"和"再玩一次" |
    
95. | 7 | 抽中奖品 | "恭喜您获得了：XX奖品哦～"，提供"查看奖品"和"再玩一次" |
    
96. 
    
97. 弹窗打开时游戏倒计时暂停，关闭弹窗时恢复计时。每种弹窗有不同的头部装饰图（t2.jpg ~ t6.jpg），右上角有关闭按钮。
    
98. 
    
99. ---
    
100. 
     
101. ### 六、辅助功能
     
102. 
     
103. - **再玩一次**：关闭弹窗后自动调用 `startGame()`，手机号保留无需重新输入
     
104. - **中奖记录**：需要先输入手机号才能查看，当前数据存储在本地 `myLottery` 数组
     
105. - **领奖**：点击"去领奖"弹出"领奖功能敬请期待"
     
106. - **活动规则**：卡牌区域下方固定展示规则文字，内容在 `init()` 中动态生成
     
107. 
     
108. ---
     
109. 
     
110. ### 七、页面布局
     
111. 
     
112. 从上到下依次为：
     
113. 
     
114. 1. **顶部横幅**（banner.png 背景图，高度 250rpx）
     
115. 2. **按钮栏**：左侧黄色圆角框显示倒计时，右侧红色圆角框"查看中奖纪录"
     
116. 3. **卡牌区域**：青蓝色背景（#1bafd2），内含 3×4 卡牌网格
     
117. 4. **活动规则区**：白字展示规则文字
     
118. 
     
119. 整体配色以青蓝色（#41d1eb）为主色调，辅以黄、红色按钮点缀。
     
120. 
     
121. 让我重新检查配置文件中关于广告和平台的完整信息。
     
122. 你说得对，之前的介绍确实遗漏了这两块。基于实际代码和配置，以下是完整补充：
     
123. 
     
124. ---
     
125. 
     
126. ## 补充：支持端详解
     
127. 
     
128. ### 八、多端支持详情
     
129. 
     
130. 
     
131. 
     
132. **1. H5 浏览器端（当前运行方式）**
     
133. 
     
134. 
     
135. **2. App 端（Android / iOS）**
     
136. 
     
137. **3. 微信小程序端（mp-weixin）**
     
138. 
     
139. **4. 支付宝小程序端（mp-alipay）**
     
140. 
     
141. **5. 百度小程序端（mp-baidu）**
     
142. 
     
143. **6. 头条/抖音小程序端（mp-toutiao）**
     
144. 
     
145. **7. 快应用端（quickapp）**
     
146. 
     
147. **跨端兼容注意事项：**
     
148. 
     
149. 
     
150. ### 九、App 端uniAD 广告支持
     
151. 
     
152. **当前状态：不支持，项目中未配置任何广告相关代码或参数。**
     
153. `uniad`、`ad`、`激励视频`、`banner`、`插屏广告` 。`pages/index/index.vue` 引入 `<ad-unit>` 组件或调用激励视频 API。
     
154. 
     
155. 1. 在 `manifest.json` 中添加 `uniad` 配置节点，填入从 uniAD 后台获取的广告位 ID
     
156. 2. 在页面中引入 `<ad-unit>` 组件或使用 `uni.createRewardedVideoAd()` 等 API
     
157. 3. 适合插入广告的位置：游戏开始前（插屏广告）、过关后抽奖前（激励视频，抽奖前看广告）、弹窗关闭时（Banner 广告）
     
158. 
     
159. ---
     
160. 
     
161. ### 十、流量主广告（小程序）
     
162. 
     
163. **当前状态：开启小程序流量主广告。**
     
164. 
     
165. 流量主广告需要在小程序后台开通流量主功能后，在代码中使用微信原生 `<ad>` 组件。
     
166. - 页面模板中没有引入 `<ad>` 标签
     
167. - 配置广告单元 ID（adUnitId）
     
168. 
     
169. **接入流量主广告：**
     
170. 
     
171. 1. 小程序后台开通流量主
     
172. 2. 创建广告位，获取广告单元 ID
     
173. 3. 在模板中添加 `<ad unit-id="xxx"></ad>` 原生组件
     
174. 4. 合适的广告场景：游戏页面底部 Banner 广告、过关后插屏广告、抽奖前激励视频
     
175. 
     
176. ---
     
177. 基于代码实际内容，以下是 SEO 优化标题：
     
178. 
     
179. ---
     
180. 
     
181. ## 推荐标题
     
182. 
     
183. ### 主标题
     
184. 
     
185. > **uni-app 记忆翻牌配对游戏源码 — 多端适配的运营活动抽奖互动前端模板**
     
186. 
     
187. ### 备选标题
     
188. 
     
189. 1. **Vue2 翻牌消消乐源码｜带抽奖的 H5/小程序记忆配对游戏模板**
     
190. 
     
191. 2. **uni-app 多端翻牌小游戏源码 — 含倒计时记忆挑战 + 随机抽奖 + 手机号收集，运营活动必备**
     
192. 
     
193. 3. **记忆翻牌配对游戏 uni-app 源码｜12 牌 3×4 网格·Fisher-Yates 洗牌·CSS 3D 翻转·过关抽奖**
     
194. 
     
195. ---
     
196. 
     
197. ### 标题关键词拆解（基于源码）
     
198. 
     
199. | 关键词 | 代码依据 |
     
200. |---|---|
     
201. | **uni-app** | 整体项目基于 uni-app 框架，多端配置 |
     
202. | **记忆翻牌** | `gameStatus=1` 记忆阶段，10 秒观察全部卡牌 |
     
203. | **配对游戏** | `clickCard` 逻辑：两张相同 index 则匹配成功 |
     
204. | **多端适配** | 7 个平台（H5/Android/iOS/4 小程序/快应用） |
     
205. | **抽奖** | `lottery()` 方法 + 5 级奖品池 |
     
206. | **运营活动** | 手机号收集 `mobile` + 中奖记录 `myLottery` |
     
207. | **前端模板** | 开箱即用，预留 API 接口 TODO 标记 |
     
208. | **Vue2** | `vueVersion: "2"`，Vue 2.7 |
     
209. | **Fisher-Yates 洗牌** | `_buildCards()` 中洗牌算法 |
     
210. | **CSS 3D 翻转** | `rotateY` + `backface-visibility` + `keyframes flips` |
     
211. | **倒计时** | `TM1=10s` 记忆 + `TM2=20s` 游戏，递归 setTimeout |
     
212. | **H5/小程序** | H5 当前运行 + 4 个小程序 manifest 配置 |
     
213. | **源码** | 完整可运行的 .vue 单文件组件 |
     
214. 
     
215. ---
     
216. 
     
217. ### 推荐最终使用
     
218. 
     
219. > **uni-app 记忆翻牌配对游戏源码 — 多端运营活动模板｜H5/小程序通用·倒计时挑战·过关抽奖·手机号收集**
     
220. 
     
221. 该标题覆盖了项目最核心的卖点：框架（uni-app）、玩法（记忆翻牌配对）、场景（运营活动）、多端（H5/小程序）、功能（倒计时、抽奖、表单），层次清晰，搜索覆盖广。
     

复制代码

已加客服

沙发！！

你历害！！

支持！！！

不错！！

支持！！！