基于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个地区元素。代码如下：
<template>
<div class="home">
<p class="title">基于Vue3 + js-tool-big-box的3个随机数字</p>
<div class="img-box">
<img src="../../assets/fast3.png" />
</div>
<div class="my-want-box">
<label>我的预测：</label>
<span>258</span>
</div>
<div class="btn-box">
<el-button class="btn" @click="handleGet1000">幸运开始</el-button>
</div>
<div class="result-box">
<span>{{ luckObj.num1 }}</span>
<span>{{ luckObj.num2 }}</span>
<span>{{ luckObj.num3 }}</span>
</div>
</div>
</template> 2.2 使用Vue3定义数据依靠
如果你刚刚使用Vue3不久，总会难以想起Vue3如何定义数据依靠，就像上午还在做Vue项目用两个大括号绑定变量数据，忽然下午开始做React项目，写上两个大括号就报错一样。这里我们引入reactive，然后定义三个地区分别需要显示的初始化数值。另外引入ElMessage，用于最终提示用户结果。
<script setup>
import { reactive } from "vue";
import { ElMessage } from 'element-plus';
const luckObj = reactive({
num1: 0,
num2: 0,
num3: 0,
})
</script> 2.3 引入js-tool-big-box工具库，用于获取指定随机数字
首先安装js-tool-big-box工具库，执行命令：
npm i js-tool-big-box
项目中引入工具库，同时工具库对外提供了numberBox 对象，用于获取指定范围内的随机数字，这里我们只天生1到9的随机数字即可。引入代码如下：
import { numberBox } from 'js-tool-big-box'; 2.4 简单的获取3个随机数字
3个随机数字嘛，是需要依次获取3个随机数字的，我们先来个简单版本的，就是隔一秒获取依次，然后一共获取3次，就得到了3个随机数字。刚刚模板中el-button按钮添加了handleGet1000事件。这个事件名称可有来头，你就说这个get1000，玩过的都知道，哈哈，你懂得。我们看一下这个事件的代码：
const handleGet1000 = ()=> {
// 第一个数字
setTimeout(() => {
luckObj.num1 = numberBox.getRandomNumber(1, 10);
}, 1000)
// 第二个数字
setTimeout(() => {
luckObj.num2 = numberBox.getRandomNumber(1, 10);
}, 2000)
// 第三个数字
setTimeout(() => {
luckObj.num3 = numberBox.getRandomNumber(1, 10);
}, 3000)
} 2.5 动画特效
本来如许，实在就已经算是完成了，但3个随机数字嘛，肯定是需要谁人过程的，等待的过程，预期的过程，以是这里要有个动画特效才完善。当然不是加个loading图，需要让数字闪动起来，感觉随时本身都要中奖的那种结果。
以是我们在setTimeout的底子上，每100毫秒添加了setInterval的定时器，然后每100毫秒获取依次随机值，执行10次，如许以最终那次的随机值做为结果值即可。修改后的方法代码如下：
const handleGet1000 = ()=> {
// 第一个数字
let timerNum1 = 0;
let timer1 = setInterval(() => {
luckObj.num1 = numberBox.getRandomNumber(1, 9);
timerNum1++;
if (timerNum1 >= 10) {
window.clearInterval(timer1);
timer1 = null;
}
}, 100)
// 第二个数字
setTimeout(() => {
let timerNum2 = 0;
let timer2 = setInterval(() => {
luckObj.num2 = numberBox.getRandomNumber(1, 9);
timerNum2++;
if (timerNum2 >= 10) {
window.clearInterval(timer2);
timer2 = null;
}
}, 100)
}, 2000)
// 第三个数字
setTimeout(() => {
let timerNum3 = 0;
let timer3 = setInterval(() => {
luckObj.num3 = numberBox.getRandomNumber(1, 9);
timerNum3++;
if (timerNum3 >= 10) {
// 判断是否中奖
const resultNum = `${luckObj.num1}${luckObj.num2}${luckObj.num3}`;
if (resultNum === '258') {
ElMessage({
type: 'success',
message: '喜中快3大奖！！！'
})
} else {
ElMessage({
type: 'error',
message: '很遗憾，您本次未中奖！'
})
}
window.clearInterval(timer3);
timer3 = null;
}
}, 100)
}, 3000)
} https://img-blog.csdnimg.cn/direct/45828cfdd2464671b168582876130cb5.png
3 很坏的网络扒手
3.1 发现题目
说完动画的实现呢，我说一个最近碰到的网文扒手，我也不知道他用的是爬虫技术，还是AIGC天生技术，总是技术很强。我之前有篇博客呢，也就那样吧，但被这个人爬过去了。你说爬就怕吧，开辟嘛，谁的代码还不是拷过来拷过去，即便是我写的博客文章，你爬过去也就爬过去了，这没什么，你爬过去，说明我写的还算有价值，被人看重了。
但题目在于，他爬过去以后呢，除了文章标题，修改了有70%的内容。他发布的那篇博客我看了，标题跟我的千篇一律，修改的70%内容呢，完全是瞎闹的。为什么我敢这么肯定呢，因为他爬过去的文章就是我开辟的 js-tool-big-box这个工具库的文章，他在文章中胡写一气，用的方法都不对，我的工具库都带有很棒的分布于CSDN的学习文档。
https://img-blog.csdnimg.cn/direct/6d4fcbf571684f2b9146a5ac2fe9f72c.png
但他却胡写一气，我当时很生气，万一由有开辟者看了他的文章，然后开始使用我的工具库，那不是要骂我，我这工具库第一开辟者的名声岂不是要坏。
3.2 好言相劝
我终于还是以为不太好，以是，我想在文章底部写个批评，说你这个用法不对，应该看看文档再写博客，但是呢，我怎么都批评不上去，看来是这个人设置了克制批评。以是我就私信这个人，我是想告诉他，如果爬文章呢，你就爬，大家费劲巴力的写，被爬走的文章多的是，但你这么先爬走，再人工智能天生一下，不太好吧。我是这么跟他说的：
https://img-blog.csdnimg.cn/direct/1e53bf582eb54573a73e09f22b1fb96c.png
看来这个人还挺辛劳，不容易啊，半夜回复的我。你说我拉黑你有啥用啊。
3.3 变本加厉
看到这句话，我就有点生气了，我拉黑你有什么用呢，你乱写文章，乱用方法，我是怕开辟者用了有影响啊。我想着要不别理他了，结果这个人还挺有两下子，他来我的博客发批评了。
https://img-blog.csdnimg.cn/direct/1a696a003794484a9430963c05afe54d.png
这个人可真是个人才啊，明显是你爬人家的东西，还乱改，结果倒打一耙，如果是你，你心情如何？都是同一片天空下面的人，怎么会有如许的人啊。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]