目录
前言
相信大家都有玩过纸牌游戏,本项目是基于JS实现的鸿蒙小游戏二十四点纸牌,这个游戏可以说是非常之经典。个人认为适合新手接触鸿蒙开发,闲暇之时锻炼自己的速算能力。欢迎大家点赞收藏加关注,谢谢~
概述
本项目将从零开始完成鸿蒙小游戏在移动设备如手机上的编译,此次以手机为例,在项目中我们所使用到的软件为DevEco Studio,下载地址为DevEco Studio下载,安装教程可以参考鸿蒙开发者联盟的DevEco Studio安装教程,在项目中我们要实现的内容为经典二十四纸牌小游戏的开发。
正式开始
一、创建项目
DevEco Studio下载安装成功后,打开DevEco Studio,点击左侧的Create Project,选择一个Empty Ability应用,点击Next,将Project name即项目名改为PointsGame,包名依照个人爱好修改,然后选择保存路径以及SDK的版本,这里我选择的SDK版本为8,语言选择JS,最后点击Finish。
二、编码
1.项目结构
2.实现思路
hml部分用于展示前端页面,css部分用于页面样式的调整,pointsgame.js用于网页与用户的交互,poker.js用于定制4种花型各13张纸牌的样式,这里主要介绍下游戏的主要逻辑。
①随机抽牌:这里分别写了两种随机抽牌逻辑。一是将4×13共52张牌打乱顺序后抽取前四张;二是52张牌的排序不变,随机生成4个不重复的数,以这四个数作为数组下标抽牌。
②牌组替换与还原:因为抽牌是随机的,而并非所有的组合都是有解的,所以需要有操作按钮,可以让玩家主动替换或还原当前牌组。
③选中样式:选中的数字或运算符需要有特别的样式提示,以提高游戏体验,所以需要给纸牌和运算符设置样式属性。
④运算合法判定:在进行运算前,需要对运算的合法性进行判定。对于零不能作为除数,某些数不能被整除等情况,需要加以限制。当出现这些情况,撤销这次操作,恢复牌组状态,并弹出提示玩家。
⑤得分判定:根据场上最后一张牌的数值进行得分判定,等于24则加分替换新牌组,否则将牌组重置为原状。
3.主要代码块
pointsgame.hml部分
<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>
pointsgame.css部分
.container {
flex-direction: row;
width: 100%;
height: 100%;
}
.gamezone {
flex-direction: column;
width: 85%;
height: 100%;
background-color: #9999CC;
}
.poker {
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 70%;
}
...........
.score {
width: 100%;
height: 30%;
margin-bottom: 25%;
font-size: 28px;
text-align: center;
}
.btn {
width: 90px;
height: 50px;
margin: 10px 0;
font-size: 20px;
background-color: brown;
}
pointsgame.js部分
let first, second = 0; // 第一个数、第二个数下标
export default {
data: {
score: 0, // 得分
operdis: true, // 运算符不可点击
operindex: null, // 运算符下标
pokers: Poker, // 源牌组
origin: [], // 初始牌组
current: [ // 当前牌组
{
num: 1, // 计算值
text: '1', // 左上角文本
shape: "common/images/spade.png", // 花型
show: true, // 显示标识符
disabled: false, // 不可交互属性
css: "", // 样式
},
{
num: 11,
text: 'J',
shape: "common/images/heart.png",
show: true,
disabled: false,
css: "",
},
{
num: 12,
text: 'Q',
shape: "common/images/club.png",
show: true,
disabled: false,
css: "",
},
{
num: 13,
text: 'K',
shape: "common/images/diamond.png",
show: true,
disabled: false,
css: "",
}
],
operator: [ // 加、减、乘、除运算符图片及选中样式
{
src: "common/images/plus.png",
css: "",
},
{
src: "common/images/sub.png",
css: "",
},
{
src: "common/images/mult.png",
css: "",
},
{
src: "common/images/div.png",
css: "",
},
],
},
onInit() {
this.replace();
},
// 换牌方法一:将4*13共52张牌先乱序后,取前4张
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];
},
.........
// 牌组赋值
initcards() {
for(let i=0; i<4; i++) {
this.current[i].num = this.pokers[this.origin[i]].num;
this.current[i].text = this.pokers[this.origin[i]].text;
this.current[i].shape = this.pokers[this.origin[i]].shape;
this.current[i].show = true;
this.current[i].disabled = false;
this.current[i].css = "";
}
this.operdis = true;
if(null != this.operindex) {
this.operator[this.operindex].css = "";
this.operindex = null;
}
},
// 得分判定,先判断是否只剩一张牌,若是则进行结果比较,答对加分换牌,答错还原
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();
}
}
},
}
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;
三、页面及功能展示
1.运算正确
2.运算错误
3.换一批及重置
本人项目仓库链接
https://gitee.com/zhou-xiaole/PointsGamehttps://gitee.com/zhou-xiaole/PointsGame有兴趣的小伙伴可以关注加收藏哦~