深鸿会深大小组学习笔记：第一周，从零开发鸿蒙小游戏2048app（上）_数独app中的2048

前言

张荣超老师的从零开发鸿蒙小游戏app是一部优秀的鸿蒙应用开发的入门级教学视频，近几日和同学一起对其进行了学习。在此写下博客，一为记录下我们的学习历程，千里之行，始于足下，这个博客是我们学习鸿蒙的一个起点。二为方便和我们一样的初学者，你可以从本文中迅速了解视频的内容，以确定自己后续是否选择观看学习。
原视频地址如下：https://edu.51cto.com/center/course/lesson/index?id=658343
一起学习的小伙伴：
Zy82243480
wx15820482064
Lingzijiandevx
pp459816283

概述

本次课程将从0实现鸿蒙app小游戏在智能可穿戴设备上的编译。
1，课程使用的工具为devecostudio，网址链接如下：https://deveco.huawei.com/v2/
2，课程使用的语言为JavaScript，虚拟设备为lite wearable。
3，课程期望实现的app小游戏为2048，期望实现的功能如下：

1. 每次开始游戏时，在随机的两个空格子中填入2或4
   

2. .使用上下左右进行操作 ，相同数字相碰则数字相加，同时在一个空格子生成2或4

3. 达到2048则游戏胜利，若无法再通过移动合并格子，则游戏结束

创建项目与操作分析

1.创建新的项目文件：点击左上角file，点击new，选择Lite Wearable选项，选择默认的模板（如图），然后将文件命名为Game2048（注意，文件名的路径中不要出现中文，否则无法创建新项目）。

具体流程

页面布局

与网页开发所使用的语言类似，根据图示路径：找到页面对应.css .hml和.js文件。
其中.hml文件用于描述页面中含有那些组件；css用于描述组件的形状与大小；.js文件用于描述组件之间的交互。

我们将对自动生成的Hello World程序进行一步步的修改，也就是对上图的三个类型的文件进行修改。
我们要做以下三件事：
（1）展示最高分和当前分：

1. 修改类名为title的text组件并增加text组件，并以动态绑定的方式绑定最高分和当前分
2. 在index.js我文件中将bestScores的值设为9818，currentScore的值设为0。
3. 通过修改font-size的像素值设置字体大小，为了使最高分和当前分这两个组件紧凑，可添加：

 `letter-spacing：0px；`
1

4. 添加外边距可以用以下代码来添加。

` margin-top: 10px;`
1

（2）在屏幕中央放置一块棋盘：

1. 在index.css文件中添加cavans组件，棋盘的长宽都设置为305px，其中每一个格子的长宽都为70px，而边缘都为5px（如下图）；
   

2.用以下代码设置棋盘背景色

`    background-color: #BBADA0;
1

（3）展示重新开始的按钮：

增加一个input组件，并赋type的值为button，赋value的值为’重新开始’。

代码如下：
index.js

export default {
   
    data: {
   
        bestScores: 9818,
        currenetScores: 0
    }
}
1
2
3
4
5
6
7
8

index.css

.container {
   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 454px;
    height: 454px;
}
.scores {
   
    font-size: 18px;
    text-align: center;
    width: 300px;
    height: 20px;
    letter-spacing:0px;
    margin-top: 10px;
}
.canvas{
   
    width: 305px;
    height: 305px;
    background-color: #BBADA0;
    margin-top: 10px;
}
.btn{
   
    width: 150px;
    height: 30px;
    background-color: #AD9D8F;
    font-size: 24px;
    margin-top: 10px;
}
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

index.hml

<div class="container">
    <text class="scores">
        最高分: {
   {
   bestScores}}
    </text>
    <text class="scores">
        当前分： {
   {
   currentScores}}
    </text>
    <canvas class = "canvas">
    </canvas>
    <input type="button" value="重新开始" class="btn"/>
</div
1
2
3
4
5
6
7
8
9
10
11
12
13
14