HarmonyOS鸿蒙Next中JSUI的超酷炫的（仿合成2048）1024分布式互动小游戏，丰富的动画，精美的UI，内含超多干货，手把手教学

HarmonyOS鸿蒙Next中JSUI的超酷炫的（仿合成2048）1024分布式互动小游戏，丰富的动画，精美的UI，内含超多干货，手把手教学 #HarmonyOS挑战赛第三期#用JS写超酷炫的(仿合成2048)1024分布式互动小游戏，丰富的动画，精美的UI，内含超多干货，手把手教学（希望大家能多多支持）

先看效果：（推荐使用电脑有更好的观看效果）

游戏规则：双方连接后同时开始游戏，游戏规则与2048基本相同，上方有连那个能量条，第一条为己方，第二条为对方，当进度条满时，会根据溢出倍数往对方界面上增加初始方块。同时一次滑动合成多个方块会有倍数加成。最先合成1024的一方获胜，最先布满4×4区域的一方失败。

本实例运用了丰富的动画效果，让JS的游戏也能动态十足

联机演示	preview演示

这么酷的1024，心动吗？

代码简单易懂，快来试试吧

还希望大家可以在后续的人气投票中投上一票噢！！！

话不多说，马上开始整

注意：本案例包含API6内容，目前无法在大家的手机中实现

1. 首先第一个开始页面，制作闪烁的流水霓虹灯效果

这里用到了很重要的组件，那就是Canvas

通过定时重绘canvas达到想要的效果

首先看看页面代码：

<div class="container" style="background-color: black;">
    <div style="width: 100%;flex-direction: column;">
        <canvas ref="H" style="width: 100%;height: 200px"></canvas>
        <button style="margin: 20px;font-size: 30px;height: 60px;width: 100%;
                background-color: transparent;border: 2px solid #0066ff;
                box-shadow: 0 0 10px 4px #800066ff;"
                type="capsule" click-effect="spring-medium"
                on:click="toGame">
            开 始 游 戏
        </button>
    </div>
    <div style="width: 100%;height: 100%;position: absolute; left: 0;top: 0;flex-direction: column;
            justify-content: center;align-items: center;" if="{{loading}}">
        <div style="background-color: #a0000000;width: 100%;height: 200px;">
            <button style="background-color: transparent;width: 100%;height: 100%;font-size: 20;"
                    waiting="true">
                连接中
            </button>
        </div>
    </div>
</div>

没错，就是这么少。没有多余的其他组件，底下button用于显示加载中的动画，上面显示霓虹灯效果，具体代码该怎么实现呢？

第一部分主要在界面绘制上，难度不大，熟练运用canvas绘制即可，没有逻辑上的理解

1. 游戏界面制作

游戏界面的绘制也没有使用很多代码，主要是分为3个部分，分数、对方信息区、合成区

| 分数、对方信息区、合成区 | |

运用好border-radius, border, padding, margin就可以让界面焕发新生

同时在字体方面也要设置好font-size, letter-spacing（字体间距）

1. 2048游戏逻辑

首先需要清除这个游戏的规则：

1. 可以通过上下左右滑动以移动方块
2. 当数字相同方块撞在一起会合成一个方块
3. 在滑动后会生成一个新的方块
4. 本回合合并得到的方块无法再次合并
5. 当无法再产生方块且无法合成方块时，游戏失败

基于以上规则书写我们的代码逻辑。

核心算法如下：代码很长，主要分为以下部分：计算方块移动 -》播放方块移动动画 -》计算得分 -》生成新方块 -》判断是否结束

1. 与对方通信

分布式互动同样是这次游戏的要点，利用分布式可以轻松实现近距离联机小游戏

JS端的通信功能实现：

1. JAVA核心service代码

结语：这个项目还是很有趣哒，实际难度也不大，有兴趣的朋友们可以自己尝试写写噢

希望本篇文章可以帮助到大家

注意：本篇文章含有API6内容，目前手机无法实现

最后衷心希望大家能在人气投票上给孩子投上一票吧！！！

gitee源码地址：https://gitee.com/ffffffds/funny1024