簡單的JS鴻蒙小游戲—垃圾分類之二
原創(chuàng)??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
前言
垃圾分類游戲雖然是個雙人游戲，但在比拼模式中缺少明顯的互動，同時在玩家答錯后沒有提示正確答案，不方便糾錯。因此我在后來設(shè)計了垃圾分類小游戲的搶答模式，在這個模式中填補之前的一些不足。
搶答模式
頁面構(gòu)建
玩家操作區(qū)：頂部顯示答題記錄，下方則是4個不同的可點擊的垃圾分類圖標。
<div class="player">
<text class="state-title">記錄：答對{{player1.theCorrect}}題，答錯{{player1.theWrong}}題</text>
<div>
<image class="garbage-type" src="common/Recyclable.jpg"
disabled="{{btndis}}" onclick="typeclick({{player1}}, 1)"></image>
<image class="garbage-type" src="common/FoodWaste.jpg"
disabled="{{btndis}}" onclick="typeclick({{player1}}, 2)"></image>
</div>
<div>
<image class="garbage-type" src="common/ResidualWaste.jpg"
disabled="{{btndis}}" onclick="typeclick({{player1}}, 3)"></image>
<image class="garbage-type" src="common/HazardousWaste.jpg"
disabled="{{btndis}}" onclick="typeclick({{player1}}, 4)"></image>
</div>
</div>
出題面板：從上往下分別是垃圾圖片、垃圾名稱及其正確分類(默認隱藏，答題后顯示)。
<div class="question">
<div>
<image class="garbage" src="{{garbage.src}}"></image>
</div>
<div class="garbage-name">
<text>{{garbage.name}}</text>
</div>
<div class="tip">
<text show="{{tipshow}}">{{tiptitle}}</text>
</div>
</div>
結(jié)束彈窗：根據(jù)(答對題數(shù)-答錯題數(shù))計算最終得分，根據(jù)雙方比分高低賦值結(jié)果文本并顯示。
比分結(jié)果 —— {{player1.theCorrect - player1.theWrong}} : {{player2.theCorrect - player2.theWrong}}
<div class="gameover" show="{{popup}}">
<text style="font-size: 30px;">比分結(jié)果 —— {{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>
游戲邏輯
游戲數(shù)據(jù)聲明：初始化當前回合數(shù)、各類標識符、玩家答題記錄和隨機垃圾數(shù)據(jù)等。
data: {
theround: 0, //當前回合數(shù)
tipshow: false, //提示標識符
btndis: false, //按鈕不可點擊狀態(tài)
popup: false, //彈窗標識符
tiptitle: "", //提示文本
result: "", //游戲結(jié)果文本
player1: {
theCorrect: 0, //答對題數(shù)
theWrong: 0, //答錯題數(shù)
},
player2: {
theCorrect: 0,
theWrong: 0,
},
garbage: {
name: "隨機垃圾",
type: 3,
src: "common/garbages/LJ000.png",
},
},
提示文本賦值：獲取當前垃圾的類型并給文本對應(yīng)賦值。
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;
}
關(guān)閉交互，顯示提示：將分類圖標的disabled屬性由false變?yōu)閠rue，使之不可點擊，暫停玩家的操作。將提示文本的show屬性由false變?yōu)閠rue，使之顯示。
this.tipshow = true; //顯示提示
this.btndis = true; //關(guān)閉交互
得分判斷：將玩家選擇分類與垃圾正確分類做對比，該玩家的答對或答錯記錄加一。
//加分 or 扣分
if(choosetype == this.garbage.type) {
console.info("答對了！");
role.theCorrect += 1;
}
else {
console.info("回答錯誤……");
role.theWrong += 1;
}
隱藏提示，重啟交互：設(shè)置定時器將提示文本的show屬性由true變?yōu)閒alse，使之隱藏。再將垃圾數(shù)據(jù)隨機更換，然后將分類圖標恢復(fù)為可點擊狀態(tài)。
var ticktock = setTimeout(()=> {
this.tipshow = false; //關(guān)閉提示
}, 3000);
var thechange = setTimeout(()=> {
//隨機更換垃圾
this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
this.btndis =false; //重啟交互
}, 4000);
設(shè)置題量，比分結(jié)果賦值：設(shè)置題量判斷，回合數(shù)達到題量值時結(jié)束游戲，之后計算雙方得分，根據(jù)比分結(jié)果給文本賦值，顯示彈窗。
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;
}
重新開始：將游戲數(shù)據(jù)全部恢復(fù)為初始的默認值。
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;
},
退出游戲：頁面路由到應(yīng)用首頁。
GameExit() {
router.replace({
uri: "pages/index/index"
})
},
垃圾清單
垃圾清單格式
export let GarbageList = [
{
name: "衛(wèi)生卷紙", //垃圾名稱
type: 3, //垃圾類型
src: "common/garbages/LJ000.png" //圖片資源路徑
},
//省略中間的若干數(shù)據(jù)……
{
name: "遙控器",
type: 1,
src: "common/garbages/LJ116.png"
},
]
export default GarbageList;
導(dǎo)入垃圾清單
import GarbageList from "../../common/GarbageList.js";
隨機抽取垃圾數(shù)據(jù)做題
this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
其它一些細節(jié)
- 橫屏設(shè)置：在config.json文件中設(shè)置 orientation 屬性為 landscape ;
- 修改應(yīng)用名：在resources->base->element->string.json文件中修改entry_MainAbility的值;
- 更換應(yīng)用圖標：修改config.json文件中icon的資源路徑指向;
- 全屏顯示：在config.json文件中添加如下語句。
結(jié)語
至此垃圾分類小游戲制作完成，在開發(fā)過程中因為缺少合適的圖片素材，大多是從網(wǎng)上不同地方找的圖片做素材，或是自己用電腦自帶的“畫圖”做些簡單的圖，所以在游戲過程中會出現(xiàn)圖片畫風不一致的情況。受制于圖片素材的儲備不足，我其它項目也有圖片風格不統(tǒng)一的情況，沒有合適的圖，對于頁面美化的積極性就不高，頁面做得丑請多包涵。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
