我是天元，立志做
1000个有趣的项目的前端，公众号：cssandjs如果你喜欢的话，请
点赞，收藏，转发。
评论领取早发现早治疗勋章
最终成品地址：#小程序://1000个项目/W4dqBC5NGIUADog（微信内打开）
背景
就在昨天（03-19），我的小程序审核终于通过了，于是我觉得应该做个小程序引流测试下。主题应该是有趣的，用户乐于分享的。此时脑海里闪出一个画面：
于是我脑子里的任督两条大筋马上意识到就是这个了。
需求分析
这个需求很简单，具体如下：
- 开始提出
三个物品 - 然后开始
10道计算题 - 提出一个跟开始相关的
最终问题 - 通过所有测试，显示你没有得“老年痴呆”
- 如果有任何一个问题回答错误，则显示“你得了老年痴呆”
相关UI如下
具体实操
项目目录如下
主要包含一个页面和四个状态的组件，组件为
- start，有一个开始按钮，点击开始游戏
- playing，展示初始三件物品
- math，显示10道数学题，每道题为了增加紧迫性，增加5秒倒计时
- status，显示结果页面
核心代码
三件物品的初始化
首先我准备了一个物品的素材库，按照5个分类，每个分类5个物品来制作了一个列表。整体数据结构如下：constant.js
export const ITEM_LIST = [
{
category: "体育",
items: [
{
id: 1,
name: "足球",
},
...
],
},
...
]
在开始时我生成了三个不重复的随机数，因为数字不大，这里直接while了下，对于相同的数字重新生成。
const randomNums = new Set();
while (randomNums.size < 3) {
randomNums.add(Math.floor(Math.random() * 5));
}
然后再生成一个0-4的随机数，取`items“里的单个子对象。
随机算数的生成
这里依旧采用了随机数，其实跟我上一篇给孩子写加减法的原理有点像，取随机数，然后加入运算符。这里后续可以优化下，我这里写的比较粗糙了。
// index.js
const operatorList=['+','-','x']
// 第一个数使用历史记录的第一个数，同时计算的最终结果在回答正确后，会被记录为第一个
let mathFirtNumber = this.data.mathFirtNumber;
// 生成最终的结果数字
let successNumber = Math.floor(Math.random() * 99) + 1;
// 获取运算符，我按照+-x的顺序获取，这里每次执行函数后operatorIndex会++
const operator = operatorList[operatorIndex % 3];
// 因为不会出现 1 + -1,1 - -1的情况，所以对负数做了判断，如果有负数出现，则改为正数.然后将运算符反转
let mathSecondNumber;
if (operator === "+") {
mathSecondNumber = successNumber - mathFirtNumber;
if (mathSecondNumber < 0) {
mathSecondNumber = -mathSecondNumber;
mathOperator = "-";
}
} else if (operator === "-") {
mathSecondNumber = mathFirtNumber - successNumber;
if (mathSecondNumber < 0) {
mathSecondNumber = -mathSecondNumber;
mathOperator = "+";
}
} else if (operator === "x") {
mathSecondNumber = Math.floor(Math.random() * 4) + 1;
successNumber = mathFirtNumber * mathSecondNumber;
}
// 生成五个随机数,其中一个是正确答案
const newNumberList = [successNumber];
for (let i = 0; i < 5; i++) {
newNumberList.push(Math.floor(Math.random() * 99) + 1);
}
// 将正确答案的位置随机放置下
const numberList = newNumberList.sort(() => Math.random() - 0.5);
...
最终问题的展示
为了给玩家绕个弯子，我加入了一个使用类别，而不是具体名称，所以看到的问题是：
分享信息
为了增加趣味性，我设置了一个恶搞的分享信息
github代码地址
历史阅读推荐
3/1000-父爱如山-用vue3给女儿做做个10以内加减法练习工具
我是天元，立志做
1000个有趣的项目的前端。如果你喜欢的话，请
点赞，收藏，转发。
评论领取早发现早治疗勋章
原文链接：https://juejin.cn/post/7348327193061507108 作者：天元reborn
