前言

概述

正式开始

一、创建项目

二、编码

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 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) {// 结果判断是否等于24if(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有兴趣的小伙伴可以关注加收藏哦~

『牛角书』基于JS实现的鸿蒙游戏——二十四点纸牌相关推荐

『牛角书』HarmonyOS鸿蒙实战开发一个简单聊天助手APP
前言我是通过b站上面老师的讲解,跟着老师编写了一个简单聊天助手app,简答实用,对于刚开始接触鸿蒙的我们来说很有帮助. 创建项目所用软件为DevEco Studio,点击Create Harmon ...
『牛角书』鸿蒙开发小小播放器
鸿蒙开发小应用-音乐播放器话不多说,展示. 第一次进去会申请访问权限,点击"始终允许" 点击"始终允许"后退出一下,再次点击进入该应用会看到一首音乐Dream ...
『牛角书』开发英汉词典03——调用翻译API，并实现APP功能的实现
系列文章目录文章目录系列文章目录前言一.选用翻译API接口二.编写调用API的代码 1.进行权限申请 2.编写调用翻译API的代码 3.异步调用 4.解析API调用结果 5.测试运行APP ...
python3语音识别模块_『开源项目』基于STM32的智能垃圾桶之语音识别
大家好,我是『芯知识学堂』的SingleYork,前面给大家简单介绍了『开源项目』基于STM32的智能垃圾桶之成员简介,相信有很多小伙伴都已经忍不住跃跃欲试了,别着急,从这一篇开始,笔者将会带领大家一 ...
『开源项目』基于STM32的智能垃圾桶之语音识别
大家好,我是『芯知识学堂』的SingleYork,前面给大家简单介绍了『免费开源』基于STM32的之成员简介,相信有很多小伙伴都已经忍不住跃跃欲试了,别着急,从这一篇开始,笔者将会带领大家一步一步来完 ...
stm32语音识别文字显示_『开源项目』基于STM32的智能垃圾桶之语音识别
大家好,我是『芯知识学堂』的SingleYork,前面给大家简单介绍了『开源项目』基于STM32的智能垃圾桶之成员简介,相信有很多小伙伴都已经忍不住跃跃欲试了,别着急,从这一篇开始,笔者将会带领大家一 ...
智能垃圾桶c语言程序,『免费开源』基于STM32的智能垃圾桶之语音播报
大家好,我是『芯知识学堂』的SingleYork,前面给大家简单介绍了<基于STM32的智能垃圾桶之成员简介>和<基于STM32的智能垃圾桶之语音识别>,今天笔者将要给大家介绍 ...
Facebook 内部员工手册『小红书』
公众号关注「奇妙的 Linux 世界」设为「星标」,每天带你玩转 Linux ! Facebook 认为企业在发展过程中,可能会面临各种问题,但是其中最重要的,可能是向陆陆续续加入公司的员工说明公 ...
『数据可视化』基于Python的数据可视化工具
刘宇宙,现在一家创业型公司做技术总负责,做爬虫和数据处理相关工作,曾从事过卡系统研发.金融云计算服务系统研发,物联网方向大数据研发,著书一本,<Python3.5从零开始学> 如何做Pyt ...

『牛角书』基于JS实现的鸿蒙游戏——二十四点纸牌

前言

概述

正式开始

一、创建项目

二、编码

1.项目结构

2.实现思路

3.主要代码块

三、页面及功能展示

1.运算正确

2.运算错误

3.换一批及重置

本人项目仓库链接

『牛角书』基于JS实现的鸿蒙游戏——二十四点纸牌相关推荐

最新文章

热门文章