文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 07:37

关注

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://harmonyos.51cto.com​

前言

当今国际社会普遍倡导低碳环保的理念,垃圾分类绿色环保的意识也逐渐深入人心。今天就教大家写一个简单的垃圾分类小游戏,寓教于乐,空闲时玩一玩,娱乐放松的同时学习垃圾分类的常识,何乐而不为呢?

项目介绍

垃圾可以分为四大类:可回收垃圾、厨余垃圾、有害垃圾、其他垃圾。垃圾图片随机出现,玩家点击对应的分类图标进行归类,得分高者获胜。

项目结构

游戏首页

首页是背景图片,游戏和2个游戏模式按钮。

背景图片设置方式

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: url("/common/bg.png");
background-size: cover;
}

简单的页面路由

   tobattlemode() {
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: "卫生卷纸", //垃圾名称
type: 3, //垃圾类型
src: "common/garbages/LJ000.png", //图片资源路径
},
score: 0, //得分
disabled: 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 {
role.HP -= 1;
this.HPChange(role);
}
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获胜";
}
else if(this.player_1.score < this.player_2.score) {
this.ScoreResult = "玩家2获胜";
}
else {
this.ScoreResult = "平局";
}
var timeoutID = setTimeout(()=> {
this.GameOver = true;
}, 1000);
}


    

比赛结果
{{ScoreResult}}




重新开始:将玩家数据全部初始化为默认值。

   GameRestart() {
this.player_1.HP = 3;
this.HPChange(this.player_1);
this.player_2.HP = 3;
this.HPChange(this.player_2);
this.player_1.score = 0;
this.player_2.score = 0;
this.GameOver = false;
this.player_1.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
this.player_2.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
this.player_1.disabled = false;
this.player_2.disabled = false;
},

退出游戏:页面路由到首页。

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

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://harmonyos.51cto.com​

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