【开发样例】用JS写一个OpenHarmony拼图小游戏

一、简介

1.样例效果

本Demo是基于OpenHarmony3.0 LTS，使用JS语言编写的拼图小游戏。

游戏效果展示

2.涉及OpenHarmony技术特性

JS UI

3.支持OpenHarmony版本

OpenHarmony 3.0 LTS

4、支持的开发板

九联科技Unionpi Tiger(A311D)开发板

二、快速上手

1、标准设备环境准备

九联科技Unionpi Tiger(A311D)开发板，源码编译烧录参考

2、应用编译环境准备

下载DevEco Studio 下载地址；
配置SDK，参考配置OpenHarmony-SDK;
DevEco Studio 点击File -> Open 导入本下面的代码工程FlightGame;

3、项目下载和导入

git下载

git clone https://gitee.com/openharmony-sig/knowledge_demo_temp.git

项目导入

打开DevEco Studio,点击File->Open->下载路径/FA/Entertainment/Jigsaw

4、配置签名

配置应用签名信息

5、安装应用

将hap包放入U盘，将U盘插入开发板的 USB 接口，电脑与开发板的 Micro USB 接口连接，进入U盘的文件夹内，输入如下指令即可完成安装。

bm install -p jigsaw.hap

三、关键代码解读

1、目录结构

.
├─entry\src\main
│     │  config.json // 应用配置
│     ├─js
│     │  └─MainAbility
│     │      │  app.js
│     │      ├─common
│     │      │       images.js // 图片列表
│     │      ├─i18n
│     │      └─pages
│     │              ├─index // 首页
│     │              │       index.css
│     │              │       index.hml
│     │              │       index.js
│     │              └─jigsaw // 游戏页面
│     │                      jigsaw.css
│     │                      jigsaw.hml
│     │                      jigsaw.js
│     └─resources // 静态资源目录
│         ├─base
│         │  ├─element
│         │  └─media // 存放媒体资源
│         └─rawfile