简单的JS鸿蒙小游戏——垃圾分类（下）

一身转战三千里，一剑曾当百万师。这篇文章主要讲述简单的JS鸿蒙小游戏——垃圾分类（下）相关的知识，希望能为你提供帮助。
春节不停更，此文正在参加「星光计划-春节更帖活动」
前言垃圾分类游戏虽然是个双人游戏，但在比拼模式中缺少明显的互动，同时在玩家答错后没有提示正确答案，不方便纠错。因此我在后来设计了垃圾分类小游戏的抢答模式，在这个模式中填补之前的一些不足。
抢答模式页面构建
【简单的JS鸿蒙小游戏——垃圾分类（下）】

文章图片

玩家操作区：顶部显示答题记录，下方则是4个不同的可点击的垃圾分类图标。

< div class="player"> < text class="state-title"> 记录：答对player1.theCorrect题，答错player1.theWrong题< /text> < div> < image class="garbage-type" src="https://www.songbingjia.com/android/common/Recyclable.jpg" disabled="btndis" onclick="typeclick(player1, 1)"> < /image> < image class="garbage-type" src="https://www.songbingjia.com/android/common/FoodWaste.jpg" disabled="btndis" onclick="typeclick(player1, 2)"> < /image> < /div> < div> < image class="garbage-type" src="https://www.songbingjia.com/android/common/ResidualWaste.jpg" disabled="btndis" onclick="typeclick(player1, 3)"> < /image> < image class="garbage-type" src="https://www.songbingjia.com/android/common/HazardousWaste.jpg" disabled="btndis" onclick="typeclick(player1, 4)"> < /image> < /div> < /div>

出题面板：从上往下分别是垃圾图片、垃圾名称及其正确分类（默认隐藏，答题后显示）。

< div class="question"> < div> < image class="garbage" src="https://www.songbingjia.com/android/garbage.src"> < /image> < /div> < div class="garbage-name"> < text> garbage.name< /text> < /div> < div class="tip"> < text show="tipshow"> tiptitle< /text> < /div> < /div>

结束弹窗：根据（答对题数-答错题数）计算最终得分，根据双方比分高低赋值结果文本并显示。

文章图片

< div class="gameover" show="popup"> < text style="font-size: 30px; "> 比分结果 —— player1.theCorrect - player1.theWrong : player2.theCorrect - player2.theWrong< /text> < text style="font-size: 24px; "> result< /text> < div style="height: 40%; align-items: center; "> < button class="btn" onclick="GameRestart"> 重新开始< /button> < button class="btn" style="margin-left: 5%; " onclick="GameExit"> 退出< /button> < /div> < /div>

游戏逻辑

游戏数据声明：初始化当前回合数、各类标识符、玩家答题记录和随机垃圾数据等。

data: theround: 0,//当前回合数 tipshow: false,//提示标识符 btndis: false,//按钮不可点击状态 popup: false,//弹窗标识符 tiptitle: "",//提示文本 result: "",//游戏结果文本 player1: theCorrect: 0,//答对题数 theWrong: 0,//答错题数 , player2: theCorrect: 0, theWrong: 0, , garbage: name: "随机垃圾", type: 3, src: "common/garbages/LJ000.png", , ,

提示文本赋值：获取当前垃圾的类型并给文本对应赋值。

switch(this.garbage.type) case 1: this.tiptitle = "可回收垃圾"; break; case 2: this.tiptitle = "厨余垃圾"; break; case 3: this.tiptitle = "其他垃圾"; break; case 4: this.tiptitle = "有害垃圾"; break; default: console.info("垃圾类型出错！"); break;

关闭交互，显示提示：将分类图标的disabled属性由false变为true，使之不可点击，暂停玩家的操作。将提示文本的show属性由false变为true，使之显示。

this.tipshow = true; //显示提示 this.btndis = true; //关闭交互

得分判断：将玩家选择分类与垃圾正确分类做对比，该玩家的答对或答错记录加一。

文章图片

//加分 or 扣分 if(choosetype == this.garbage.type) console.info("答对了！"); role.theCorrect += 1; else console.info("回答错误……"); role.theWrong += 1;

隐藏提示，重启交互：设置定时器将提示文本的show属性由true变为false，使之隐藏。再将垃圾数据随机更换，然后将分类图标恢复为可点击状态。

var ticktock = setTimeout(()=> this.tipshow = false; //关闭提示 , 3000); var thechange = setTimeout(()=> //随机更换垃圾 this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)]; this.btndis =false; //重启交互 , 4000);

设置题量，比分结果赋值：设置题量判断，回合数达到题量值时结束游戏，之后计算双方得分，根据比分结果给文本赋值，显示弹窗。

this.theround += 1; if(20 == this.theround) var score1 = this.player1.theCorrect - this.player1.theWrong; var score2 = this.player2.theCorrect - this.player2.theWrong; console.info("比分 ———— " + score1 + " : " + score2); if(score1 > score2) this.result = "玩家一获胜"; else if(score1 < score2) this.result = "玩家二获胜"; else this.result = "双方打平"; this.popup = true; return;

重新开始：将游戏数据全部恢复为初始的默认值。

GameRestart() this.player1.theCorrect = 0; this.player1.theWrong = 0; this.player2.theCorrect = 0; this.player2.theWrong = 0; this.theround = 0; this.popup = false; this.result = ""; this.tipshow = false; this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)]; this.btndis = false; ,

退出游戏：页面路由到应用首页。

GameExit() router.replace( uri: "pages/index/index" ) ,

垃圾清单

垃圾清单格式

export let GarbageList =[name: "卫生卷纸",//垃圾名称 type: 3,//垃圾类型 src: "common/garbages/LJ000.png"//图片资源路径 ,//省略中间的若干数据……name: "遥控器", type: 1, src: "common/garbages/LJ116.png" , ]export default GarbageList;

导入垃圾清单

import GarbageList from "../../common/GarbageList.js";

随机抽取垃圾数据做题

this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];

其它一些细节

横屏设置：在config.json文件中设置 orientation 属性为 landscape ；
修改应用名：在resources-> base-> element-> string.json文件中修改entry_MainAbility的值；
更换应用图标：修改config.json文件中icon的资源路径指向；
全屏显示：在config.json文件中添加如下语句。

文章图片

结语至此垃圾分类小游戏制作完成，在开发过程中因为缺少合适的图片素材，大多是从网上不同地方找的图片做素材，或是自己用电脑自带的“画图”做些简单的图，所以在游戏过程中会出现图片画风不一致的情况。受制于图片素材的储备不足，我其它项目也有图片风格不统一的情况，没有合适的图，对于页面美化的积极性就不高，页面做得丑请多包涵。各位如果有好的图片素材来源，希望能在评论或是私信里跟我分享一下。最后祝大家在新的一年学有所成。
附件链接：https://harmonyos.51cto.com/resource/1694
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center