想了解更多关于开源的构建内容,请访问:
51CTO 开源基础软件社区
https://ost.51cto.com
飞行棋大家应该都玩过吧,简单红、游戏页面绿、飞行黄、构建蓝四名玩家轮流掷骰子移动棋子,简单争先到达终点,游戏页面期间还要提防己方棋子不被击落。飞行今天就先带大家学习下如何完成飞行棋游戏的简单布局。
游戏的布局并不复杂,分为左边的飞行记录,中间的棋盘,右边的骰子、按钮操作区,还有游戏结束时的排行榜,共四部分。
<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>
<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>
<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;
由于各个阵营棋子的走棋路线是不同的,所以需要先设定好各自对应的航线,利用上面设置好的棋格下标,分别设定四条路线。
// 各色飞机的飞行航线
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开源基础软件社区 JS鸿蒙小游戏(责任编辑:时尚)
好消息!全国首个百万千瓦煤电机组节能减排升级与改造示范项目建成投产
21:20 开售:小米 14 / Pro 手机 3999 元起 + 京东 24 期免息
AI投资已成为商界领袖“头等大事” 规模有望在2025年超2000亿美元
极越01将于10月27日上市 纯电中大型SUV预售25.99万起 -
彩讯股份(300634.SZ):股东广东达盛累计减持437.99万股