基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑衅 ...

不知你是否和我一样，我曾有一个猜3个随机数字的梦，但通过多次的积极，梦想最终未能实现，而且还波多了我的饭票。以是，我要通过vue3 + js-tool-big-box 这个工具库，来实现一个猜3个随机数字的小游戏动画，我倒是要看看，到底多少次可以或许成为真实。


1 实现思绪

首先实现思绪上，我们知道，这个小游戏，有3个数字，每个数字是依次出现的，中心带有间隔性，而且每个数字再出现之前，有个不停在动的动效，这就需要一些代码技术来实现了。在3个数字依次出现完成后，需要与本身之前的期待值想匹配，然后给出用户提示，告诉用户是否已挑衅成功。
技术实现素材包括：
   

• 启动Vue3项目，重要使用到reactive定义数据依靠；
  
• 安装ElementPlus，重要用到ElMessage和el-button组件功能；
  
• 安装js-tool-big-box，用于获取指定范围内的随机数字，用到的方法是numberBox.getRandomNumber；
  
• 依次出现的数字，通过setTimeout定时3个数字，setInterval用于闪动的数字；
  

  2  基于Vue3 + js-tool-big-box工具实现快3游戏

2.1 定义模板界面

在本次开辟中，我们需要定义一个Vue3的模板界面，界面中需要展示我的期待值，与线下业务场景类似，是一个写死的数据即可，当然，如果你想要做的灵活一些，也可以写入动态的值；
需要一个按钮，用来开始启动3个随机数的天生；
需要3个地区，分别用来出现3个天生的随机数值，本来我想的是天生一个3位的随机数得了，但想到与线了局景尽量类似，我就准备了3个地区元素。代码如下：

1. <template>
2.   <div class="home">
3.     <p class="title">基于Vue3 + js-tool-big-box的3个随机数字</p>
4.     <div class="img-box">
5.       <img src="../../assets/fast3.png" />
6.     </div>
7.     <div class="my-want-box">
8.       <label>我的预测：</label>
9.       <span>258</span>
10.     </div>
11.     <div class="btn-box">
12.       <el-button class="btn" @click="handleGet1000">幸运开始</el-button>
13.     </div>
14.     <div class="result-box">
15.       <span>{{ luckObj.num1 }}</span>
16.       <span>{{ luckObj.num2 }}</span>
17.       <span>{{ luckObj.num3 }}</span>
18.     </div>
19.   </div>
20. </template>

复制代码

2.2 使用Vue3定义数据依靠 

如果你刚刚使用Vue3不久，总会难以想起Vue3如何定义数据依靠，就像上午还在做Vue项目用两个大括号绑定变量数据，忽然下午开始做React项目，写上两个大括号就报错一样。这里我们引入reactive，然后定义三个地区分别需要显示的初始化数值。另外引入ElMessage，用于最终提示用户结果。

1. <script setup>
2. import { reactive } from "vue";
3. import { ElMessage } from 'element-plus';
5. const luckObj = reactive({
6.   num1: 0,
7.   num2: 0,
8.   num3: 0,
9. })
11. </script>

复制代码

2.3 引入js-tool-big-box工具库，用于获取指定随机数字

首先安装js-tool-big-box工具库，执行命令：
   npm i js-tool-big-box
  项目中引入工具库，同时工具库对外提供了numberBox 对象，用于获取指定范围内的随机数字，这里我们只天生1到9的随机数字即可。引入代码如下：

1. import { numberBox } from 'js-tool-big-box';

复制代码

2.4 简单的获取3个随机数字

3个随机数字嘛，是需要依次获取3个随机数字的，我们先来个简单版本的，就是隔一秒获取依次，然后一共获取3次，就得到了3个随机数字。刚刚模板中el-button按钮添加了handleGet1000事件。这个事件名称可有来头，你就说这个get1000，玩过的都知道，哈哈，你懂得。我们看一下这个事件的代码：

1. const handleGet1000 = ()=> {
2.   // 第一个数字
3.   setTimeout(() => {
4.     luckObj.num1 = numberBox.getRandomNumber(1, 10);
5.   }, 1000)
6.   
7.   // 第二个数字
8.   setTimeout(() => {
9.     luckObj.num2 = numberBox.getRandomNumber(1, 10);
10.   }, 2000)
11.   // 第三个数字
12.   setTimeout(() => {
13.     luckObj.num3 = numberBox.getRandomNumber(1, 10);
14.   }, 3000)
15. }

复制代码

2.5 动画特效 

本来如许，实在就已经算是完成了，但3个随机数字嘛，肯定是需要谁人过程的，等待的过程，预期的过程，以是这里要有个动画特效才完善。当然不是加个loading图，需要让数字闪动起来，感觉随时本身都要中奖的那种结果。
以是我们在setTimeout的底子上，每100毫秒添加了setInterval的定时器，然后每100毫秒获取依次随机值，执行10次，如许以最终那次的随机值做为结果值即可。修改后的方法代码如下：

1. const handleGet1000 = ()=> {
2.   // 第一个数字
3.   let timerNum1 = 0;
4.   let timer1 = setInterval(() => {
5.     luckObj.num1 = numberBox.getRandomNumber(1, 9);
6.     timerNum1++;
7.     if (timerNum1 >= 10) {
8.       window.clearInterval(timer1);
9.       timer1 = null;
10.     }
11.   }, 100)
12.   // 第二个数字
13.   setTimeout(() => {
14.     let timerNum2 = 0;
15.     let timer2 = setInterval(() => {
16.       luckObj.num2 = numberBox.getRandomNumber(1, 9);
17.       timerNum2++;
18.       if (timerNum2 >= 10) {
19.         window.clearInterval(timer2);
20.         timer2 = null;
21.       }
22.     }, 100)
23.   }, 2000)
24.   // 第三个数字
25.   setTimeout(() => {
26.     let timerNum3 = 0;
27.     let timer3 = setInterval(() => {
28.       luckObj.num3 = numberBox.getRandomNumber(1, 9);
29.       timerNum3++;
30.       if (timerNum3 >= 10) {
31.         // 判断是否中奖
32.         const resultNum = `${luckObj.num1}${luckObj.num2}${luckObj.num3}`;
33.         if (resultNum === '258') {
34.           ElMessage({
35.               type: 'success',
36.               message: '喜中快3大奖！！！'
37.           })
38.         } else {
39.           ElMessage({
40.               type: 'error',
41.               message: '很遗憾，您本次未中奖！'
42.           })
43.         }
44.         
45.         window.clearInterval(timer3);
46.         timer3 = null;
47.       }
48.     }, 100)
49.   }, 3000)
50. }

复制代码

3 很坏的网络扒手 

3.1 发现题目

说完动画的实现呢，我说一个最近碰到的网文扒手，我也不知道他用的是爬虫技术，还是AIGC天生技术，总是技术很强。我之前有篇博客呢，也就那样吧，但被这个人爬过去了。你说爬就怕吧，开辟嘛，谁的代码还不是拷过来拷过去，即便是我写的博客文章，你爬过去也就爬过去了，这没什么，你爬过去，说明我写的还算有价值，被人看重了。
但题目在于，他爬过去以后呢，除了文章标题，修改了有70%的内容。他发布的那篇博客我看了，标题跟我的千篇一律，修改的70%内容呢，完全是瞎闹的。为什么我敢这么肯定呢，因为他爬过去的文章就是我开辟的 js-tool-big-box这个工具库的文章，他在文章中胡写一气，用的方法都不对，我的工具库都带有很棒的分布于CSDN的学习文档。

但他却胡写一气，我当时很生气，万一由有开辟者看了他的文章，然后开始使用我的工具库，那不是要骂我，我这工具库第一开辟者的名声岂不是要坏。
3.2 好言相劝

我终于还是以为不太好，以是，我想在文章底部写个批评，说你这个用法不对，应该看看文档再写博客，但是呢，我怎么都批评不上去，看来是这个人设置了克制批评。以是我就私信这个人，我是想告诉他，如果爬文章呢，你就爬，大家费劲巴力的写，被爬走的文章多的是，但你这么先爬走，再人工智能天生一下，不太好吧。我是这么跟他说的：

看来这个人还挺辛劳，不容易啊，半夜回复的我。你说我拉黑你有啥用啊。 
3.3 变本加厉 

看到这句话，我就有点生气了，我拉黑你有什么用呢，你乱写文章，乱用方法，我是怕开辟者用了有影响啊。我想着要不别理他了，结果这个人还挺有两下子，他来我的博客发批评了。

这个人可真是个人才啊，明显是你爬人家的东西，还乱改，结果倒打一耙，如果是你，你心情如何？都是同一片天空下面的人，怎么会有如许的人啊。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。