#打卡不停更# 简单的JS鸿蒙小游戏——飞行棋之页面构建

Posted 2022-11-01

前言

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

项目结构

页面构建

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

• 左侧飞行记录：也即各个阵营的当前战绩统计，除了与游戏胜利直接相关的抵达终点的棋子数，还记录了各方击落敌机的数量，这也是游戏的趣味之一。

    <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

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

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

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