简单的JS鸿蒙小游戏——记忆翻牌之页面构建原创精华

Looker_song

发布于 2022-2-1 22:47

浏览

5收藏

前言

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

项目介绍

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

1、新建工程

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

2、项目结构

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

3、编写页面

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

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

	规则说明弹窗	难度设置弹窗	游戏暂停弹窗	游戏结束弹窗
notice	true	false	false	false
gameset	false	true	false	false
pause	false	false	true	false
popup	false	false	false	true

3.1、游戏页面

    <div class="container">
        <div class="side" disabled="{{L_dab}}">
            <div class="row">
                <image class="image" disabled="{{ cards[0].dab }}" src="common/images/{{ cards[0].src }}.png" onclick="turnover(0)"></image>
                <image class="image" disabled="{{ cards[1].dab }}" src="common/images/{{ cards[1].src }}.png" onclick="turnover(1)"></image>
                <image class="image" disabled="{{ cards[2].dab }}" src="common/images/{{ cards[2].src }}.png" onclick="turnover(2)"></image>
                <image class="image" disabled="{{ cards[3].dab }}" src="common/images/{{ cards[3].src }}.png" onclick="turnover(3)"></image>
            </div>

            <div class="row">
                <image class="image" disabled="{{ cards[4].dab }}" src="common/images/{{ cards[4].src }}.png" onclick="turnover(4)"></image>
                <image class="image" disabled="{{ cards[5].dab }}" src="common/images/{{ cards[5].src }}.png" onclick="turnover(5)"></image>
                <image class="image" disabled="{{ cards[6].dab }}" src="common/images/{{ cards[6].src }}.png" onclick="turnover(6)"></image>
                <image class="image" disabled="{{ cards[7].dab }}" src="common/images/{{ cards[7].src }}.png" onclick="turnover(7)"></image>
            </div>

            <div class="row">
                <image class="image" disabled="{{ cards[8].dab }}" src="common/images/{{ cards[8].src }}.png" onclick="turnover(8)"></image>
                <image class="image" disabled="{{ cards[9].dab }}" src="common/images/{{ cards[9].src }}.png" onclick="turnover(9)"></image>
                <image class="image" disabled="{{ cards[10].dab }}" src="common/images/{{ cards[10].src }}.png" onclick="turnover(10)"></image>
                <image class="image" disabled="{{ cards[11].dab }}" src="common/images/{{ cards[11].src }}.png" onclick="turnover(11)"></image>
            </div>
        </div>
        <div class="middle">
            <text style="height: 20%;" disabled="{{ notice || gameset || pause || popup }}" onclick="gamestop">{{ thetime }}</text>
            <label style="height: 80%; border: 3px; border-bottom-color: black;"></label>
        </div>
        <div class="side" disabled="{{R_dab}}">
            <div class="row">
                <image class="image" disabled="{{ cards[12].dab }}" src="common/images/{{ cards[12].src }}.png" onclick="turnover(12)"></image>
                <image class="image" disabled="{{ cards[13].dab }}" src="common/images/{{ cards[13].src }}.png" onclick="turnover(13)"></image>
                <image class="image" disabled="{{ cards[14].dab }}" src="common/images/{{ cards[14].src }}.png" onclick="turnover(14)"></image>
                <image class="image" disabled="{{ cards[15].dab }}" src="common/images/{{ cards[15].src }}.png" onclick="turnover(15)"></image>
            </div>

            <div class="row">
                <image class="image" disabled="{{ cards[16].dab }}" src="common/images/{{ cards[16].src }}.png" onclick="turnover(16)"></image>
                <image class="image" disabled="{{ cards[17].dab }}" src="common/images/{{ cards[17].src }}.png" onclick="turnover(17)"></image>
                <image class="image" disabled="{{ cards[18].dab }}" src="common/images/{{ cards[18].src }}.png" onclick="turnover(18)"></image>
                <image class="image" disabled="{{ cards[19].dab }}" src="common/images/{{ cards[19].src }}.png" onclick="turnover(19)"></image>
            </div>

            <div class="row">
                <image class="image" disabled="{{ cards[20].dab }}" src="common/images/{{ cards[20].src }}.png" onclick="turnover(20)"></image>
                <image class="image" disabled="{{ cards[21].dab }}" src="common/images/{{ cards[21].src }}.png" onclick="turnover(21)"></image>
                <image class="image" disabled="{{ cards[22].dab }}" src="common/images/{{ cards[22].src }}.png" onclick="turnover(22)"></image>
                <image class="image" disabled="{{ cards[23].dab }}" src="common/images/{{ cards[23].src }}.png" onclick="turnover(23)"></image>
            </div>
        </div>
    </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

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

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

