3小时做了个给我引流120人的“老年痴呆测试器”小程序-2/1000

我是天元,立志做1000个有趣的项目的前端,公众号:cssandjs

如果你喜欢的话,请点赞,收藏,转发

评论领取早发现早治疗勋章

最终成品地址:#小程序://1000个项目/W4dqBC5NGIUADog(微信内打开)

背景

就在昨天(03-19),我的小程序审核终于通过了,于是我觉得应该做个小程序引流测试下。主题应该是有趣的,用户乐于分享的。此时脑海里闪出一个画面:

于是我脑子里的任督两条大筋马上意识到就是这个了。

需求分析

这个需求很简单,具体如下:

  • 开始提出三个物品
  • 然后开始10道计算题
  • 提出一个跟开始相关的最终问题
  • 通过所有测试,显示你没有得"老年痴呆"
  • 如果有任何一个问题回答错误,则显示"你得了老年痴呆"

相关UI如下

具体实操

项目目录如下

主要包含一个页面和四个状态的组件,组件为

  • start,有一个开始按钮,点击开始游戏
  • playing,展示初始三件物品
  • math,显示10道数学题,每道题为了增加紧迫性,增加5秒倒计时
  • status,显示结果页面

核心代码

三件物品的初始化

首先我准备了一个物品的素材库,按照5个分类,每个分类5个物品来制作了一个列表。整体数据结构如下:constant.js

js 复制代码
export const ITEM_LIST = [
  {
    category: "体育",
    items: [
      {
        id: 1,
        name: "足球",
      },
      ...
    ],
  },
...
]

在开始时我生成了三个不重复的随机数,因为数字不大,这里直接while了下,对于相同的数字重新生成。

js 复制代码
  const randomNums = new Set();
    while (randomNums.size < 3) {
      randomNums.add(Math.floor(Math.random() * 5));
    }

然后再生成一个0-4的随机数,取`items``里的单个子对象。

随机算数的生成

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

js 复制代码
	// 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代码地址

github.com/tinlee/1000...

历史阅读推荐

1/1000-用node帮老婆做excel工资表

3/1000-父爱如山-用vue3给女儿做做个10以内加减法练习工具

我是天元,立志做1000个有趣的项目的前端。

如果你喜欢的话,请点赞,收藏,转发

评论领取早发现早治疗勋章

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫4 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css