一个简单的JS鸿蒙小游戏——垃圾分类篇

时间：2023-03-13 01:21:05 科技观察

更多内容请访问：与华为共同建立的鸿蒙技术社区https://harmonyos.51cto.com前言虽然垃圾分类游戏是双人游戏，在比赛模式上缺乏明显的互动。同时，在玩家答错后不提示正确答案，不方便纠错。所以我后来设计了垃圾分类小游戏的答题模式，填补了之前这个模式的一些不足。播放器操作区建立在答题模式页面上：答题记录显示在上方，下方有4个不同的可点击垃圾分类图标。记录：{{player1.theCorrect}}题正确，{{player1.theWrong}}题错

问题面板：从上到下都是垃圾图片片剂、垃圾名称及其正确分类（默认隐藏，回答后显示）

结束弹窗：根据（答对数-答错数）计算最终得分，分配结果文本并显示它根据双方的分数。得分结果——{{player1.theCorrect-player1.theWrong}}:{{player2.theCorrect-player2.theWrong}}

得分结果——{{player1.theCorrect-player1.theWrong}}:{{player2.theCorrect-player2.theWrong}}{{result}}重启Exit游戏逻辑游戏数据声明：初始化当前回合数、各种标识符、Player回答记录和随机垃圾数据等。data:{theround:0,//当前轮数tipshow:false,//提示标识btndis:false,//按钮不可点击状态popup:false,//弹出窗口标识tiptitle:"",//提示文本结果:"",//游戏结果文本player1:{theCorrect:0,//正确答案数theWrong:0,//错误答案数},player2:{theCorrect:0,theWrong:0,},garbage:{name:"RandomGarbage",type:3,src:"common/garbages/LJ000.png",},},提示文本赋值：获取当前垃圾的类型，并为文本赋值相应的值。switch(this.garbage.type){case1:this.tiptitle="可回收垃圾";休息;case2:this.tiptitle="厨余垃圾";休息;case3:this.tiptitle="其他垃圾";休息;case4:this.tiptitle="有害垃圾";休息;default:console.info("垃圾类型错误！");休息;}关闭交互并显示提示：将分类图标的disabled属性由false改为true，使其不可点击，暂停玩家动作。将提示文本的show属性从false更改为true以显示它。this.tipshow=true;//显示提示this.btndis=true;//关闭互动评分判断：将玩家选择的分类与正确的垃圾分类进行比较，为玩家正确或错误的答题记录加一。//加分或扣分if(choosetype==this.garbage.type){console.info("正确答案！");role.theCorrect+=1;}else{console.info("错误答案...");role.theWrong+=1;}隐藏提示并重启交互：设置定时器将提示文字的show属性由true改为false使其隐藏。然后随机替换垃圾数据，然后把分类图标恢复到可以点击的状态。varticktock=setTimeout(()=>{this.tipshow=false;//关闭提示},3000);varthechange=setTimeout(()=>{//随机改变垃圾this.garbage=GarbageList[Math.floor(Math.random()*GarbageList.length)];this.btndis=false;//重启交互},4000);设置题量，分数结果赋值：设置题量进行判断，当回合数达到题量值时游戏结束，然后计算双方的分数，对正文进行赋值根据评分结果，显示弹窗。这个.theround+=1;如果（20==this.theround）{varscore1=this.player1.theCorrect-this.player1.theWrong;varscore2=this.player2.theCorrect-this.player2.theWrong;console.info("分数———"+score1+":"+score2);if(score1>score2){this.result="玩家1获胜";}elseif(score1base->element->string.json文件中entry_MainAbility的值；更换应用图标：修改config.json文件中指向的图标资源路径；全屏显示：在config.json文件中添加如下语句。结论至此，垃圾分类小游戏就完成了。由于在开发过程中缺少合适的图片素材，大部分都是从网上在不同地方找的图片作为素材，或者使用电脑自带的“画图”制作一些简单的图片，所以会有游戏过程中画面风格不一致。受限于图片素材的缺乏，我的其他项目也出现了图片风格不一致的情况。没有合适的图片，我对页面美化不是很积极。如果页面丑陋，请多多包涵。更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com

上一篇：优秀程序员的几个好习惯

下一篇：Python项目代码写好后，如何打包发布？

一个简单的JS鸿蒙小游戏——垃圾分类篇相关文章