??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
前言
相信大家都玩過24點(diǎn)紙牌游戲，今天給大家?guī)淼木褪沁@個經(jīng)典的紙牌游戲，大家學(xué)會以后在空閑時可以玩一玩，鍛煉一下速算能力。
項目結(jié)構(gòu)
頁面構(gòu)建
頁面設(shè)計得比較簡單，上半是數(shù)字區(qū)，放著四張紙牌；下半是運(yùn)算符號區(qū)，分別是加、減、乘、除；右側(cè)則是得分記錄和兩個操作按鈕。
<div class="container">
<div class="gamezone">
<div class="poker">
<div for="(index, item) in current" class="card {{ item.css }}" show="{{ item.show }}" disabled="{{ item.disabled }}">
<image src="{{ item.shape }}" onclick="optnum(index)"></image>
<text class="number">{{ item.text }}</text>
</div>
</div>
<div class="sign">
<image for="(index, item) in operator" src="{{ item.src }}" class="operator {{ item.css }}"
disabled="{{ operdis }}" onclick="setsign(index)"></image>
</div>
</div>
<div class="side">
<text class="score">得分\n{{ score }}</text>
<button class="btn" onclick="replace">換一批</button>
<button class="btn" onclick="revert">重置</button>
</div>
</div>
對于4種花型各13張紙牌需要分別定制樣式，因此建立了Poker.js紙牌字典，格式如下：
export let Poker = [
{
num: 1,
text: 'A',
shape: "common/images/spade.png"
},
{
num: 2,
text: '2',
shape: "common/images/spade.png"
},
…………
{
num: 13,
text: 'K',
shape: "common/images/diamond.png"
},
]
export default Poker;
游戲邏輯
- 隨機(jī)抽牌：這里分別寫了兩種隨機(jī)抽牌邏輯。
一是將4×13共52張牌打亂順序后抽取前四張；
disorder() {
let many, ran, temp = 0;
for(many=0; many<26; many++) {
ran = Math.floor(Math.random()*52);
temp = this.pokers[many];
this.pokers[many] = this.pokers[ran];
this.pokers[ran] = temp;
}
this.origin = [0, 1, 2, 3];
},二是52張牌的排序不變，隨機(jī)生成4個不重復(fù)的數(shù)，以這四個數(shù)作為數(shù)組下標(biāo)抽牌。
getrandom() {
this.origin = [];
let compare = false;
let temp = 0;
while(4 > this.origin.length) {
compare = false;
temp = Math.floor(Math.random()*52);
for(let i=0; i<this.origin.length; i++) {
if(temp == this.origin[i]) {
// 抽到兩張相同的牌，不放入初始牌組
compare = true;
break;
}
}
if(false == compare) {
this.origin.push(temp);
}
}
},- 牌組替換與還原：因為抽牌是隨機(jī)的，而并非所有的組合都是有解的，所以需要有操作按鈕，可以讓玩家主動替換或還原當(dāng)前牌組。
// 換一組牌，并賦值給當(dāng)前牌組
replace() {
console.log("—————————更換牌組—————————");
// this.disorder(); // 換牌方法一
this.getrandom(); // 換牌方法二
this.initcards();
console.log("當(dāng)前牌組為" + JSON.stringify(this.current));
},
// 還原牌組
revert() {
console.log("—————————還原牌組—————————");
this.initcards();
console.log("還原當(dāng)前牌組為" + JSON.stringify(this.current));
},
- 選中樣式：選中的數(shù)字或運(yùn)算符需要有特別的樣式提示，以提高游戲體驗，所以需要給紙牌和運(yùn)算符設(shè)置樣式屬性。
// 選擇數(shù)字
optnum(num_index) {
// 運(yùn)算符為空，處于選第一個數(shù)的環(huán)節(jié)
if(null == this.operindex) {
this.operdis = false;
first = num_index;
for(let i=0; i<4; i++) {
this.current[i].css = "";
}
this.current[num_index].css = "select";
}
// 運(yùn)算符不為空，選擇了第二個數(shù)
else {
this.operdis = true;
second = num_index;
this.calculate();
}
},
// 選擇運(yùn)算符
setsign(op_index) {
// 若點(diǎn)擊的運(yùn)算符為未選中狀態(tài)，
if("" == this.operator[op_index].css) {
for(let i=0; i<4; i++) {
this.operator[i].css = "";
}
this.operator[op_index].css = "select";
this.operindex = op_index;
// 關(guān)閉第一個數(shù)可選中，取消其同時作為第二個數(shù)的資格
this.current[first].disabled = true;
}
// 若點(diǎn)擊的運(yùn)算符為選中狀態(tài)，取消選中，重啟選第一個數(shù)環(huán)節(jié)
else {
this.operator[op_index].css = "";
this.current[first].disabled = false;
this.operindex = null;
}
},
- 運(yùn)算合法判定：在進(jìn)行運(yùn)算前，需要對運(yùn)算的合法性進(jìn)行判定。對于零不能作為除數(shù)，某些數(shù)不能被整除等情況，需要加以限制。當(dāng)出現(xiàn)這些情況，撤銷這次操作，恢復(fù)牌組狀態(tài)，并彈出提示玩家。
// 判別運(yùn)算是否合法，再進(jìn)行運(yùn)算
calculate() {
// 選好第二個數(shù)，除法運(yùn)算是否合法
if((3 == this.operindex) && (0 == this.current[second].num)) {
prompt.showToast({
message: "0不能作為除數(shù)，請重新選擇",
duration: 1500,
});
// 非法運(yùn)算，重置選數(shù)環(huán)節(jié)
this.current[first].disabled = false;
this.current[first].css = "";
this.operator[this.operindex].css = "";
this.operindex = null;
this.operdis = true;
first = second = 0;
}
else if((3 == this.operindex) && (0 != (this.current[first].num % this.current[second].num))) {
prompt.showToast({
message: "無法被整除，請重新選擇",
duration: 1500,
});
// 無法被整除，重置選數(shù)環(huán)節(jié)
this.current[first].disabled = false;
this.current[first].css = "";
this.operator[this.operindex].css = "";
this.operindex = null;
this.operdis = true;
first = second = 0;
}
// 正常觸發(fā)運(yùn)算
else {
switch (this.operindex) {
case 0:
this.current[first].num += this.current[second].num;
break;
case 1:
this.current[first].num -= this.current[second].num;
break;
case 2:
this.current[first].num *= this.current[second].num;
break;
case 3:
this.current[first].num /= this.current[second].num;
break;
default:
console.log("運(yùn)算意外出錯");
break;
}
// 運(yùn)算結(jié)束，將結(jié)果賦值給一，文本顯示數(shù)字，花型為某種，恢復(fù)一的可點(diǎn)擊和未選中樣式，隱藏二的顯示，運(yùn)算符為null
this.current[first].text = this.current[first].num;
this.current[first].shape = "";
this.current[first].disabled = false;
this.current[first].css = "";
this.current[second].show = false;
this.operator[this.operindex].css = "";
this.operindex = null;
this.checkover();
}
},
- 得分判定：根據(jù)場上最后一張牌的數(shù)值進(jìn)行得分判定，等于24則加分替換新牌組，否則將牌組重置為原狀。
// 得分判定，先判斷是否只剩一張牌，若是則進(jìn)行結(jié)果比較，答對加分換牌，答錯還原
checkover() {
let temp = 4;
for(let i=0; i<4; i++) {
if(false == this.current[i].show) {
temp --;
}
}
if(1 == temp) {
// 結(jié)果判斷是否等于24
if(24 == this.current[first].num) {
prompt.showToast({
message: "答對啦，加分，換牌組",
duration: 1500,
});
this.score += 10;
this.replace();
}
else {
prompt.showToast({
message: "答錯啦……還原牌組",
duration: 1500,
});
this.revert();
}
}
},
最終效果
??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??。
