寫在前面

本文由我和@WiKiBeta共同完成，也是我們第一次接觸HarmonyOS，對OS了解的越多，越覺得開發OS是一件不簡單的事，開發APP只是其中的一部分，背后的工程實在是有點超出想象，這次我們通過對張榮超老師課程（課程鏈接）的學習，我們對如何使用IDE開發HOS中的APP有了一定的理解，以下是我們學習完成后寫下的筆記，如果有紕漏，希望各位諒解并指出，

概述

本次課程目標是開發能在鴻蒙設備上運行的經典小游戲2048，本次學習實作的功能主要有：1.實作頁面布局 2.在畫布上顯示所有的格子以及格子里的數字 3. 頁面初始化時隨機選擇兩個格子，并放入2或4，本次課程中，未完整實作的回應滑動事件功能將在以后的學習筆記中進行補充，(課程使用的開發軟體為DevEco Studio, 語言為JS).

準備作業

開發工具

華為HarmonyOS的應用開發工具DevEco Studio下載地址

撰寫位置

檔案用途

具體流程

1.	實作頁面布局

效果如下

2. 在畫布上顯示所有的格子以及格子里的數字
   
   

效果如下

3. 頁面初始化時隨機選擇兩個格子，并放入2或4
   頁面初始化：
   
   

隨機選擇兩個格子，并放入2或4：

效果如下：

源代碼（詳解）

                              hml

<div class="container">
    <text class="scores">
        最高分：{{bestScores}}//將bestScores與最高分動態系結，即bestScores可變
    </text>
    <text class="scores">
        當前分：{{currentScores}}//cunrrentScores與最高分動態系結，即bestScores可變

    </text>
    <canvas class="canvas" ref="canvas" onswipe="swipeGrids">//定義canvas組件，類為canvas，ref指向canvas物件實體，onswipe指向“滑動”這一事件
    </canvas>
    <input type="button" value="重新開始" class="btn" onclick="restartGame"/>//輸入一個組件input，定義種類為button以顯示一個按鈕，value即按鈕上將顯示的文本，類定義為btn
</div>//以上就定義了我們有哪些組件

                              css 

.container {//整個界面的基本布局
    flex-direction: column;//將界面中的組件豎向排列
    width: 454px;
    height: 454px;
    justify-content: center;//justify-content 用于設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，使其中心化
    align-items: center;//align-content 屬性對齊交叉軸上的各項（垂直），這里使其中心化
}
.scores {
    width: 300px;
    height:20px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0px;//使類為scores的元素排列的更加緊湊
    margin-top: 10px;//在類為scores的元素周圍設定10px的外邊距
}
.canvas{
    width:305px;
    height:305px;
    background-color: #BBADA0;//背景色，16進制
}
.btn{
    width:150px;
    height:30px;
    background-color: #AD9D8F;
    font-size: 24px;
    margin-top: 10px;
}

                             js

var grids;//設定變數grids
var context;//使context作為全域變數，因為使用頻率較高
const colors={//設定常量colors，用于填充字體顏色和網格背景色
    "0": "#CDC1B4",
    "2": "#EEE4DA",
    "4": "#EDE0C8",
    "8": "#F2B179",
    "16": "#F59563",
    "32": "#F67C5F",
    "64": "#F65E3B",
    "128": "#EDCF72",
    "256": "#EDCC61",
    "512": "#99CC00",
    "1024": "#83AF9B",
    "2048": "#0099CC",
    "2or4": "#645B52",
    "others": "#FFFFFF"
}
const MARGIN =5;//定義常量MARGIN，為girds中grid與grid的間距
const SIDELEN=70;//grid的邊長
export default {//export default命令，為模塊指定默認輸出
    data: {
        currentScores: 0,//默認值為0
        bestScores: 9818
    },
    onInit(){//初始化游戲界面：
        this.initGrids();//呼叫initGrids，使所有網格的填充色為字符0元素的背景色，而字符0本身沒有顏色，從而使界面看起來像清空
        this.addTwoOrFourToGrids();//在grids中任意指定一個grid使其為2or4
        this.addTwoOrFourToGrids();
    },
    onReady(){//首次顯示頁面，頁面初次渲染完成，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層進行互動（用于渲染）
        context=this.$refs.canvas.getContext("2d");//獲得canvas對應的2d繪制引擎，并將其賦值給全域變數context
    },
    onShow(){//頁面載入后觸發onShow方法，顯示頁面，每次打開頁面都會呼叫一次（用于顯示）
        this.drawGrids();
    },
    initGrids(){//使所有網格的填充色為字符0元素的背景色，而字符0本身沒有顏色，從而使界面看起來像清空
        grids=[[0,0,0,0],
               [0,0,0,0],
               [0,0,0,0],
               [0,0,0,0]];
    },
    drawGrids() {//繪制grids
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {//遍歷所有grid
                let gridStr = grids[row][column].toString();//將grid上的數字轉化為字串

                context.fillStyle = colors[gridStr];//網格的填充色，根據字串來定，以context繪圖實作
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;//grid左上角的橫坐標
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;//grid左上角的縱坐標
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);//定義繪制的范圍，四個引數

                context.font = "24px HYQiHei-65S";//繪制的字體形式
                if (gridStr != "0") {//“0”不用繪制
                    if (gridStr == "2" || gridStr == "4") {
                        context.fillStyle = colors["2or4"];
                    } else {
                        context.fillStyle = colors["others"];
                    }

                    let offsetX = (4 - gridStr.length) * (SIDELEN / 8);//str左上角與gridX方向上的間距，四個字符占的長度=SIDELEN
                    let offsetY = (SIDELEN - 24) / 2;str左上角與gridY方向上的間距

                    context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);//接受gird上的字串以及STR左上角的橫坐標以及縱坐標并將其進行繪制
                }
            }
        }
    },
    addTwoOrFourToGrids(){//在初始化或restart時選中兩個grid作為最開始時出現的grid，其值為2or4
        let array=[];
        for(let row =0;row<4;row++){
            for(let column=0;column<4;column++){
                if(grids[row][column]==0){
                    array.push([row,column]);//遍歷并存盤網格上數字為0的網格位置
                }
            }
        }
        let randomIndes=Math.floor(Math.random()*array.length);//取[0,array.length-1]之間的任意一個整數
        let row=array[randomIndes][0];//索引中陣列為0的元素為行索引
        let column=array[randomIndes][1];//索引中陣列為1的元素為列索引
        if(Math.random()<0.8){//使出現2的概率大于4，選定一個grid，使其的值為2or4
            grids[row][column]=2;
        }else{
            grids[row][column]=4;
        }
    },
// swipeGrids(event){//未完成的滑動操作
//        let newGrids;
//        if(newGrids.toString()!=grids.toString()){
//            grids=newGrids;
//            this.addTwoOrFourToGrids();
//            this.drawGrids();
//        }
//    }
    restartGame(){//相應點擊按鈕這一事件，重新開始游戲
        this.initGrids();
        this.addTwoOrFourToGrids();
        this.addTwoOrFourToGrids();
        this.drawGrids();
    }

}

寫在后面

由于張老師的課程時間限制的原因，還未實作所有的功能，在張老師推出完整教程后我們可能會寫出完整的版本，以上就是我們的學習筆記，希望大家看完能有所識訓，謝謝，在這里感謝張榮超老師精彩細致的講解，讓我們這些小白也能有所體會，同時也感謝ojs師兄，lcz老師，和wbh老師帶領我們進入這個領域，讓我們有幸接觸到HarmonyOS，最后，希望我們能和大家一起進步，將來寫出更好的代碼，