我的第一個(gè)鴻蒙手機(jī)小游戲 數(shù)字華容道

12 月 16 號(hào) HarmonyOS 2.0 手機(jī)開發(fā)者 Beta 版已經(jīng)發(fā)布了，作為“1+8+N”戰(zhàn)略的重要入口和生態(tài)核心，怎么能少得了手機(jī)應(yīng)用開發(fā)呢？今天將由深鴻會(huì)深大學(xué)習(xí)小組從零基礎(chǔ)開發(fā)第一個(gè) HarmonyOS 手機(jī)小游戲——數(shù)字華容道（界面略丑陋，大佬別噴）。

本個(gè) demo 將從零基礎(chǔ)開始完成鴻蒙小游戲 APP 在手機(jī)上的編譯在項(xiàng)目中我們所使用到的軟件為 DevEco Studio，下載地址為：

https://developer.harmonyos.com/cn/develop/deveco-studio#download

DevEco Studio 安裝教程：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

在項(xiàng)目中我們要實(shí)現(xiàn)的內(nèi)容為數(shù)字華容道 APP 的開發(fā)。

①打開引用首先為數(shù)字華容道的初始界面，點(diǎn)擊開始游戲即會(huì)切換到數(shù)字華容道的游戲界面。

②進(jìn)入數(shù)字華容道的游戲界面顯示 4*4 的方陣，方陣中分布有隨意打亂的 1 至 15 的數(shù)字和一個(gè)空白方格。

方陣下方顯示一個(gè)“重新開始”的按鈕和一個(gè)“返回”按鈕，點(diǎn)擊“重新開始”按鈕即會(huì)重新生成隨意打亂的 1 至 15 的數(shù)字和一個(gè)空白方格的方陣。

③經(jīng)過若干次滑動(dòng)或點(diǎn)擊后，當(dāng)所有的數(shù)字按順序排列后，則會(huì)彈出游戲成功的界面，再滑動(dòng)或點(diǎn)擊也不會(huì)有任何變化。

01

創(chuàng)建項(xiàng)目

02

實(shí)現(xiàn)初始界面布局

首先，我們要先實(shí)現(xiàn)數(shù)字華容道的初始界面，點(diǎn)擊開始游戲即會(huì)切換到另一個(gè)空白的界面。

①先在 entry>src>main>config.json 文件中最下方"launchType": "standard"的后面添加以下代碼。

并且將上方的“l(fā)abel”：“MyPhoneApplication”修改成"label": "數(shù)字華容道"，這樣就實(shí)現(xiàn)去掉應(yīng)用上方的標(biāo)題欄和將應(yīng)用名稱改為數(shù)字華容道了。

"orientation":"unspecified",
"name":"com.example.myphoneapplication.MainAbility",
"icon":"$media:icon",
"description":"$string:mainability_description",
"label":"數(shù)字華容道",
"type":"page",
"launchType":"standard",
"metaData":{
"customizeData":[
{
"name":"hwc-theme",
"value":"androidhwext:style/Theme.Emui.Light.NoTitleBar",
"extra":""
}
]
}

②先將我們事先準(zhǔn)備好的圖片復(fù)制粘貼到 entry>src>main>resources>base>media 文件夾中（ctrl+c、ctrl+v 復(fù)制粘貼），并且命名為 game，點(diǎn)擊 OK。

在 entry>src>main>resources>base>layout>ability_main.xml 中添加布局。

<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">

<Image
ohos:height="match_parent"
ohos:width="match_parent"
ohos:image_src="$media:game"
ohos:layout_alignment="center"
/>

<Button
ohos:id="$+id:button_game"
ohos:height="150"
ohos:width="515"
ohos:text_alignment="center"
ohos:top_margin="-810"
ohos:left_margin="250"
/>

DirectionalLayout>

③在 entry>src>main>java>com.example.myphoneapplication>slice 中右鍵選擇 New>Java Class 增加一個(gè)空白的類以用來后面編寫數(shù)字華容道的游戲界面，并且命名為 SecondAbilitySlice。

將 entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice 中的代碼修改成如下：

packagecom.example.myphoneapplication.slice;

