一款简单的JS鸿蒙小游戏-垃圾分类之一

时间：2023-03-13 09:22:29 科技观察

更多内容请访问：华为官方共建的鸿蒙技术社区https://harmonyos.51cto。com前言当今国际社会普遍倡导低碳环保理念，垃圾分类绿色环保意识逐渐深入人心。今天，我将教大家如何编写一个简单的垃圾分类游戏。它既有趣又有教育意义。您可以在空闲时间玩，在娱乐和放松的同时学习垃圾分类常识。为什么不这样做呢？项目介绍垃圾可分为四类：可回收垃圾、厨余垃圾、危险垃圾、其他垃圾。垃圾图片随机出现，玩家点击对应的分类图标进行分类，得分最高者获胜。项目结构游戏主页主页是背景图片、游戏标题和2个游戏模式按钮。背景图片设置方法.container{display:flex;弹性方向：列；证明内容：居中；对齐项目：居中；左：0px；顶部：0px；宽度：100%；高度：100%；背景图像：url（“/common/bg.png”）；background-size:cover;}简单页面路由到battlemode(){router.replace({uri:"pages/battlemode/battlemode"})},torushmode(){router.replace({uri:"pages/rushmode/rushmode"})}竞技模式页面设计游戏界面分为左右两部分。两名玩家分别操作左右两侧，对随机垃圾进行分类。拿一颗心，答错3次就出局。双方都出局后，得分最高的玩家获胜。状态栏：显示血量（容错次数）和当前分数。得分：{{player_1.score}}

操作区：上、下、左、右为可回收垃圾、有害垃圾、餐厨垃圾等垃圾图标，中间为随机垃圾

游戏逻辑玩家属性：初始化玩家的容错次数、血量图片、默认初始垃圾、分数和退出标识等。player_1:{HP:3,//剩余容错次数HP1:"common/heart.png",HP2:"common/heart.png",HP3:"common/heart.png",garbage:{name:"厕所roll",//垃圾名称type:3,//垃圾类型src:"common/garbages/LJ000.png",//图片资源路径},score:0,//scoredisabled:false,//退出标识}，游戏初始化：随机给两个玩家的垃圾赋值。onInit(){this.player_1.garbage=GarbageList[Math.floor(Math.random()*GarbageList.length)];this.player_2.garbage=GarbageList[Math.floor(Math.random()*GarbageList.length)];},分数判断：打印垃圾的正确分类，分类符合正确答案玩家加10分，否则扣一次容错次数，然后随机分配垃圾。typeclick(role,choosetype){console.info(role.garbage.name+"——"+role.garbage.type);if(choosetype==role.garbage.type){role.score+=10;}else{角色.HP-=1;这个。HPChange（角色）；}role.garbage=GarbageList[Math.floor(Math.random()*GarbageList.length)];},HPChange(role){if(3==role.HP){role.HP1=role.HP2=role.HP3="common/heart.png";}if(2==role.HP){role.HP3="common/broken.png";}if(1==role.HP){role.HP2="common/broken.png";}if(0==role.HP){role.HP1="common/broken.png";role.disabled=true;}},结束弹窗：初始化游戏结束标识为false，游戏结果为空。当双方均出局时，将根据比分分配结果文本，并出现游戏结束弹窗。if((this.player_1.HP==0)&&(this.player_2.HP==0)){if(this.player_1.score>this.player_2.score){this.ScoreResult="玩家1获胜";}elseif(this.player_1.score{this.GameOver=true;},1000);}

游戏结果{{ScoreResult}}重启退出