簡單的JS鴻蒙小游戲—飛行棋之頁面構建

作者：Looker_song 2022-10-31 15:22:37

系統 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]  // 藍線
]