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

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

前言

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

项目介绍

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

1、新建工程

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

2、项目结构

3、编写页面

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

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>

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

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>

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

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>

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

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>

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

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>

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

未完待续

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