基于JS实现的鸿蒙游戏——二十四点纸牌

目录前言概述正式开始一、创建项目二、编码1.项目结构2.实现思路3.主要代码块三、页面及功能展示1.运算正确2.运算错误3.换一批及重置本人项目仓库链接前言相信大家都有玩过纸牌游戏本项目是基于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 classcontainer div classgamezone div classpoker div for(index, item) in current classcard {{ item.css }} show{{ item.show }} disabled{{ item.disabled }} image src{{ item.shape }} onclickoptnum(index)/image text classnumber{{ item.text }}/text /div /div div classsign image for(index, item) in operator src{{ item.src }} classoperator {{ item.css }} disabled{{ operdis }} onclicksetsign(index)/image /div /div div classside text classscore得分\n{{ score }}/text button classbtn onclickreplace换一批/button button classbtn onclickrevert重置/button /div /divpointsgame.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(many0; many26; 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 i0; i4; 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 i0; i4; 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/nononoo_O/PointsGamehttps://gitee.com/nononoo_O/PointsGame有兴趣的小伙伴可以关注加收藏哦~