3.2、游戏规则说明弹窗

    <div class="all_popup" style="height: 80%; width: 70%;" show="{{ notice }}">
        <text style="height: 60%; font-size: 30px; margin: 10px;">{{ rule }}</text>
        <button class="btn" onclick="rule_notice">知道了</button>
    </div>
1.
2.
3.
4.

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

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

3.3、难度设置弹窗

    <div class="all_popup" style="height: 90%; width: 70%;" show="{{ gameset }}">
        <text class="title">难度设置</text>
        <div class="time_set">
            <text style="height: 80px; font-size: 26px;">记忆时间</text>
            <button class="time_btn" onclick="timeset('metime', -5)">-</button>
            <text class="seconds">{{ metime }}s</text>
            <button class="time_btn" onclick="timeset('metime', 5)">+</button>
            <text style="height: 80px; font-size: 26px;">（5~30）</text>
        </div>
        <div class="time_set">
            <text style="height: 80px; font-size: 26px;">限定时间</text>
            <button class="time_btn" onclick="timeset('maxtime', -5)">-</button>
            <text class="seconds">{{ maxtime }}s</text>
            <button class="time_btn" onclick="timeset('maxtime', 5)">+</button>
            <text style="height: 80px; ">（20~120）</text>
        </div>
        <button class="btn" onclick="gamestart">开始</button>
    </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

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

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

3.4、游戏暂停弹窗

    <div class="all_popup" style="height: 80%; width: 40%;" show="{{ pause }}">
        <text class="title">暂停中</text>
        <button class="btn" onclick="resume">继续游戏</button>
        <button class="btn" onclick="restart">重新开始</button>
        <button class="btn" onclick="toset">返回设置</button>
    </div>
1.
2.
3.
4.
5.
6.

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

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

3.5、游戏结束弹窗

    <div class="all_popup" style="height: 80%; width: 50%;" show="{{ popup }}">
        <text class="title">{{ result }}</text>
        <button class="btn" onclick="restart">重新开始</button>
        <button class="btn" onclick="toset">返回设置</button>
    </div>
1.
2.
3.
4.
5.

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

简单的JS鸿蒙小游戏——记忆翻牌之页面构建-鸿蒙开发者社区

未完待续

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

分类

HarmonyOS

JavaScript

标签

「过年不停更」

已于2022-2-3 14:31:29修改

1条回复

按时间正序

按时间倒序

mb609898e2cfb86

发现宝藏楼主

2022-2-4 10:32:22

51CTO

51CTO博客

51CTO学堂

简单的JS鸿蒙小游戏——记忆翻牌之页面构建原创精华

前言

项目介绍

1、新建工程

2、项目结构

3、编写页面

3.1、游戏页面

3.2、游戏规则说明弹窗

3.3、难度设置弹窗

3.4、游戏暂停弹窗

3.5、游戏结束弹窗

未完待续

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

简单的JS鸿蒙小游戏——记忆翻牌之页面构建 原创 精华

前言

项目介绍

1、新建工程

2、项目结构

3、编写页面

3.1、游戏页面

3.2、游戏规则说明弹窗

3.3、难度设置弹窗

3.4、游戏暂停弹窗

3.5、游戏结束弹窗

未完待续

目录

订阅鸿蒙技术特刊，精选内容抢先看

简单的JS鸿蒙小游戏——记忆翻牌之页面构建原创精华