写一个“老年痴呆测试器”小程序

最终成品地址：#小程序://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``里的单个子对象。

随机算数的生成

这里依旧采用了随机数，其实跟我上一篇给孩子写加减法的原理有点像，取随机数，然后加入运算符。这里后续可以优化下，我这里写的比较粗糙了。

 

      const operatorList=['+','-','x']
      

      let mathFirtNumber = this.data.mathFirtNumber;

      
      let successNumber = Math.floor(Math.random() * 99) + 1;
      
      const operator = operatorList[operatorIndex % 3];

      
      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代码地址 

github.com/tinlee/1000…

来自-天元reborn，欢迎大家关注！ 

在线备战面试、刷题指南，拿走不谢，要学会站在别人的肩膀上提升自己点击这里-->

最后:

如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。