自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

簡單的JS鴻蒙小游戲—飛行棋之頁面構(gòu)建

作者：Looker_song
系統(tǒng) OpenHarmony
游戲的布局并不復(fù)雜，分為左邊的飛行記錄，中間的棋盤，右邊的骰子、按鈕操作區(qū)，還有游戲結(jié)束時的排行榜，共四部分。

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

前言

飛行棋大家應(yīng)該都玩過吧，紅、綠、黃、藍(lán)四名玩家輪流擲骰子移動棋子，爭先到達(dá)終點，期間還要提防己方棋子不被擊落。今天就先帶大家學(xué)習(xí)下如何完成飛行棋游戲的簡單布局。

項目結(jié)構(gòu)

#打卡不停更# 簡單的JS鴻蒙小游戲——飛行棋之頁面構(gòu)建-開源基礎(chǔ)軟件社區(qū)

頁面構(gòu)建

游戲的布局并不復(fù)雜，分為左邊的飛行記錄，中間的棋盤，右邊的骰子、按鈕操作區(qū)，還有游戲結(jié)束時的排行榜，共四部分。

#打卡不停更# 簡單的JS鴻蒙小游戲——飛行棋之頁面構(gòu)建-開源基礎(chǔ)軟件社區(qū)

  • 左側(cè)飛行記錄：也即各個陣營的當(dāng)前戰(zhàn)績統(tǒng)計，除了與游戲勝利直接相關(guān)的抵達(dá)終點的棋子數(shù)，還記錄了各方擊落敵機(jī)的數(shù)量，這也是游戲的趣味之一。
<div class="flylog">
        <text class="log-title">——飛行記錄——</text>
        <text class="log-key">陣營  |  擊落敵機(jī)  |  飛行進(jìn)度</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枚棋子，棋子的位置在游戲過程中是動態(tài)變化的，所以使用絕對定位將某一棋格的坐標(biāo)賦值給棋子的left和top屬性。在對應(yīng)的區(qū)域棋子的朝向也會變化，否則棋子始終朝一個方向有些呆板。另外，棋子能否移動與擲出的骰子點數(shù)和飛機(jī)狀態(tài)有關(guān)，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>
  • 右側(cè)操作區(qū)：文本提示當(dāng)前回合輪到哪個陣營，點擊骰子隨機(jī)擲出1~6，還有重新開始按鈕，為避免誤觸設(shè)置其觸發(fā)事件為長按事件。
<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>
  • 排行榜：默認(rèn)隱藏，當(dāng)游戲結(jié)束時顯示各陣營名次先后及用時。

#打卡不停更# 簡單的JS鴻蒙小游戲——飛行棋之頁面構(gòu)建-開源基礎(chǔ)軟件社區(qū)

<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>

走棋準(zhǔn)備

我們需要另外新建一個js文件作為棋盤的地圖，記錄每一個棋格的序號、坐標(biāo)、角度、顏色等屬性。文件格式如下：

// 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對應(yīng)的棋格下標(biāo)，用于查找棋格；
  • 坐標(biāo)的x和y分別賦值給行走到該棋格的棋子的left和top屬性；
  • angle用于設(shè)置該棋格上的棋子的朝向角度；
  • color記錄棋格顏色，當(dāng)棋子行走到同色的棋格時會觸發(fā)位移事件；
  • 棋子數(shù)組chess[]則是用來記錄當(dāng)前回合該棋格上有哪些棋子。若是同色的棋子則數(shù)組長度加一；若是異色的則觸發(fā)踩棋事件，將原數(shù)組中的元素清空重置，寫入新棋子。

由于各個陣營棋子的走棋路線是不同的，所以需要先設(shè)定好各自對應(yīng)的航線，利用上面設(shè)置好的棋格下標(biāo)，分別設(shè)定四條路線。

// 各色飛機(jī)的飛行航線
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]  // 藍(lán)線
]

未完待續(xù)

至此，飛行棋小游戲的頁面布局就準(zhǔn)備完成了，關(guān)鍵游戲邏輯待下一篇講解。

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

責(zé)任編輯：jianghua 來源： 51CTO開源基礎(chǔ)軟件社區(qū)
JS鴻蒙小游戲
相關(guān)推薦

2022-11-01 15:17:48

JS鴻蒙小游戲

2017-03-23 15:17:20

Linuxsudo棋盤

2022-02-11 14:39:11

游戲JS鴻蒙

2022-10-28 16:20:10

JS鴻蒙小游戲

2022-02-11 14:02:09

游戲JS鴻蒙

2022-08-22 17:28:34

ArkUI鴻蒙

2022-02-17 20:18:27

JS鴻蒙操作系統(tǒng)

2024-01-15 07:47:09

井字棋游戲編程練習(xí)Python

2012-12-24 08:46:50

iOSUnity3D

2022-07-08 14:53:46

掃雷小游戲鴻蒙

2022-12-19 16:56:48

游戲開發(fā)鴻蒙

2023-08-07 15:18:29

游戲開發(fā)鴻蒙Arkts

2022-11-09 11:57:17

原生JS五子棋

2012-09-11 09:19:35

JavaScriptJSjQ

2021-09-17 14:47:33

鴻蒙HarmonyOS應(yīng)用

2022-07-29 14:47:34

數(shù)獨Sudoku鴻蒙

2021-10-08 14:45:22

鴻蒙HarmonyOS應(yīng)用

2022-03-28 07:52:31

H5小游戲開發(fā)教程頁面基礎(chǔ)布局

2022-08-25 21:41:43

ArkUI鴻蒙

2021-01-15 12:15:36

鴻蒙HarmonyOS游戲
點贊
收藏

51CTO技術(shù)棧公眾號