importcom.example.myphoneapplication.ResourceTable;
importohos.aafwk.ability.AbilitySlice;
importohos.aafwk.content.Intent;

publicclassSecondAbilitySliceextendsAbilitySlice{

publicvoidonStart(Intentintent){
super.onStart(intent);

}

@Override
publicvoidonActive(){
super.onActive();
}

@Override
publicvoidonForeground(Intentintent){
super.onForeground(intent);
}
}

添加一個(gè)響應(yīng)點(diǎn)擊事件的函數(shù)，用 parsent 函數(shù)跳轉(zhuǎn)到 SecondAbilitySlice：

packagecom.example.myphoneapplication.slice;

importcom.example.myphoneapplication.ResourceTable;
importohos.aafwk.content.Intent;
importohos.agp.components.Button;
importohos.agp.components.Component;

publicclassMainAbilitySliceextendsohos.aafwk.ability.AbilitySlice{
@Override
publicvoidonStart(Intentintent){
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);

Buttonbutton=(Button)findComponentById(ResourceTable.Id_button_game);
button.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
present(newSecondAbilitySlice(),newIntent());
}
});

}

@Override
publicvoidonActive(){
super.onActive();
}

@Override
publicvoidonForeground(Intentintent){
super.onForeground(intent);
}
}

03

實(shí)現(xiàn)數(shù)字的隨機(jī)打亂

然后我們要在數(shù)字華容道的游戲界面生成隨意打亂的1至15的數(shù)字和一個(gè)空白方格的方陣。

在 entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice 編寫代碼。

先定義個(gè)一個(gè)位置布局 layout 和一個(gè)二維數(shù)組 grids，創(chuàng)建函數(shù) initializeinitialize() 分別對(duì)其初始化，在 onStart 函數(shù)中調(diào)用函數(shù) initializeinitialize()：

privatefloatstarX,starY,distanceX,distanceY;
privateDirectionalLayoutlayout;
privateint[][]grids;

publicvoidonStart(Intentintent){
super.onStart(intent);

initialize();
}

publicvoidinitialize(){
layout=newDirectionalLayout(this);
grids=newint[][]{{1,2,3,4},{5,6,7,8,},{9,10,11,12},{13,14,15,0}};
}

然后定義函數(shù) drawGrids(int[][] grids) 用于繪制 4*4 方陣和其二維數(shù)組對(duì)應(yīng)的數(shù)字：

publicvoiddrawGrids(int[][]grids){
layout.setLayoutConfig((newComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,ComponentContainer.LayoutConfig.MATCH_PARENT)));

Component.DrawTasktask=newComponent.DrawTask(){
publicvoidonDraw(Componentcomponent,Canvascanvas){
PaintmPaint=newPaint();

mPaint.setColor(Color.GRAY);
RectFloatrect=newRectFloat(2,230,1078,1306);
canvas.drawRect(rect,mPaint);

for(introw=0;row4;row++){
for(intcolumn=0;column4;column++){
mPaint.setColor(Color.CYAN);
RectFloatrectFloat=newRectFloat(22+column*262,250+row*262,272+column*262,500+row*262);
canvas.drawRect(rectFloat,mPaint);

mPaint.setColor(Color.YELLOW);
mPaint.setTextSize(125);
if(grids[row][column]!=0){
if(grids[row][column]<10){
canvas.drawText(mPaint,String.valueOf(grids[row][column]),105+column*262,425+row*262);
}
else{
canvas.drawText(mPaint,String.valueOf(grids[row][column]),65+column*262,425+row*262);
}
}
}
}
}
};
layout.addDrawTask(task);
setUIContent(layout);
}

再定義函數(shù) changeGrids(int[][] grids,int direction)，每次接收一個(gè)方向，2 表示上移，-1 表示左移，1 表示右移，-2 表示下移，找出空白方格所在位置對(duì)應(yīng)的二維數(shù)組下標(biāo)，對(duì)應(yīng)的方格和空白方格對(duì)應(yīng)的二維數(shù)組的數(shù)值對(duì)調(diào)：

