小程序|用uniapp+vue2在微信小程序中做一个找不同色块的小游戏，最后有完整的代码

用uniapp+vue2在微信小程序中做一个找不同色块的小游戏，最后有完整的代码

25-03-08 00:01

3703

12168

blog.csdn.net

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

1、功能截图

2、功能体验

微信搜索《知遇工具箱》小程序可以体验相关功能

微信小程序

3、核心代码

3.1、定义变量

首先，先定义一些变量用来控制游戏的进程。

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> //开始 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line"> start(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> this.reset() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> this.isStart = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line"> this.showStart = false class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> //开始倒计时 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"> this.$nextTick(()=>{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.down.start() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> //重置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> reset(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"> this.showStart = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> this.isEnd = false//是否结束 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> this.isShowAd = true//显示看广告 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"> this.showBreakRecordTip = false//是否打破记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line"> this.lineNumCount = this.lineNumCountConfig//初始每行数量 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"> this.gameScore = 0 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> this.gameTime = this.gameTimeConfig class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line"> // 设置颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line"> this.randomHsl() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line"> let num = this.lineNumCount * this.lineNumCount class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line"> // 随机浅色方块的位置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line"> this.selIndex = Math.floor(Math.random() * num); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> // 重绘色块 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line"> raiseGame(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> if (this.lineNumCount < this.maxLineCount) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> this.lineNumCount++ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> let num = this.lineNumCount * this.lineNumCount class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"> // 随机浅色方块的位置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> this.selIndex = Math.floor(Math.random() * num); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> // 设置颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"> this.randomHsl() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> // 设置颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"> randomHsl(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> let Tone = Math.round(Math.random() * (360 - 1)); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> let diffSum = 90 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"> // 分等级 10分一次减一 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line"> if (this.gameScore < 10) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = diffSum - this.gameScore class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> } else if (this.gameScore < 30) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = diffSum - (this.gameScore - 10) / 2 - 10 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line"> } else if (this.gameScore < 40) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = diffSum - (this.gameScore - 30) / 2 - 20 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line"> } else { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = 65 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line"> // console.log('diffSum: ',diffSum); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line"> this.selColor = 'hsl(' + Tone + ',' + diffSum + '%,50%)' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line"> this.defColor = 'hsl(' + Tone + ',60%,50%)' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> //倒计时结束 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line"> downEnd(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> this.isEnd = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> this.keepRecords()//保存记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalTitle = '挑战结束' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> let msg = '' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"> if(this.showBreakRecordTip){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> msg = '，打破了历史记录。' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalContent = '本轮得分：'+this.gameScore+'分'+msg class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> this.showModal = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> this.share = `我在色块识别挑战中获得 ${this.gameScore} 分,你也来试试！` class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

4、完整代码

