本篇文章教大家如何在鴻蒙上實(shí)現(xiàn)“數(shù)字華容道”小游戲。

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

②進(jìn)入數(shù)字華容道的游戲界面顯示 3*3 的方陣，方陣中分布有隨意打亂的 1 至 8 的數(shù)字和一個空白方格，方陣下方顯示一個“重新開始”的按鈕和一個“返回”按鈕。

點(diǎn)擊“重新開始”按鈕即會重新生成隨意打亂的 1 至 8 的數(shù)字和一個空白方格的方陣，點(diǎn)擊“返回”按鈕即會切換到數(shù)字華容道的初始界面，最下方有四個指示不同方向箭頭的按鈕，點(diǎn)擊任一按鈕或向上、下、左、右任一方向滑動，空白方格周圍對應(yīng)位置的方格便會隨之向?qū)?yīng)的方向移動一格。

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

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

DevEco Studio 下載安裝成功后，打開 DevEco Studio，點(diǎn)擊左上角的 File，點(diǎn)擊 New，再選擇 New Project，選擇 Phone 選項(xiàng)，選擇默認(rèn)的模板，然后選擇保存路徑。

將文件命名為 MyPhoneApplication（文件名不能出現(xiàn)中文或者特殊字符，否則將無法成功創(chuàng)建項(xiàng)目文件），最后點(diǎn)擊 Finish。

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

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

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

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

config.json 最下面部分代碼：

"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 文件夾中，并且命名為 game，點(diǎn)擊 OK。

在 entry>src>main>resources>base>layout>ability_main.xml 中添加布局。 先將事先存在的 Text 組件刪去，添加 Image 圖片組件，引入我們剛才復(fù)制粘貼的圖片，再添加一個 Button 按鈕組件，加入唯一標(biāo)識符 id 并配置好其他相應(yīng)的屬性。

③在 entry>src>main>java>com.example.myphoneapplication>slice 中右鍵選擇 New>Java Class 增加一個空白的類以用來后面編寫數(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);
}
}

④在下面代碼中的 onStart 函數(shù)中添加一個按鈕指向我們（2）中添加的按鈕。

entry>src>main>java>com.example.myphoneapplication>slice>MainAbilitySlice

按鈕添加一個響應(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);
}
}

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

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

在這里編寫代碼：

entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice

先定義個一個位置布局 layout 和一個二維數(shù)組 grids，創(chuàng)建函數(shù) initializeinitialize() 分別對其初始化，在 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ù)組對應(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;row
 再定義函數(shù) changeGrids(int[][] grids,int direction)，每次接收一個方向，2 表示上移，-1 表示左移，1 表示右移，-2 表示下移，找出空白方格所在位置對應(yīng)的二維數(shù)組下標(biāo)，對應(yīng)的方格和空白方格對應(yīng)的二維數(shù)組的數(shù)值對調(diào)。
publicvoidchangeGrids(int[][]grids,intdirection){
introw_0=3;
intcolumn_0=3;
inttemp;
for(introw=0;row=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;
????????}?else?if?(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ī)生成一個表示方向的數(shù)字，循環(huán)調(diào)用函數(shù) changeGrids(grids,direction) 用于隨機(jī)打亂二維數(shù)組對應(yīng)的數(shù)字。

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

for(inti=0;i
 

	

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

	添加“重新開始”和“返回”按鈕，在每個方塊下面添加不同方向箭頭的按鈕，點(diǎn)擊方塊并向上、下、左、右任一方向滑動，空白方格周圍對應(yīng)位置的方格便會隨之向?qū)?yīng)的方向移動一格。

	

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


	

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

	分別調(diào)用對應(yīng)的 changeGrids(grids,direction) 函數(shù)實(shí)現(xiàn)空白方格周圍對應(yīng)位置的方格便會隨之向?qū)?yīng)的方向移動一格，并調(diào)用 drawGrids(grids) 函數(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);
}

 然后添加一個函數(shù) slideGrids() 為布局 layout 添加一個滑動事件，并獲取滑動開始與結(jié)束的坐標(biāo)，并計(jì)算出大致的滑動方向。

	

	分別調(diào)用對應(yīng)的 changeGrids(grids,direction) 函數(shù)實(shí)現(xiàn)空白方格周圍對應(yīng)位置的方格便會隨之向?qū)?yī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(distanceX200){
changeGrids(grids,-2);
}elseif(distanceY

	

	最后在 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);
}

 

	

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

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

	在這里編寫代碼：

	
entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice

 首先定義一個函數(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);
}


	

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

	

	最后增加一個判斷，當(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ù)中增加一個判斷，當(dāng)函數(shù) gameover（） 返回為 false 時(shí)才調(diào)用 changeGrids(grids,direction) 函數(shù)，最后增加一個判斷，當(dāng)函數(shù) gameover（） 返回為 true 時(shí)調(diào)用函數(shù) drawText()。
publicvoidslideGrids(){//部分代碼沒有貼出，可自行下載源代碼查看
if(gameover()==false){
//{...}
}
if(gameover()){
drawText();
}
}


	

	

	審核編輯：湯梓紅