publicvoidchangeGrids(int[][]grids,intdirection){
introw_0=3;
intcolumn_0=3;
inttemp;
for(introw=0;row4;row++){
for(intcolumn=0;column4;column++){
if(grids[row][column]==0){
row_0=row;
column_0=column;
}
}
}
if(direction==-1&&(column_0+1)<=?3){
temp=grids[row_0][column_0+1];
grids[row_0][column_0+1]=grids[row_0][column_0];
grids[row_0][column_0]=temp;
}elseif(direction==1&&(column_0-1)>=0){
temp=grids[row_0][column_0-1];
grids[row_0][column_0-1]=grids[row_0][column_0];
grids[row_0][column_0]=temp;
}elseif(direction==2&&(row_0+1)<=3){
temp=grids[row_0+1][column_0];
grids[row_0+1][column_0]=grids[row_0][column_0];
grids[row_0][column_0]=temp;
}elseif(direction==-2&&(row_0-1)>=0){
temp=grids[row_0-1][column_0];
grids[row_0-1][column_0]=grids[row_0][column_0];
grids[row_0][column_0]=temp;
}
}

定義函數(shù) createGrids(int[][] grids) 用于隨機(jī)生成一個(gè)表示方向的數(shù)字，循環(huán)調(diào)用函數(shù) changeGrids(grids,direction) 用于隨機(jī)打亂二維數(shù)組對(duì)應(yīng)的數(shù)字：

publicvoidcreateGrids(int[][]grids){
int[]array={-1,-2,1,2};

for(inti=0;i100;i++){
intrandom=(int)Math.floor(Math.random()*4);
intdirection=array[random];
changeGrids(grids,direction);
}
}

最后在 initialize() 函數(shù)中調(diào)用 createGrids(grids) 函數(shù)和 drawGrids(grids) 函數(shù)：

publicvoidinitialize(){
layout=newDirectionalLayout(this);
grids=newint[][]{{1,2,3,4},{5,6,7,8,},{9,10,11,12},{13,14,15,0}};
createGrids(grids);
drawGrids(grids);
}

04

實(shí)現(xiàn)滑動(dòng)或點(diǎn)擊調(diào)換數(shù)字

添加“重新開始”和“返回”按鈕，在最下方添加四個(gè)指示不同方向箭頭的按鈕，點(diǎn)擊任一按鈕或向上、下、左、右任一方向滑動(dòng)，空白方格周圍對(duì)應(yīng)位置的方格便會(huì)隨之向?qū)?yīng)的方向移動(dòng)一格。

在 entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice 編寫代碼。

先定義一個(gè)函數(shù) drawButton() 用于繪制所有的按鈕，四個(gè)指示不同方向箭頭的按鈕分別添加四個(gè)響應(yīng)點(diǎn)擊事件的函數(shù)。

publicvoiddrawButton(){

Buttonbutton=newButton(this);
button.setText("重新開始");
button.setTextSize(100);
button.setTextAlignment(TextAlignment.CENTER);
button.setTextColor(Color.WHITE);
button.setMarginTop(1400);
button.setMarginLeft(80);
button.setPadding(20,20,20,20);
ShapeElementbackground=newShapeElement();
background.setRgbColor(newRgbColor(174,158,143));
background.setCornerRadius(100);
button.setBackground(background);
layout.addComponent(button);

Buttonbutton0=newButton(this);
button0.setText("返回");
button0.setTextSize(100);
button0.setTextAlignment(TextAlignment.CENTER);
button0.setTextColor(Color.WHITE);
button0.setMarginTop(-170);
button0.setMarginLeft(680);
button0.setPadding(20,20,20,20);
button0.setBackground(background);
layout.addComponent(button0);


ShapeElementbackground0=newShapeElement();
background0.setRgbColor(newRgbColor(174,158,143));
background0.setCornerRadius(100);

Buttonbutton1=newButton(this);
button1.setText("↑");
button1.setTextAlignment(TextAlignment.CENTER);
button1.setTextColor(Color.WHITE);
button1.setTextSize(100);
button1.setMarginLeft(500);
button1.setMarginTop(70);
button1.setPadding(10,0,10,0);
button1.setBackground(background0);
button1.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
changeGrids(grids,2);
}
});
layout.addComponent(button1);

