从零开始使用华为DevEco Studio编写2048小游戏

最新推荐文章于 2025-03-07 19:19:21 发布

Brian_Leeee

最新推荐文章于 2025-03-07 19:19:21 发布

阅读量7.3k

点赞数 16

文章标签： javascript

本文链接：https://blog.csdn.net/Brian_Leeee/article/details/109753448

版权

本文记录了作者通过学习张荣超老师的课程，使用华为DevEco Studio用JavaScript编写鸿蒙OS上的2048小游戏的过程。实现了页面布局、画布显示数字和初始化时随机放置数字的功能。详细介绍了开发工具、文件用途及部分源代码解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

本文由我和@WiKiBeta共同完成，也是我们第一次接触HarmonyOS，对OS了解的越多，越觉得开发OS是一件不简单的事，开发APP只是其中的一部分，背后的工程实在是有点超出想象。这次我们通过对张荣超老师课程（课程链接）的学习，我们对如何使用IDE开发HOS中的APP有了一定的理解，以下是我们学习完成后写下的笔记，如果有纰漏，希望各位谅解并指出。

概述

本次课程目标是开发能在鸿蒙设备上运行的经典小游戏2048，本次学习实现的功能主要有：1.实现页面布局 2.在画布上显示所有的格子以及格子里的数字 3. 页面初始化时随机选择两个格子，并放入2或4。本次课程中，未完整实现的响应滑动事件功能将在以后的学习笔记中进行补充。(课程使用的开发软件为DevEco Studio, 语言为JavaScript).

准备工作

开发工具

华为HarmonyOS的应用开发工具DevEco Studio下载地址
node.js下载地址

编写位置

在这里插入图片描述

文件用途

在这里插入图片描述

具体流程

1.	实现页面布局

在这里插入图片描述

效果如下
在这里插入图片描述

在画布上显示所有的格子以及格子里的数字

效果如下
在这里插入图片描述

页面初始化时随机选择两个格子，并放入2或4
页面初始化：

随机选择两个格子，并放入2或4：
在这里插入图片描述

效果如下：在这里插入图片描述

源代码（详解）

hml

<div class="container">
    <text class="scores">
        最高分：{
   {
   bestScores}}//将bestScores与最高分动态绑定，即bestScores可变
    </text>
    <text class="scores">
        当前分：{
   {
   currentScores}}//cunrrentScores与最高分动态绑定，即bestScores可变

    </text>
    <stack class="stack">
        <canvas class="canvas" ref="canvas" onswipe="swipeGrids">
        //定义canvas组件，类为canvas，ref指向canvas对象实例，onswipe指向“滑动”这一事件
        </canvas>
        <div class="subcontainer" show="{
   {isShow}}">
            <text class="gameover">
                游戏结束
            </text>
        </div>
    </stack>
    <input type="button" value="重新开始" class="btn" onclick="restartGame"/>//输入一个组件input，定义种类为button以显示一个按钮，value即按钮上将显示的文本，类定义为btn
</div>//以上就定义了我们有哪些组件

css

.container {
   //整个界面的基本布局
    flex-direction: column;//将界面中的组件竖向排列
    width: 454px;
    height: 454px;
    justify-content: center;//justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，使其中心化
    align-items: center;//align-content 属性对齐交叉轴上的各项（垂直），这里使其中心化
}
.scores {
   
    width: 300px;
    height:20px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0px;//使类为scores的元素排列的更加紧凑
    margin-top: 10px;//在类为scores的元素周围设置10px的外边距
}
.stack{
   
    width: 305px;
    height: 305px;
    margin-top: 10px;
}
.canvas{
   
    width:305px;
    height:305px;
    background-color: #BBADA0;//背景色，16进制
}
.subcontainer {
   
    width: 305px;
    height: 305px;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.gameover {
   
    font-size: 38px;
    color: black;
}
.btn{
   
    width:150px;
    height:30px;
    background-color: #AD9D8F;
    font-size: 24px;
    margin-top: 10px;
}

js

var grids;//设置变量grids
var context;//使context作为全局变量，因为使用频率较高
const THEME = {
   //设置常量theme,其中含有子集normal和faded，用于填充字体颜色和网格背景色，normal用于平常，faded仅在游戏结束后生效
    normal: {
   
        "0": "#CDC1B4",
        "2": "#EEE4DA",
        "4": "#EDE0C8",
        "8": "#F2B17