簡單的JS鴻蒙小游戲——垃圾分類之一
原創(chuàng)??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
前言
當(dāng)今國際社會普遍倡導(dǎo)低碳環(huán)保的理念，垃圾分類綠色環(huán)保的意識也逐漸深入人心。今天就教大家寫一個(gè)簡單的垃圾分類小游戲，寓教于樂，空閑時(shí)玩一玩，娛樂放松的同時(shí)學(xué)習(xí)垃圾分類的常識，何樂而不為呢?
項(xiàng)目介紹
垃圾可以分為四大類：可回收垃圾、廚余垃圾、有害垃圾、其他垃圾。垃圾圖片隨機(jī)出現(xiàn)，玩家點(diǎn)擊對應(yīng)的分類圖標(biāo)進(jìn)行歸類，得分高者獲勝。
項(xiàng)目結(jié)構(gòu)
游戲首頁
首頁是背景圖片，游戲標(biāo)題和2個(gè)游戲模式按鈕。
背景圖片設(shè)置方式
.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"
})
}比拼模式
頁面設(shè)計(jì)
游戲界面分為左右兩邊，兩名玩家分別操作左右兩邊，對隨機(jī)出現(xiàn)的垃圾進(jìn)行分類，答對加分，答錯(cuò)扣一顆心，答錯(cuò)3次后出局，雙方都出局后最終得分高者獲勝。
狀態(tài)欄：顯示血量(容錯(cuò)次數(shù))和當(dāng)前得分。
<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>
操作區(qū)：上下左右分別是可回收垃圾、有害垃圾、廚余垃圾、其他垃圾的垃圾圖標(biāo)，中間是隨機(jī)出現(xiàn)的垃圾
<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>
游戲邏輯
玩家屬性：初始化玩家容錯(cuò)次數(shù)、血量圖片、默認(rèn)初始垃圾、得分及出局標(biāo)識符等。
player_1: {
HP: 3, //剩余容錯(cuò)次數(shù)
HP1: "common/heart.png",
HP2: "common/heart.png",
HP3: "common/heart.png",
garbage: {
name: "衛(wèi)生卷紙", //垃圾名稱
type: 3, //垃圾類型
src: "common/garbages/LJ000.png", //圖片資源路徑
},
score: 0, //得分
disabled: false, //出局標(biāo)識符
},游戲初始化：給兩名玩家的垃圾隨機(jī)賦值。
onInit() {
this.player_1.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
this.player_2.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
},得分判斷：打印垃圾的正確分類，玩家分類符合正確答案則加10分，否則扣除一次容錯(cuò)次數(shù)，再給垃圾隨機(jī)賦值。
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;
}
},結(jié)束彈窗：初始化游戲結(jié)束標(biāo)識符為false，游戲結(jié)果為空。當(dāng)雙方都出局后根據(jù)得分高低賦值結(jié)果文本，出現(xiàn)游戲結(jié)束彈窗。
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;">比賽結(jié)果</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>重新開始：將玩家數(shù)據(jù)全部初始化為默認(rèn)值。
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和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