Buttonbutton2=newButton(this);
button2.setText("←");
button2.setTextAlignment(TextAlignment.CENTER);
button2.setTextColor(Color.WHITE);
button2.setTextSize(100);
button2.setMarginTop(10);
button2.setMarginLeft(400);
button2.setPadding(10,0,10,0);
button2.setBackground(background0);
button2.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
changeGrids(grids,-1);
}
});
layout.addComponent(button2);

Buttonbutton3=newButton(this);
button3.setText("→");
button3.setTextAlignment(TextAlignment.CENTER);
button3.setTextColor(Color.WHITE);
button3.setTextSize(100);
button3.setMarginLeft(600);
button3.setMarginTop(-130);
button3.setPadding(10,0,10,0);
button3.setBackground(background0);
button3.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
changeGrids(grids,1);
}
});
layout.addComponent(button3);

Buttonbutton4=newButton(this);
button4.setText("↓");
button4.setTextAlignment(TextAlignment.CENTER);
button4.setTextColor(Color.WHITE);
button4.setTextSize(100);
button4.setMarginLeft(500);
button4.setMarginTop(10);
button4.setPadding(10,0,10,0);
button4.setBackground(background0);
button4.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
changeGrids(grids,-2);
}
});
layout.addComponent(button4);

drawGrids(grids);
}

然后添加一個(gè)函數(shù) slideGrids() 為布局 layout 添加一個(gè)滑動(dòng)事件，并獲取滑動(dòng)開始與結(jié)束的坐標(biāo)，并計(jì)算出大致的滑動(dòng)方向，分別調(diào)用對(duì)應(yīng)的 changeGrids(grids,direction) 函數(shù)實(shí)現(xiàn)空白方格周圍對(duì)應(yīng)位置的方格便會(huì)隨之向?qū)?yīng)的方向移動(dòng)一格，并調(diào)用 drawGrids(grids) 函數(shù)用于繪制新的方陣，并在開頭添加相應(yīng)的變量：

privatefloatstarX,starY,distanceX,distanceY;

publicvoidslideGrids(){
layout.setTouchEventListener(newComponent.TouchEventListener(){
@Override
publicbooleanonTouchEvent(Componentcomponent,TouchEventtouchEvent){
MmiPointpoint=touchEvent.getPointerScreenPosition(0);

switch(touchEvent.getAction()){
caseTouchEvent.PRIMARY_POINT_DOWN:
starX=point.getX();
starY=point.getY();
break;
caseTouchEvent.PRIMARY_POINT_UP:
distanceX=point.getX()-starX;
distanceY=point.getY()-starY;
break;
}
if(gameover()==false){
if(Math.abs(distanceX)>Math.abs(distanceY)){
if(distanceX>200){
changeGrids(grids,1);
}elseif(distanceX-200){
changeGrids(grids,-1);

}
}elseif(Math.abs(distanceX)abs(distanceY)){
if(distanceY>200){
changeGrids(grids,-2);
}elseif(distanceY-200){
changeGrids(grids,2);
}
}
}
drawGrids(grids);

returnfalse;
}
});
}

最后在 initialize() 函數(shù)中調(diào)用 slideGrids() 函數(shù)和 drawButton() 函數(shù)：

publicvoidinitialize(){
layout=newDirectionalLayout(this);
grids=newint[][]{{1,2,3,4},{5,6,7,8,},{9,10,11,12},{13,14,15,0}};
createGrids(grids);
slideGrids();
drawButton();
drawGrids(grids);
}

05

實(shí)現(xiàn)游戲成功界面

點(diǎn)擊“重新開始”按鈕即會(huì)重新生成隨意打亂的 1 至 15 的數(shù)字和一個(gè)空白方格的方陣，點(diǎn)擊“返回”按鈕即會(huì)切換到數(shù)字華容道的初始界面，經(jīng)過若干次滑動(dòng)或點(diǎn)擊后，當(dāng)所有的數(shù)字按順序排列后，則會(huì)彈出游戲成功的界面，再滑動(dòng)或點(diǎn)擊也不會(huì)有任何變化。

在 entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice 編寫代碼。

首先定義一個(gè)函數(shù) drawText() 用于繪制游戲成功字樣：

