简单的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 }}/4text>
                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>

// 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]  // 蓝线
]