
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
当今国际社会普遍倡导低碳环保的理念,垃圾分类绿色环保的意识也逐渐深入人心。今天就教大家写一个简单的垃圾分类小游戏,寓教于乐,空闲时玩一玩,娱乐放松的同时学习垃圾分类的常识,何乐而不为呢?
垃圾可以分为四大类:可回收垃圾、厨余垃圾、有害垃圾、其他垃圾。垃圾图片随机出现,玩家点击对应的分类图标进行归类,得分高者获胜。
.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次后出局,双方都出局后最终得分高者获胜。
<div class="state">
<image class="HP" src="{{ player_1.HP1 }}"></image>
<image class="HP" src="{{ player_1.HP2 }}"></image>
<image class="HP" src="{{ player_1.HP3 }}"></image>
<text style="margin-left: 70px;">得分:{{ player_1.score }}</text>
</div>
<div style="flex-direction: column; align-items: center;">
<image class="GarbageType" src="common/Recyclable.jpg" onclick="typeclick({{player_1}}, 1)"></image>
<div>
<image class="GarbageType" src="common/FoodWaste.jpg" onclick="typeclick({{player_1}}, 2)"></image>
<image class="garbage" src="{{player_1.garbage.src}}"></image>
<image class="GarbageType" src="common/ResidualWaste.jpg" onclick="typeclick({{player_1}}, 3)"></image>
</div>
<image class="GarbageType" src="common/HazardousWaste.jpg" onclick="typeclick({{player_1}}, 4)"></image>
</div>
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)];
},
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;
}
},
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);
}
<div class="gameover" show="{{GameOver}}">
<text style="font-size: 30px;">比赛结果</text>
<text style="font-size: 24px;">{{ScoreResult}}</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>
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"
})
},
另一抢答模式的相关内容及项目的一些其它细节后续整理完毕后发布,敬请期待。