publicvoiddrawText(){
Texttext=newText(this);
text.setText("游戲成功");
text.setTextSize(100);
text.setTextColor(Color.BLUE);
text.setTextAlignment(TextAlignment.CENTER);
text.setMarginsTopAndBottom(-2000,0);
text.setMarginsLeftAndRight(350,0);
layout.addComponent(text);
setUIContent(layout);

}

然后定義一個(gè)函數(shù) gameover() 用于判斷二維數(shù)組的數(shù)字是否按順序排列，當(dāng)二維數(shù)組的數(shù)字按順序排列時(shí)返回 true，否則返回 false：

publicbooleangameover(){
int[][]gameoverGrids={{1,2,3,4},{5,6,7,8,},{9,10,11,12},{13,14,15,0}};
for(introw=0;row4;row++){
for(intcolumn=0;column4;column++){
if(grids[row][column]!=gameoverGrids[row][column]){
returnfalse;
}
}
}

returntrue;
}

再在 drawButton() 函數(shù)中重新開始按鈕中添加一個(gè)響應(yīng)點(diǎn)擊事件的函數(shù)，用于調(diào)用函數(shù) initialize() 實(shí)現(xiàn)重新生成隨意打亂的 1 至 15 的數(shù)字和一個(gè)空白方格的方陣，返回按鈕中添加一個(gè)響應(yīng)點(diǎn)擊事件的函數(shù)，用 parsen 函數(shù)返回?cái)?shù)字華容道的初始界面，四個(gè)指示不同方向箭頭的按鈕的響應(yīng)點(diǎn)擊事件的函數(shù)中增加一個(gè)判斷，當(dāng)函數(shù) gameover（） 返回為 false 時(shí)才調(diào)用各自的 changeGrids(grids,direction) 函數(shù)，最后增加一個(gè)判斷，當(dāng)函數(shù) gameover（） 返回為 true 時(shí)調(diào)用函數(shù) drawText()：

publicvoiddrawButton(){//部分代碼沒有貼出，可自行下載源代碼查看

button.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
initialize();
}
});

button0.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
present(newSecondAbilitySlice(),newIntent());
}
});

button1.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
if(gameover()==false){
changeGrids(grids,2);
}
}
});

button2.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
if(gameover()==false){
changeGrids(grids,-1);
}
}
});

button3.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
if(gameover()==false){
changeGrids(grids,1);
}
}
});

button4.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
if(gameover()==false){
changeGrids(grids,-2);
}
}
});

if(gameover()){
drawText();
}
}

在函數(shù) slideGrids() 函數(shù)中增加一個(gè)判斷，當(dāng)函數(shù) gameover（） 返回為 false 時(shí)才調(diào)用 changeGrids(grids,direction) 函數(shù)，最后增加一個(gè)判斷，當(dāng)函數(shù) gameover（） 返回為 true 時(shí)調(diào)用函數(shù) drawText()：

publicvoidslideGrids(){//部分代碼沒有貼出，可自行下載源代碼查看
if(gameover()==false){
//{...}
}
if(gameover()){
drawText();
}
}

06

結(jié)語

此前已經(jīng)在運(yùn)動(dòng)手表上成功開發(fā)了：HarmonyOS 運(yùn)動(dòng)手表游戲合并、HarmonyOS 手表游戲——數(shù)字華容道，同樣是深鴻會(huì)深大小組學(xué)習(xí)完 HarmonyOS 后自行開發(fā)的一個(gè)鴻蒙 demo，詳細(xì)講述了數(shù)字華容道在鴻蒙手機(jī)上開發(fā)思路。

深鴻會(huì)深大學(xué)習(xí)小組是一群熱衷于學(xué)習(xí)鴻蒙相關(guān)知識(shí)和開發(fā)鴻蒙相關(guān)應(yīng)用的開發(fā)者們，我們的學(xué)習(xí)項(xiàng)目為：荔園 Harmony、Awesome-HarmonyOS_木棉花，同時(shí)也歡迎與各位感興趣的讀者一起學(xué)習(xí) HarmonyOS 開發(fā)，相互交流、共同進(jìn)步。