一身转战三千里,一剑曾当百万师。这篇文章主要讲述简单的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
文章图片
:::
推荐阅读
- 北亚数据恢复HP P2000服务器RAID5硬盘磁头损坏和逻辑故障的数据恢复
- 你眼中和我眼中的单元测试,看看有何区别()
- 微服务架构 | 11.1 整合 Seata AT 模式实现分布式事务 #yyds干货盘点#
- Tenable创建专项扫描任务
- #yyds干货盘点# Docker初识到使用
- ceph存储领域的CAS是什么(什么是CAS|Open CAS)
- 数据库架构选型与落地,看这篇就够了
- 如何在本地搭建一个EasyPlayer的H5 demo 播放H265视频流?
- CentOS8下使用Apache Httpd创建源服务