5
简单的JS鸿蒙小游戏—经典24点纸牌
source link: https://www.51cto.com/article/721551.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
简单的JS鸿蒙小游戏—经典24点纸牌
作者：Looker_song 2022-10-28 16:20:10
今天给大家带来的就是这个经典的纸牌游戏，大家学会以后在空闲时可以玩一玩，锻炼一下速算能力。
相信大家都玩过24点纸牌游戏，今天给大家带来的就是这个经典的纸牌游戏，大家学会以后在空闲时可以玩一玩，锻炼一下速算能力。
页面设计得比较简单，上半是数字区，放着四张纸牌；下半是运算符号区，分别是加、减、乘、除；右侧则是得分记录和两个操作按钮。
<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;- 随机抽牌：这里分别写了两种随机抽牌逻辑。
一是将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张牌的排序不变，随机生成4个不重复的数，以这四个数作为数组下标抽牌。
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);
}
}
},- 牌组替换与还原：因为抽牌是随机的，而并非所有的组合都是有解的，所以需要有操作按钮，可以让玩家主动替换或还原当前牌组。
// 换一组牌，并赋值给当前牌组
replace() {
console.log("—————————更换牌组—————————");
// this.disorder(); // 换牌方法一
this.getrandom(); // 换牌方法二
this.initcards();
console.log("当前牌组为" + JSON.stringify(this.current));
},
// 还原牌组
revert() {
console.log("—————————还原牌组—————————");
this.initcards();
console.log("还原当前牌组为" + JSON.stringify(this.current));
},- 选中样式：选中的数字或运算符需要有特别的样式提示，以提高游戏体验，所以需要给纸牌和运算符设置样式属性。
// 选择数字
optnum(num_index) {
// 运算符为空，处于选第一个数的环节
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";
}
// 运算符不为空，选择了第二个数
else {
this.operdis = true;
second = num_index;
this.calculate();
}
},
// 选择运算符
setsign(op_index) {
// 若点击的运算符为未选中状态，
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;
// 关闭第一个数可选中，取消其同时作为第二个数的资格
this.current[first].disabled = true;
}
// 若点击的运算符为选中状态，取消选中，重启选第一个数环节
else {
this.operator[op_index].css = "";
this.current[first].disabled = false;
this.operindex = null;
}
},- 运算合法判定：在进行运算前，需要对运算的合法性进行判定。对于零不能作为除数，某些数不能被整除等情况，需要加以限制。当出现这些情况，撤销这次操作，恢复牌组状态，并弹出提示玩家。
// 判别运算是否合法，再进行运算
calculate() {
// 选好第二个数，除法运算是否合法
if((3 == this.operindex) && (0 == this.current[second].num)) {
prompt.showToast({
message: "0不能作为除数，请重新选择",
duration: 1500,
});
// 非法运算，重置选数环节
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,
});
// 无法被整除，重置选数环节
this.current[first].disabled = false;
this.current[first].css = "";
this.operator[this.operindex].css = "";
this.operindex = null;
this.operdis = true;
first = second = 0;
}
// 正常触发运算
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("运算意外出错");
break;
}
// 运算结束，将结果赋值给一，文本显示数字，花型为某种，恢复一的可点击和未选中样式，隐藏二的显示，运算符为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();
}
},- 得分判定：根据场上最后一张牌的数值进行得分判定，等于24则加分替换新牌组，否则将牌组重置为原状。
// 得分判定，先判断是否只剩一张牌，若是则进行结果比较，答对加分换牌，答错还原
checkover() {
let temp = 4;
for(let i=0; i<4; i++) {
if(false == this.current[i].show) {
temp --;
}
}
if(1 == temp) {
// 结果判断是否等于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();
}
}
},
责任编辑：jianghua
来源：
51CTO开源基础软件社区
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK