简单的JS鸿蒙小游戏—飞行棋之页面构建
source link: https://www.51cto.com/article/721681.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
简单的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>
- 排行榜:默认隐藏,当游戏结束时显示各阵营名次先后及用时。
<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] // 蓝线
]
至此,飞行棋小游戏的页面布局就准备完成了,关键游戏逻辑待下一篇讲解。
Recommend
-
9
从零开发HarmonyOS(鸿蒙)手机小游戏——数字华容道 - 鲸云夕陌的个人空间 - OSCHINA - 中文开源技术交流社区 2月16号HarmonyOS2.0手机开发者Beta版已经发布了,作为“1+8+N”战略的重要入口和生态核心,怎么能少得了手机应用开发呢,今天将由深鸿会深大学...
-
2
简单的JS鸿蒙小游戏—拼图(冬奥一起拼)-51CTO.COM 简单的JS鸿蒙小游戏—拼图(冬奥一起拼) 原创 作者:Looker_song 2022-02-17 20:18:27 本篇...
-
6
想了解更多关于开源的内容,请访问:...
-
5
你觉得卫龙新包装怎么样? 文章来源:LOGO大师 ID:logods 图片来源:卫龙、网络 编辑:zkey 还记得去春天,饿了么和麦当劳联名携手文化IP丰子恺,以“马上送春天”为主题,通过国风设计...
-
7
【木棉花】鸿蒙小游戏项目——数独Sudoku(1) 原创 精华 前言 小伙伴们,木棉花又更新了! 在序言的内容中,笔者向大家展示了数独小游戏项目的效果...
-
8
【木棉花】#夏日挑战赛# 鸿蒙小游戏项目——数独Sudoku 推荐 原创 开源基础软件社区官方...
-
3
#打卡不停更# 简单的JS鸿蒙小游戏——经典24点纸牌 原创 精华 相信大家都玩过24点纸牌游戏,今天给大家带来的就是这个经典的纸牌游戏,大家学会以后在空闲时可以玩一玩,锻炼...
-
5
简单的JS鸿蒙小游戏—经典24点纸牌 作者:Looker_song 2022-10-28 16:20:10 今天给大家带来的就是这个经典的纸牌游戏,大家学会以后在空闲时可以玩一玩,锻炼一下速算能力。
-
6
#打卡不停更# 简单的JS鸿蒙小游戏——飞行棋之页面构建 推荐 原创 开源基础软件社区官方
-
2
简单的JS鸿蒙小游戏—飞行棋之游戏逻辑 作者:Looker_song 2022-11-01 15:17:48 今天我们接着来讲下如何实现飞行棋的游戏逻辑。
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK