简单的JS鸿蒙小游戏—飞行棋之页面构建

系统 OpenHarmony
游戏的布局并不复杂,分为左边的飞行记录,中间的棋盘,右边的骰子、按钮操作区,还有游戏结束时的排行榜,共四部分。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

前言

飞行棋大家应该都玩过吧,红、绿、黄、蓝四名玩家轮流掷骰子移动棋子,争先到达终点,期间还要提防己方棋子不被击落。今天就先带大家学习下如何完成飞行棋游戏的简单布局。

项目结构

#打卡不停更# 简单的JS鸿蒙小游戏——飞行棋之页面构建-开源基础软件社区

页面构建

游戏的布局并不复杂,分为左边的飞行记录,中间的棋盘,右边的骰子、按钮操作区,还有游戏结束时的排行榜,共四部分。

#打卡不停更# 简单的JS鸿蒙小游戏——飞行棋之页面构建-开源基础软件社区

  • 左侧飞行记录:也即各个阵营的当前战绩统计,除了与游戏胜利直接相关的抵达终点的棋子数,还记录了各方击落敌机的数量,这也是游戏的趣味之一。
<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>
  • 排行榜:默认隐藏,当游戏结束时显示各阵营名次先后及用时。

#打卡不停更# 简单的JS鸿蒙小游戏——飞行棋之页面构建-开源基础软件社区

<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] // 蓝线
]

未完待续

至此,飞行棋小游戏的页面布局就准备完成了,关键游戏逻辑待下一篇讲解。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

责任编辑:jianghua 来源: 51CTO开源基础软件社区
相关推荐

2022-11-01 15:17:48

JS鸿蒙小游戏

2017-03-23 15:17:20

Linuxsudo棋盘

2022-02-11 14:02:09

游戏JS鸿蒙

2022-02-11 14:39:11

游戏JS鸿蒙

2022-10-28 16:20:10

JS鸿蒙小游戏

2022-08-22 17:28:34

ArkUI鸿蒙

2022-02-17 20:18:27

JS鸿蒙操作系统

2012-12-24 08:46:50

iOSUnity3D

2024-01-15 07:47:09

井字棋游戏编程练习Python

2022-07-08 14:53:46

扫雷小游戏鸿蒙

2023-08-07 15:18:29

游戏开发鸿蒙Arkts

2022-12-19 16:56:48

游戏开发鸿蒙

2012-09-11 09:19:35

JavaScriptJSjQ

2022-11-09 11:57:17

原生JS五子棋

2022-07-29 14:47:34

数独Sudoku鸿蒙

2021-09-17 14:47:33

鸿蒙HarmonyOS应用

2021-10-08 14:45:22

鸿蒙HarmonyOS应用

2022-03-28 07:52:31

H5小游戏开发教程页面基础布局

2022-08-25 21:41:43

ArkUI鸿蒙

2021-01-12 12:16:55

鸿蒙HarmonyOS游戏
点赞
收藏

51CTO技术栈公众号