简单的JS鸿蒙小游戏

您所在的位置:网站首页 翻牌游戏规则介绍 简单的JS鸿蒙小游戏

简单的JS鸿蒙小游戏

2023-09-25 01:01| 来源: 网络整理| 查看: 265

春节不停更,此文正在参加「星光计划-春节更帖活动」

前言

旨在通过游戏的形式向大家展示自己学习鸿蒙应用开发的一些经验。因为没有鸿蒙手机可以调试,电脑配置也比较拉跨,项目测试的工作做得比较少,假如有点小bug希望大家不要见怪,能够以一种较为轻松的方式交流学习。

项目介绍

今天在这里教大家用JS语言进行鸿蒙应用开发,复刻一个经典的小游戏——记忆翻牌,游戏规则很简单,左右两边各有12张生肖图片,开局随机打乱,在一定时间内记住两边图片的位置,之后盖上牌开始计时,玩家将两边相同的生肖图片进行一一配对,在限定时间内完成全部图片的配对即可取得游戏胜利。

1、新建工程

在DevEco Studio中点击File -> New Project -> Empty Ability -> Next,Project type 选择Application,Language选择JS语言,最后点击Finish完成项目创建。

2、项目结构

项目结构.png

3、编写页面

大致流程图及弹窗切换逻辑如下:

大致流程.png

规则说明弹窗 难度设置弹窗 游戏暂停弹窗 游戏结束弹窗 notice true false false false gameset false true false false pause false false true false popup false false false true 3.1、游戏页面 {{ thetime }}

左右两边是三行四列的生肖图片,中间是计时器和分割线

游戏页面展示.png

3.2、游戏规则说明弹窗 {{ rule }} 知道了

开局直接显示在游戏页面上方,向玩家介绍游戏规则,点击“知道了”按钮进入难度设置环节。

游戏规则说明.png

3.3、难度设置弹窗 难度设置 记忆时间 - {{ metime }}s + (5~30) 限定时间 - {{ maxtime }}s + (20~120) 开始

我设置了记忆时间和限定时间的设置区间,玩家可以根据自己的水平自定义游戏正式开始前记忆牌堆的准备时间,以及完成图片配对的限定时间。完成难度设置后点击开始正式开始游戏。

设置游戏时间.png

3.4、游戏暂停弹窗 暂停中 继续游戏 重新开始 返回设置

游戏进行中的任何时刻都可以点击顶部的计时文本暂停游戏进行。点击“继续游戏”接着计时;点击“重新开始”在原先的难度设置上重新开始新一轮游戏;点击“返回设置”回到难度设置环节。 当玩家在记忆环节时点击暂停时,两边的牌堆会全部盖上,杜绝暂停倒计时记牌这种投机取巧的游戏方式。

记忆时暂停.png

游戏时暂停.png

3.5、游戏结束弹窗 {{ result }} 重新开始 返回设置

当玩家在限定时间内完成图片配对则会弹出游戏胜利弹窗,若游戏计时达到限定时间未完成图片配对则弹窗显示游戏超时失败。点击“重新开始”在原先的难度设置上重新开始新一轮游戏;点击“返回设置”回到难度设置环节。

游戏失败.png

游戏胜利.png

未完待续

本文简单讲了一下该游戏的大致流程及页面的设计构建,其中游戏逻辑部分尚在整理中,完成后会尽快发布,敬请期待。

想了解更多关于鸿蒙的内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#bkwz

::: hljs-center

21_9.jpg

:::



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3