当前位置: 首页 > 科技观察

HarmonyOS - ArkUI(JS)实现数字记忆小游戏

时间:2023-03-11 21:38:30 科技观察

前言最近逛论坛的时候,看到这样一个试题:“实现一个点击数字的小游戏:依次点击容器中随机生成的数字元素,5S后生成的数字元素消失。点击按升序生成数字以通过关卡游戏。”看大佬们用原生js实现的小游戏还是挺有意思的。想到自己对FA的开发还不是很熟悉,就尝试用HarmonyOS来实现一下。游戏。项目描述工具版本:DevEcoStudio3.0Beta3SDK版本:3.1.5.5效果展示游戏介绍进入游戏页面,开启计时功能,随机生成小球,默认6个。时间达到5秒后,球内的数字内容会消失。点击用户记忆中升序排列的数字点即可顺利过关,否则过关失败。实现步骤的整体页面布局包括顶部的游戏介绍,中间的球展示区,以及底部对应的重启按钮和下一级按钮。小球的生成通过动态渲染生成小球,小球的数量随着关卡的高低而增加。一进入游戏界面就开始设置时间。五秒后,球上的数字消失,需要玩家点击内存,依次对玩家点击触发的球的数字进行去重排序。检查点是否成功是在排序处理后判断的。如果排序是点击次数从小到大的顺序,则表示用户成功完成了checkpoint。否则检查点失败,弹出相应的弹窗。重启和等级升级当用户触发重启时,回到默认的初始化等级,清除之前的小球操作等,点击下一关对应的小球数量增加,时间不变,最多十。一个小球。代码实现1.Hml部分游戏提示:5sFinally,数字内容会消失,凭记忆按数字从小到大的顺序点击数字点即可顺利过关。

{{$item.text}}
重新开始下一个时间:{{time}}很遗失通关失败~~恭喜你通关成功呀2、css部分.container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;position:relative;}.header{display:flex;justify-content:center;align-items:center;width:100%;}.titleMessage{margin-top:40px;width:100%;height:80px;background-color:cornsilk;border-radius:15px;padding:010px;}#cointainer{display:flex;align-items:center;margin-top:20px;height:500px;width:400px;background-color:rgb(37,37,37);position:relative;}.todo{justify-content:中心;对齐项目:中心;位置:绝对;顶部:84%;}.again{文本对齐:中心;字体大小:18px;宽度:90px;高度:40px;背景颜色:burlywood;}.againtime{位置化:绝对的;顶部:91%;左边距:100px;文本对齐:居中;字体大小:18px;宽度:170px;高度:40px;背景颜色:dimgray;边界半径:5px;padding-left:19px;}.parm{宽度:80px;高度:80px;边界半径:80;证明内容:居中;对齐项目:居中;位置:绝对;}.cricle_text_none{显示:无;}.goFail{背景颜色:米色;高度:80px;宽度:200px;边界半径:20px;位置:绝对;顶部:50%;左:50%;转换:翻译(-50%,-50%);证明内容:居中;align-items:center;}.goFail-text{font-size:16px;}3、js部分exportdefault{data:{circleList:[],containner:'',timmer1:'',timmer2:'',time:'',pass:6,asw:[],cricleClassName:'',recodArr:[],isSuccess:null,},onInit(){this.containner=this.$element('cointainer')//获取游戏画棋盘容器元素this.timmer2=setInterval(this.sumTime,10);console.log(this.time)this.creatGame(this.pass);},sumTime(){//时间保留两位小数this.time=(Number(this.time)+0.01).toFixed(2);//当时间超过5秒时,让小球上的数字消失。if(Number(this.time)>5)this.cricleClassName='cricle_text_none'},//点击球时触发的事件处理函数recordNmuber(num){//当时间小于5秒时,点击ball不计入if(this.time<5)returninthearray//当球大于五秒时点击球将对应的数推入新的数组。this.recodArr.push(num)console.log(JSON.stringify(this.recodArr))//去重操作letnewArr=this.noRepeat(this.recodArr)console.log(newArr)//对数组进行排序if(newArr.length===this.pass){letstr=''for(varindex=0;index3600){this.circleList.push(circle);}}else{休息;}}},//创建8个ccircle//随机颜色选择器selectColor(){letr=100+Math.round(Math.random()*155);让g=100+Math.round(Math.random()*155);让b=100+Math.round(Math.random()*155);返回`rgb(${r},${g},${b})`;},//构造关卡,不同的关卡对应不同数量的小球,默认为六个小球creatGame(num){这个。圈子列表=[];这。创建圆(数量);for(leti=0;i