简单的JS鸿蒙小游戏——垃圾分类(下)

一身转战三千里,一剑曾当百万师。这篇文章主要讲述简单的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>

  • 结束弹窗:根据(答对题数-答错题数)计算最终得分,根据双方比分高低赋值结果文本并显示。
简单的JS鸿蒙小游戏——垃圾分类(下)

文章图片

< 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; //关闭交互

  • 得分判断:将玩家选择分类与垃圾正确分类做对比,该玩家的答对或答错记录加一。
简单的JS鸿蒙小游戏——垃圾分类(下)

文章图片

//加分 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文件中添加如下语句。
简单的JS鸿蒙小游戏——垃圾分类(下)

文章图片

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

文章图片

:::

    推荐阅读