关键词：
前言
飞行棋大家应该都玩过吧，红、绿、黄、蓝四名玩家轮流掷骰子移动棋子，争先到达终点，期间还要提防己方棋子不被击落。今天就先带大家学习下如何完成飞行棋游戏的简单布局。
项目结构
页面构建
游戏的布局并不复杂，分为左边的飞行记录，中间的棋盘，右边的骰子、按钮操作区，还有游戏结束时的排行榜，共四部分。
- 左侧飞行记录：也即各个阵营的当前战绩统计，除了与游戏胜利直接相关的抵达终点的棋子数，还记录了各方击落敌机的数量，这也是游戏的趣味之一。
<div class="flylog">
<text class="log-title">——飞行记录——</text>
<text class="log-key">阵营 | 击落敌机 | 飞行进度</text>
<list>
<list-item class="list-item" for=" flylog ">
<div class="log-item">
<image class="item-camp" src=" $item.camp "></image>
<text class="item-text"> $item.hit </text>
<text class="item-text"> $item.progress /4</text>
</div>
</list-item>
</list>
</div>
- 中间棋盘：背景图片为飞行棋棋盘，其上是4×4=16枚棋子，棋子的位置在游戏过程中是动态变化的，所以使用绝对定位将某一棋格的坐标赋值给棋子的left和top属性。在对应的区域棋子的朝向也会变化，否则棋子始终朝一个方向有些呆板。另外，棋子能否移动与掷出的骰子点数和飞机状态有关，disabled属性便是用于控制该棋子是否可以交互移动。
<div class="middle">
<image class="sky" src="common/sky.png"></image>
<image for="(index, item) in RED" class="chess" style="left: item.x %; top: item.y %; transform: rotateZ( item.angle );"
src="common/red.png" disabled=" item.chess_dab " onclick="appoint(RED, index)"></image>
<image for="(index, item) in GREEN" class="chess" style="left: item.x %; top: item.y %; transform: rotateZ( item.angle );"
src="common/green.png" disabled=" item.chess_dab " onclick="appoint(GREEN, index)"></image>
<image for="(index, item) in YELLOW" class="chess" style="left: item.x %; top: item.y %; transform: rotateZ( item.angle );"
src="common/yellow.png" disabled=" item.chess_dab " onclick="appoint(YELLOW, index)"></image>
<image for="(index, item) in BLUE" class="chess" style="left: item.x %; top: item.y %; transform: rotateZ( item.angle );"
src="common/blue.png" disabled=" item.chess_dab " onclick="appoint(BLUE, index)"></image>
</div>
- 右侧操作区：文本提示当前回合轮到哪个阵营，点击骰子随机掷出1~6，还有重新开始按钮，为避免误触设置其触发事件为长按事件。
<div class="side">
<button class="btn" onlongpress="restart">长按重新开始</button>
<text class="round"> roundtitle </text>
<image class="dice" disabled=" dice_dab " src="common/dice/ dice_pic .png" onclick="todice"></image>
</div>
- 排行榜：默认隐藏，当游戏结束时显示各阵营名次先后及用时。
<div class="ranking" show=" result ">
<text class="rank-title">———游戏排名———</text>
<list>
<list-item class="rank-item" for=" allrank ">
<div style="flex-direction: row;">
<stack class="rank">
<image class="trophy" src="common/rank.png"></image>
<text class="rank-number"> $item.rank </text>
</stack>
<div style="width: 20%;">
<image class="rank-camp" src=" $item.chess "></image>
</div>
<div class="finish-round">
<text style="font-size: 22px;"> $item.round </text>
</div>
</div>
</list-item>
</list>
</div>
走棋准备
我们需要另外新建一个js文件作为棋盘的地图，记录每一个棋格的序号、坐标、角度、颜色等属性。文件格式如下：
// MapData.js
export let MapData = [
index: 0, // 格子序号
x: 85, // 格子X轴
y: 63, // 格子Y轴
angle: 270, // 棋子朝向角度（顺时针方向）
color: "blue", // 格子颜色
chess: [], // 该棋格上的棋子
,
index: 1,
x: 79,
y: 65,
angle: 270,
color: "red",
chess: [],
,
…………
index: 95,
x: 86.45,
y: 14.1,
angle: 180,
color: "blue",
chess: [],
,
]
export default MapData;
- 序号index对应的棋格下标，用于查找棋格；
- 坐标的x和y分别赋值给行走到该棋格的棋子的left和top属性；
- angle用于设置该棋格上的棋子的朝向角度；
- color记录棋格颜色，当棋子行走到同色的棋格时会触发位移事件；
- 棋子数组chess[]则是用来记录当前回合该棋格上有哪些棋子。若是同色的棋子则数组长度加一；若是异色的则触发踩棋事件，将原数组中的元素清空重置，写入新棋子。
由于各个阵营棋子的走棋路线是不同的，所以需要先设定好各自对应的航线，利用上面设置好的棋格下标，分别设定四条路线。
// 各色飞机的飞行航线
let Route = [
[76, 0, 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, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 52, 53, 54, 55, 56, 57], // 红线
[81, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 58, 59, 60, 61, 62, 63], // 绿线
[86, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 0,
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 64, 65, 66, 67, 68, 69], // 黄线
[91, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 0, 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, 33, 34, 35, 36, 70, 71, 72, 73, 74, 75] // 蓝线
]
未完待续
至此，飞行棋小游戏的页面布局就准备完成了，关键游戏逻辑待下一篇讲解。
本文作者：Looker_song
https://ost.51cto.com/#bkwz
#打卡不停更#三方库移植之napi开发[2]c/c++与js的数据类型转换(代码片段)
在《三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI》通过一个HelloOpenHarmonyNAPI样例讲述了NPAI接口开发基础知识。本文在其基础上修改hellonapi.cpp文件，介绍JS类型和C/C++数据类型之间的转换。开发基于最新的OpenHarmony3.2Beta3版本及其对应... 查看详情
#打卡不停更#三方库移植之napi开发[4]异步调用:callback&promise(代码片段)
三方库移植之NAPI开发系列文章《HelloOpenHarmonyNAPI》、《C/C++与JS的数据类型转换》其接口都是同步的。对IO、CPU密集型任务需要异步处理。NAPI支持异步模型，提供了Promise、Callback2种方式。往期回顾：三方库移植之NAPI开发[1]—HelloO... 查看详情
#打卡不停更#harmonyos-基于arkui（js）实现虚拟摇杆组件(代码片段)
作者：杨尚晓前言虚拟摇杆在移动端游戏中是最常见看的，用来实现游戏中的精灵移动。本案例中使用jspai中的div和image组件来实现的虚拟摇杆组件，然后监听touch事件获取滑动的方向和位置x，y。开发环境说明工具版本：OpenHarmon... 查看详情
#打卡不停更#harmonyos-基于arkui(ets)实现心电图组件(代码片段)
作者：杨尚晓前言随着大家生活水平的提升，越来越多的人注重自身身心健康，养生成了目前比较热门的活动。心电图是检测心脏活动状态的直观表现，可以通过心电图来观察人提的健康状况。响应鸿蒙万物互联的口号，肯定少... 查看详情
#打卡不停更#三方库移植之napi开发[3]通过ide开发napi工程(代码片段)
在三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI一文中，笔者开发的是一个rom包的napi工程。该工程需要编译烧录固件，C++的动态库会集成到开发板的ROM中。在本篇文章中，笔者使用三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI中一样的he... 查看详情
#打卡不停更#openharmony-arkui（ts）声明式开发之列表拖动排列(代码片段)
作者：梁青松项目介绍本项目基于OpenHarmony的ArkUI框架：TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式，因为OpenHarmony的API相对于HarmonyOS的API，功能上比较完善和成熟的，有些... 查看详情
#打卡不停更#openharmony-应用开发入门指南(代码片段)
作者：余香鑫前言了解OpenHarmony能够开发一些简单的OpenHarmony应用一、了解OpenHarmonyOpenHarmony是由开放原子开源基金会(OpenAtomFoundation)孵化及运营的开源项目,目标是面向全场景、全连接、全智能时代,搭建一个智能终端设备操作系统... 查看详情
#打卡不停更#openharmony数据转码应用开发实战（上）(代码片段)
背景OpenHarmony的应用开发支持C++、JS、eTS，从已有版本的演进路线来看，eTS是未来重点的技术路线。对于刚入门OpenHarmony应用开发的小伙伴来说，eTS可能比较陌生，如果有一个合适的实战项目来练手，那么对技术能力提升是非常有... 查看详情
#打卡不停更#智能喂食器(代码片段)
一、介绍随着人们生活方式的不断改变，宠物猫在许多家庭中占有重要的地位，其凭借独立的个性和易于打理的饲养方式，成为当下上班族喜欢的宠物之一，人们更是把宠物猫和狗作为家庭的重要成员。有铲屎官表示，每月在... 查看详情
#打卡不停更#-openharmony/docs开发入门(代码片段)
作者：朱子道杨成前言不管是作为软件开发的爱好者还是已经从事软件开发这个行业的从业者，对于接触一种全新的系统OpenHarmony。学习OpenHarmony，需要清楚OpenHarmony这个系统是什么，能干什么，今日分享从设备开发和应用开发两... 查看详情
#打卡不停更#家庭健康管理平台(代码片段)
0.项目简介身体健康是一切生产生活的硬性基础。健康是福，一切安好，未来才可期。为什么经常跑步体重缺还在往上飘？突发紧急情况怎么处理？在数字时代，如何更好的为人们提供健康福祉、普及健康知识？如何进一步驱动... 查看详情
#打卡不停更#ffh浅析ability框架中stage模型与fa模型的差异(代码片段)
(#打卡不停更#【FFH】浅析Ability框架中Stage模型与FA模型的差异)Aility框架概述Ability是应用所具备能力的抽象，也是应用程序的基本组成单元。OpenHarmony与HarmonyOS的应用程序APP由一个或多个Hap包组成，每个Hap可以包含一个或多个Abilit... 查看详情
#打卡不停更#harmonyos基于arkui(ets)实现雷达扫描(代码片段)
作者：杨尚晓前言雷达扫描是一个比较有科技感的东西，对于科幻迷来说，科幻电影里基本都能看到的画面，一个大大的屏幕上,可以看到雷达扫描的绿幕效果。下面我们使用三种方式来实现这样的雷达效果。项目说明工具版本... 查看详情
#打卡不停更#[图文并茂]packstack部署train版openstack(代码片段)
Packstack部署openstack-train介绍如何在centos7.9中使用packstack部署openstack-train。首先需要安装一个最小化安装的centos7.9，按照你的网络环境配置好网络，然后重启。这里我的环境是VMware虚拟机，ip是192.168.10.30.首先我们需要关闭防火墙... 查看详情
基于stm32的串口收发讲解（hal库）#打卡不停更#(代码片段)
(基于STM32的串口收发程序（HAL库）)介绍串口（UART通用异步收发器，TTL）通讯是一种设备间的串行全双工通讯方式。由于UART是异步传输，没有传输同步时钟，为了保证数据的正确性，UART采用16倍数据波特率的时钟进行采样。因为... 查看详情
#打卡不停更#ffhopenharmony学生挑战赛分享-少儿语言教育app(代码片段)
Openharmony学生挑战赛经验分享前言本次参赛的项目是基于openHarmony开发的北向应用-少儿语言文化教育APP。从项目成立到初版成型再到参加比赛，这一路上遇到了不少困难，我也从团队协作、产品迭代、技术等方面学到了很多宝贵... 查看详情
#打卡不停更#编译效率快三倍,使用wsl2编译openharmony嘎嘎得劲!!(代码片段)
笔者发现使用wsl（WindowsSubsystemforLinux，适用于Linux的Windows子系统）编译openharmony镜像比传统虚拟机快3倍以上。编译环境换成wsl后，编译ohos只需要传统虚拟机上三分之一的时间。下面分享使用经验如下：(目录)为什么使用WSL2比传... 查看详情
#打卡不停更#elt.zip啃论文俱乐部——统计压缩编码机理分析(代码片段)
本文出自ELT.ZIP团队，ELT<=>Elite(精英)，.ZIP为压缩格式，ELT.ZIP即压缩精英。成员：上海工程技术大学大三学生合肥师范学院大三学生成都信息工程大学大二学生黑龙江大学大二学生沈阳农业大学大二学生东南大学成贤学院大... 查看详情