注意：代码中使用的图鸟UI 组件，如果用的是其他组件自行替换相关组件代码即可。

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="53"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="54"> class="hljs-ln-code"> class="hljs-ln-line"><script> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="55"> class="hljs-ln-code"> class="hljs-ln-line"> export default { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="56"> class="hljs-ln-code"> class="hljs-ln-line"> data() { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="57"> class="hljs-ln-code"> class="hljs-ln-line"> return { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="58"> class="hljs-ln-code"> class="hljs-ln-line"> //-----配置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="59"> class="hljs-ln-code"> class="hljs-ln-line"> gameTimeConfig:60,//每轮时间 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="60"> class="hljs-ln-code"> class="hljs-ln-line"> lineNumCountConfig:2,//初始每行数量 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="61"> class="hljs-ln-code"> class="hljs-ln-line"> showAdAddTime:60,//看广告增加时间 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="62"> class="hljs-ln-code"> class="hljs-ln-line"> //最多每行数量 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="63"> class="hljs-ln-code"> class="hljs-ln-line"> maxLineCount:6, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="64"> class="hljs-ln-code"> class="hljs-ln-line"> share:'',//分享语 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="65"> class="hljs-ln-code"> class="hljs-ln-line"> //---------- class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="66"> class="hljs-ln-code"> class="hljs-ln-line"> showStart:true,//显示开始 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="67"> class="hljs-ln-code"> class="hljs-ln-line"> isStart:false,//是否开始 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="68"> class="hljs-ln-code"> class="hljs-ln-line"> isEnd:false,//是否结束 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="69"> class="hljs-ln-code"> class="hljs-ln-line"> isShowAd:true,//是否显示看广告 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="70"> class="hljs-ln-code"> class="hljs-ln-line"> gameTime: 60, // 游戏时间 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="71"> class="hljs-ln-code"> class="hljs-ln-line"> gameScore: 0, // 游戏得分 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="72"> class="hljs-ln-code"> class="hljs-ln-line"> lineNumCount:2, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="73"> class="hljs-ln-code"> class="hljs-ln-line"> selColor: 'hsl(200,90%,50%)', // 高亮颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="74"> class="hljs-ln-code"> class="hljs-ln-line"> defColor: 'hsl(200,60%,50%)', // 其他方块颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="75"> class="hljs-ln-code"> class="hljs-ln-line"> selIndex:0,//高亮下标 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="76"> class="hljs-ln-code"> class="hljs-ln-line"> showModal:false, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="77"> class="hljs-ln-code"> class="hljs-ln-line"> modalTitle: '', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="78"> class="hljs-ln-code"> class="hljs-ln-line"> modalContent: '', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="79"> class="hljs-ln-code"> class="hljs-ln-line"> modalButton: [ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="80"> class="hljs-ln-code"> class="hljs-ln-line"> { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="81"> class="hljs-ln-code"> class="hljs-ln-line"> text: '确定', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="82"> class="hljs-ln-code"> class="hljs-ln-line"> backgroundColor: 'tn-cool-bg-color-6', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="83"> class="hljs-ln-code"> class="hljs-ln-line"> fontColor: '#FFFFFF' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="84"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="85"> class="hljs-ln-code"> class="hljs-ln-line"> ], class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="86"> class="hljs-ln-code"> class="hljs-ln-line"> //最高记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="87"> class="hljs-ln-code"> class="hljs-ln-line"> highestRecord:0, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="88"> class="hljs-ln-code"> class="hljs-ln-line"> //记录时间 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="89"> class="hljs-ln-code"> class="hljs-ln-line"> highestRecordTime:null, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="90"> class="hljs-ln-code"> class="hljs-ln-line"> //是否打破记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="91"> class="hljs-ln-code"> class="hljs-ln-line"> showBreakRecordTip:false, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="92"> class="hljs-ln-code"> class="hljs-ln-line"> //-----------广告------------ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="93"> class="hljs-ln-code"> class="hljs-ln-line"> videoAd:null, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="94"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="95"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="96"> class="hljs-ln-code"> class="hljs-ln-line"> //1.发送给朋友 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="97"> class="hljs-ln-code"> class="hljs-ln-line"> onShareAppMessage(res) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="98"> class="hljs-ln-code"> class="hljs-ln-line"> return{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="99"> class="hljs-ln-code"> class="hljs-ln-line"> title:this.share, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="100"> class="hljs-ln-code"> class="hljs-ln-line"> path:'/pages/recreation/colorWeakness' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="101"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="102"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="103"> class="hljs-ln-code"> class="hljs-ln-line"> //2.分享到朋友圈 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="104"> class="hljs-ln-code"> class="hljs-ln-line"> onShareTimeline() { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="105"> class="hljs-ln-code"> class="hljs-ln-line"> return{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="106"> class="hljs-ln-code"> class="hljs-ln-line"> title:this.share, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="107"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="108"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="109"> class="hljs-ln-code"> class="hljs-ln-line"> onLoad(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="110"> class="hljs-ln-code"> class="hljs-ln-line"> //查询最高记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="111"> class="hljs-ln-code"> class="hljs-ln-line"> this.getRecords() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="112"> class="hljs-ln-code"> class="hljs-ln-line"> this.share = '色块识别，快速找出并点击不同颜色的色块' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="113"> class="hljs-ln-code"> class="hljs-ln-line"> // 在页面onLoad回调事件中创建激励视频广告实例 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="114"> class="hljs-ln-code"> class="hljs-ln-line"> if (wx.createRewardedVideoAd) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="115"> class="hljs-ln-code"> class="hljs-ln-line"> this.videoAd = wx.createRewardedVideoAd({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="116"> class="hljs-ln-code"> class="hljs-ln-line"> adUnitId: '' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="117"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="118"> class="hljs-ln-code"> class="hljs-ln-line"> this.videoAd.onLoad(() => {}) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="119"> class="hljs-ln-code"> class="hljs-ln-line"> this.videoAd.onError((err) => {}) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="120"> class="hljs-ln-code"> class="hljs-ln-line"> //用户关闭广告 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="121"> class="hljs-ln-code"> class="hljs-ln-line"> this.videoAd.onClose((res) => { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="122"> class="hljs-ln-code"> class="hljs-ln-line"> // 用户点击了【关闭广告】按钮 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="123"> class="hljs-ln-code"> class="hljs-ln-line"> if (res && res.isEnded) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="124"> class="hljs-ln-code"> class="hljs-ln-line"> // 正常播放结束，可以下发游戏奖励 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="125"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.toast.show({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="126"> class="hljs-ln-code"> class="hljs-ln-line"> title: '增加成功', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="127"> class="hljs-ln-code"> class="hljs-ln-line"> content:'即将继续挑战', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="128"> class="hljs-ln-code"> class="hljs-ln-line"> icon: 'success', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="129"> class="hljs-ln-code"> class="hljs-ln-line"> duration: 2000 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="130"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="131"> class="hljs-ln-code"> class="hljs-ln-line"> //增加时间 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="132"> class="hljs-ln-code"> class="hljs-ln-line"> this.addTime() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="133"> class="hljs-ln-code"> class="hljs-ln-line"> //隐藏广告按钮 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="134"> class="hljs-ln-code"> class="hljs-ln-line"> this.isShowAd = false class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="135"> class="hljs-ln-code"> class="hljs-ln-line"> } else { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="136"> class="hljs-ln-code"> class="hljs-ln-line"> // 播放中途退出，不下发游戏奖励 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="137"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.toast.show({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="138"> class="hljs-ln-code"> class="hljs-ln-line"> title: '中途退出', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="139"> class="hljs-ln-code"> class="hljs-ln-line"> content:'时间增加失败', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="140"> class="hljs-ln-code"> class="hljs-ln-line"> icon: 'emoji-sad', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="141"> class="hljs-ln-code"> class="hljs-ln-line"> duration: 1500 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="142"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="143"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="144"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="145"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="146"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="147"> class="hljs-ln-code"> class="hljs-ln-line"> methods: { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="148"> class="hljs-ln-code"> class="hljs-ln-line"> //看广告 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="149"> class="hljs-ln-code"> class="hljs-ln-line"> showAd(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="150"> class="hljs-ln-code"> class="hljs-ln-line"> // 用户触发广告后，显示激励视频广告 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="151"> class="hljs-ln-code"> class="hljs-ln-line"> if (this.videoAd) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="152"> class="hljs-ln-code"> class="hljs-ln-line"> this.videoAd.show().catch(() => { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="153"> class="hljs-ln-code"> class="hljs-ln-line"> // 失败重试 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="154"> class="hljs-ln-code"> class="hljs-ln-line"> this.videoAd.load() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="155"> class="hljs-ln-code"> class="hljs-ln-line"> .then(() => videoAd.show()) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="156"> class="hljs-ln-code"> class="hljs-ln-line"> .catch(err => { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="157"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.toast.show({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="158"> class="hljs-ln-code"> class="hljs-ln-line"> title: '视频加载失败', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="159"> class="hljs-ln-code"> class="hljs-ln-line"> icon: 'emoji-sad', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="160"> class="hljs-ln-code"> class="hljs-ln-line"> duration: 1500 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="161"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="162"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="163"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="164"> class="hljs-ln-code"> class="hljs-ln-line"> }else{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="165"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.toast.show({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="166"> class="hljs-ln-code"> class="hljs-ln-line"> title: '广告加载失败', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="167"> class="hljs-ln-code"> class="hljs-ln-line"> icon: 'emoji-sad', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="168"> class="hljs-ln-code"> class="hljs-ln-line"> duration: 1500 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="169"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="170"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="171"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="172"> class="hljs-ln-code"> class="hljs-ln-line"> //增加时间 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="173"> class="hljs-ln-code"> class="hljs-ln-line"> addTime(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="174"> class="hljs-ln-code"> class="hljs-ln-line"> this.gameTime = this.showAdAddTime + 2 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="175"> class="hljs-ln-code"> class="hljs-ln-line"> this.isEnd = false//是否结束 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="176"> class="hljs-ln-code"> class="hljs-ln-line"> //开始倒计时 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="177"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.down.start() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="178"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="179"> class="hljs-ln-code"> class="hljs-ln-line"> //开始 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="180"> class="hljs-ln-code"> class="hljs-ln-line"> start(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="181"> class="hljs-ln-code"> class="hljs-ln-line"> this.reset() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="182"> class="hljs-ln-code"> class="hljs-ln-line"> this.isStart = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="183"> class="hljs-ln-code"> class="hljs-ln-line"> this.showStart = false class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="184"> class="hljs-ln-code"> class="hljs-ln-line"> //开始倒计时 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="185"> class="hljs-ln-code"> class="hljs-ln-line"> this.$nextTick(()=>{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="186"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.down.start() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="187"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="188"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="189"> class="hljs-ln-code"> class="hljs-ln-line"> //重置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="190"> class="hljs-ln-code"> class="hljs-ln-line"> reset(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="191"> class="hljs-ln-code"> class="hljs-ln-line"> this.showStart = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="192"> class="hljs-ln-code"> class="hljs-ln-line"> this.isEnd = false//是否结束 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="193"> class="hljs-ln-code"> class="hljs-ln-line"> this.isShowAd = true//显示看广告 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="194"> class="hljs-ln-code"> class="hljs-ln-line"> this.showBreakRecordTip = false//是否打破记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="195"> class="hljs-ln-code"> class="hljs-ln-line"> this.lineNumCount = this.lineNumCountConfig//初始每行数量 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="196"> class="hljs-ln-code"> class="hljs-ln-line"> this.gameScore = 0 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="197"> class="hljs-ln-code"> class="hljs-ln-line"> this.gameTime = this.gameTimeConfig class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="198"> class="hljs-ln-code"> class="hljs-ln-line"> // 设置颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="199"> class="hljs-ln-code"> class="hljs-ln-line"> this.randomHsl() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="200"> class="hljs-ln-code"> class="hljs-ln-line"> let num = this.lineNumCount * this.lineNumCount class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="201"> class="hljs-ln-code"> class="hljs-ln-line"> // 随机浅色方块的位置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="202"> class="hljs-ln-code"> class="hljs-ln-line"> this.selIndex = Math.floor(Math.random() * num); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="203"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="204"> class="hljs-ln-code"> class="hljs-ln-line"> //倒计时结束 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="205"> class="hljs-ln-code"> class="hljs-ln-line"> downEnd(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="206"> class="hljs-ln-code"> class="hljs-ln-line"> this.isEnd = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="207"> class="hljs-ln-code"> class="hljs-ln-line"> this.keepRecords()//保存记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="208"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalTitle = '挑战结束' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="209"> class="hljs-ln-code"> class="hljs-ln-line"> let msg = '' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="210"> class="hljs-ln-code"> class="hljs-ln-line"> if(this.showBreakRecordTip){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="211"> class="hljs-ln-code"> class="hljs-ln-line"> msg = '，打破了历史记录。' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="212"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="213"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalContent = '本轮得分：'+this.gameScore+'分'+msg class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="214"> class="hljs-ln-code"> class="hljs-ln-line"> this.showModal = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="215"> class="hljs-ln-code"> class="hljs-ln-line"> this.share = `我在色块识别挑战中获得 ${this.gameScore} 分,你也来试试！` class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="216"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="217"> class="hljs-ln-code"> class="hljs-ln-line"> //获取历史最高记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="218"> class="hljs-ln-code"> class="hljs-ln-line"> getRecords(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="219"> class="hljs-ln-code"> class="hljs-ln-line"> let data = uni.getStorageSync("colorWeaknessHighestRecord") class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="220"> class="hljs-ln-code"> class="hljs-ln-line"> if(data){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="221"> class="hljs-ln-code"> class="hljs-ln-line"> this.highestRecord = data.gameScore class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="222"> class="hljs-ln-code"> class="hljs-ln-line"> this.highestRecordTime = data.time class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="223"> class="hljs-ln-code"> class="hljs-ln-line"> }else{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="224"> class="hljs-ln-code"> class="hljs-ln-line"> this.highestRecord = 0 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="225"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="226"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="227"> class="hljs-ln-code"> class="hljs-ln-line"> //保存记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="228"> class="hljs-ln-code"> class="hljs-ln-line"> keepRecords(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="229"> class="hljs-ln-code"> class="hljs-ln-line"> //判断当前轮数是否超过最高记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="230"> class="hljs-ln-code"> class="hljs-ln-line"> if(this.gameScore>this.highestRecord){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="231"> class="hljs-ln-code"> class="hljs-ln-line"> this.showBreakRecordTip = true//打破记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="232"> class="hljs-ln-code"> class="hljs-ln-line"> this.highestRecord = this.gameScore class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="233"> class="hljs-ln-code"> class="hljs-ln-line"> this.highestRecordTime = new Date().getTime() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="234"> class="hljs-ln-code"> class="hljs-ln-line"> let data = { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="235"> class="hljs-ln-code"> class="hljs-ln-line"> gameScore:this.gameScore, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="236"> class="hljs-ln-code"> class="hljs-ln-line"> time:this.highestRecordTime class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="237"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="238"> class="hljs-ln-code"> class="hljs-ln-line"> uni.setStorage({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="239"> class="hljs-ln-code"> class="hljs-ln-line"> key: 'colorWeaknessHighestRecord', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="240"> class="hljs-ln-code"> class="hljs-ln-line"> data: data, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="241"> class="hljs-ln-code"> class="hljs-ln-line"> success: ()=> { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="242"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="243"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="244"> class="hljs-ln-code"> class="hljs-ln-line"> }); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="245"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="246"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="247"> class="hljs-ln-code"> class="hljs-ln-line"> //显示最高记录 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="248"> class="hljs-ln-code"> class="hljs-ln-line"> showHighestRecord(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="249"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalTitle = '最高记录' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="250"> class="hljs-ln-code"> class="hljs-ln-line"> if(this.highestRecordTime){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="251"> class="hljs-ln-code"> class="hljs-ln-line"> const date = new Date(this.highestRecordTime); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="252"> class="hljs-ln-code"> class="hljs-ln-line"> const year = date.getFullYear(); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="253"> class="hljs-ln-code"> class="hljs-ln-line"> const month = String(date.getMonth() + 1).padStart(2, '0'); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="254"> class="hljs-ln-code"> class="hljs-ln-line"> const day = String(date.getDate()).padStart(2, '0'); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="255"> class="hljs-ln-code"> class="hljs-ln-line"> const hours = String(date.getHours()).padStart(2, '0'); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="256"> class="hljs-ln-code"> class="hljs-ln-line"> const minutes = String(date.getMinutes()).padStart(2, '0'); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="257"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalContent = `${this.highestRecord} 分：${year}/${month}/${day} ${hours}:${minutes}` class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="258"> class="hljs-ln-code"> class="hljs-ln-line"> }else{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="259"> class="hljs-ln-code"> class="hljs-ln-line"> this.modalContent = '暂无记录，点击右边按钮开始测试吧。' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="260"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="261"> class="hljs-ln-code"> class="hljs-ln-line"> this.showModal = true class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="262"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="263"> class="hljs-ln-code"> class="hljs-ln-line"> //色块点击 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="264"> class="hljs-ln-code"> class="hljs-ln-line"> itemClick(index){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="265"> class="hljs-ln-code"> class="hljs-ln-line"> if(this.isEnd){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="266"> class="hljs-ln-code"> class="hljs-ln-line"> this.$refs.toast.show({ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="267"> class="hljs-ln-code"> class="hljs-ln-line"> title: '时间已用完', class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="268"> class="hljs-ln-code"> class="hljs-ln-line"> duration: 1000 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="269"> class="hljs-ln-code"> class="hljs-ln-line"> }) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="270"> class="hljs-ln-code"> class="hljs-ln-line"> return class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="271"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="272"> class="hljs-ln-code"> class="hljs-ln-line"> //判断点击的是否正确 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="273"> class="hljs-ln-code"> class="hljs-ln-line"> if(index==this.selIndex){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="274"> class="hljs-ln-code"> class="hljs-ln-line"> uni.vibrateShort() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="275"> class="hljs-ln-code"> class="hljs-ln-line"> this.gameScore++ // 分数加一 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="276"> class="hljs-ln-code"> class="hljs-ln-line"> this.raiseGame() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="277"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="278"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="279"> class="hljs-ln-code"> class="hljs-ln-line"> // 重绘色块 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="280"> class="hljs-ln-code"> class="hljs-ln-line"> raiseGame(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="281"> class="hljs-ln-code"> class="hljs-ln-line"> if (this.lineNumCount < this.maxLineCount) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="282"> class="hljs-ln-code"> class="hljs-ln-line"> this.lineNumCount++ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="283"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="284"> class="hljs-ln-code"> class="hljs-ln-line"> let num = this.lineNumCount * this.lineNumCount class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="285"> class="hljs-ln-code"> class="hljs-ln-line"> // 随机浅色方块的位置 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="286"> class="hljs-ln-code"> class="hljs-ln-line"> this.selIndex = Math.floor(Math.random() * num); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="287"> class="hljs-ln-code"> class="hljs-ln-line"> // 设置颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="288"> class="hljs-ln-code"> class="hljs-ln-line"> this.randomHsl() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="289"> class="hljs-ln-code"> class="hljs-ln-line"> }, class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="290"> class="hljs-ln-code"> class="hljs-ln-line"> // 设置颜色 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="291"> class="hljs-ln-code"> class="hljs-ln-line"> randomHsl(){ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="292"> class="hljs-ln-code"> class="hljs-ln-line"> let Tone = Math.round(Math.random() * (360 - 1)); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="293"> class="hljs-ln-code"> class="hljs-ln-line"> let diffSum = 90 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="294"> class="hljs-ln-code"> class="hljs-ln-line"> // 分等级 10分一次减一 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="295"> class="hljs-ln-code"> class="hljs-ln-line"> if (this.gameScore < 10) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="296"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = diffSum - this.gameScore class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="297"> class="hljs-ln-code"> class="hljs-ln-line"> } else if (this.gameScore < 30) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="298"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = diffSum - (this.gameScore - 10) / 2 - 10 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="299"> class="hljs-ln-code"> class="hljs-ln-line"> } else if (this.gameScore < 40) { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="300"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = diffSum - (this.gameScore - 30) / 2 - 20 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="301"> class="hljs-ln-code"> class="hljs-ln-line"> } else { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="302"> class="hljs-ln-code"> class="hljs-ln-line"> diffSum = 65 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="303"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="304"> class="hljs-ln-code"> class="hljs-ln-line"> // console.log('diffSum: ',diffSum); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="305"> class="hljs-ln-code"> class="hljs-ln-line"> this.selColor = 'hsl(' + Tone + ',' + diffSum + '%,50%)' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="306"> class="hljs-ln-code"> class="hljs-ln-line"> this.defColor = 'hsl(' + Tone + ',60%,50%)' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="307"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="308"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="309"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="310"> class="hljs-ln-code"> class="hljs-ln-line">script> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="311"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="312"> class="hljs-ln-code"> class="hljs-ln-line"><style lang="scss" scoped> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="313"> class="hljs-ln-code"> class="hljs-ln-line"> .body{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="314"> class="hljs-ln-code"> class="hljs-ln-line"> min-height: 100vh; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="315"> class="hljs-ln-code"> class="hljs-ln-line"> background-color: rgba(214, 240, 251, 0.5); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="316"> class="hljs-ln-code"> class="hljs-ln-line"> .buts{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="317"> class="hljs-ln-code"> class="hljs-ln-line"> padding:32rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="318"> class="hljs-ln-code"> class="hljs-ln-line"> display: flex; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="319"> class="hljs-ln-code"> class="hljs-ln-line"> justify-content: space-between; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="320"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="321"> class="hljs-ln-code"> class="hljs-ln-line"> .but{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="322"> class="hljs-ln-code"> class="hljs-ln-line"> padding: 0 32rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="323"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="324"> class="hljs-ln-code"> class="hljs-ln-line"> .topInfo{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="325"> class="hljs-ln-code"> class="hljs-ln-line"> margin-top: 32rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="326"> class="hljs-ln-code"> class="hljs-ln-line"> padding: 0rpx 64rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="327"> class="hljs-ln-code"> class="hljs-ln-line"> display: flex; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="328"> class="hljs-ln-code"> class="hljs-ln-line"> justify-content: space-between; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="329"> class="hljs-ln-code"> class="hljs-ln-line"> .infoText{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="330"> class="hljs-ln-code"> class="hljs-ln-line"> font-size: 32rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="331"> class="hljs-ln-code"> class="hljs-ln-line"> color: #3D7EFF; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="332"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="333"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="334"> class="hljs-ln-code"> class="hljs-ln-line"> .numList{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="335"> class="hljs-ln-code"> class="hljs-ln-line"> padding: 24rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="336"> class="hljs-ln-code"> class="hljs-ln-line"> .itemList{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="337"> class="hljs-ln-code"> class="hljs-ln-line"> display: grid; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="338"> class="hljs-ln-code"> class="hljs-ln-line"> gap: 10rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="339"> class="hljs-ln-code"> class="hljs-ln-line"> padding: 14rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="340"> class="hljs-ln-code"> class="hljs-ln-line"> background-color: #ffffff; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="341"> class="hljs-ln-code"> class="hljs-ln-line"> border-radius: 32rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="342"> class="hljs-ln-code"> class="hljs-ln-line"> box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="343"> class="hljs-ln-code"> class="hljs-ln-line"> .item{ class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="344"> class="hljs-ln-code"> class="hljs-ln-line"> padding-bottom: 100%; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="345"> class="hljs-ln-code"> class="hljs-ln-line"> position:relative; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="346"> class="hljs-ln-code"> class="hljs-ln-line"> border-radius: 40rpx; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="347"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="348"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="349"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="350"> class="hljs-ln-code"> class="hljs-ln-line"> } class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="351"> class="hljs-ln-code"> class="hljs-ln-line">style> class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

注：本文转载自blog.csdn.net的知遇745的文章"https://blog.csdn.net/weixin_72282980/article/details/144728383"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。

复制链接

发表评论

/ 登录

评论记录：

未查询到任何数据！

用uniapp+vue2在微信小程序中做一个找不同色块的小游戏，最后有完整的代码

1、功能截图

2、功能体验

3、核心代码

3.1、定义变量

3.2、点击开始

3.3、颜色生成

3.4、倒计时结束

3.5、增加时间

4、完整代码

评论记录：