鸿蒙上实现“数字华容道”小游戏

本篇文章教大家如何在鸿蒙上实现“数字华容道”小游戏。

(1)打开引用首先为数字华容道的初始界面，点击开始游戏即会切换到数字华容道的游戏界面。

(2)进入数字华容道的游戏界面显示3*3的方阵，方阵中分布有随意打乱的1至8的数字和一个空白方格，方阵下方显示一个“重新开始”的按钮和一个“返回”按钮。

点击“重新开始”按钮即会重新生成随意打乱的1至8的数字和一个空白方格的方阵，点击“返回”按钮即会切换到数字华容道的初始界面，最下方有四个指示不同方向箭头的按钮，点击任一按钮或向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格。

(3)经过若干次滑动或点击后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动或点击也不会有任何变化。

创建项目

DevEcoStudio下载安装成功后，打开DevEcoStudio，点击左上角的File，点击New，再选择NewProject，选择Phone选项，选择默认的模板，然后选择保存路径。

将文件命名为MyPhoneApplication（文件名不能出现中文或者特殊字符，否则将无法成功创建项目文件），最后点击Finish。

实现初始界面布局

首先，我们要先实现数字华容道的初始界面，点击开始游戏即会切换到另一页面。

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

并且将上方的“label”：“MyPhoneApplication”修改成"label”:“数字华容道”，这样就实现去掉应用上方的标题栏和将应用名称改为数字华容道了。

config.json最下面部分代码：

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

(2)先将我们事先准备好的图片复制粘贴到entry>src>main>resources>base>media文件夹中，并且命名为game，点击OK。

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

先将事先存在的Text组件删去，添加Image图片组件，引入我们刚才复制粘贴的图片，再添加一个Button按钮组件，加入唯一标识符id并配置好其他相应的属性。

(3)在entry>src>main>java>com.example.myphoneapplication>slice中右键选择New>JavaClass增加一个空白的类以用来后面编写数字。

华容道的游戏界面，并且命名为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);}@OverridepublicvoidonActive(){super.onActive();}@OverridepublicvoidonForeground(Intentintent){super.onForeground(intent);}}(4)在下面代码中的onStart函数中添加一个按钮指向我们（2）中添加的按钮。

entry>src>main>java>com.example.myphoneapplication>slice>MainAbilitySlice按钮添加一个响应点击事件的函数，用parsent函数跳转到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{@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);Buttonbutton=(Button)findComponentById(ResourceTable.Id_button_game);button.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){present(newSecondAbilitySlice(),newIntent());}});}@OverridepublicvoidonActive(){super.onActive();}@OverridepublicvoidonForeground(Intentintent){super.onForeground(intent);}}实现数字的随机打乱

然后我们要在数字华容道的游戏界面生成随意打乱的1至15的数字和一个空白方格的方阵。

在这里编写代码：

entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice先定义个一个位置布局layout和一个二维数组grids，创建函数initializeinitialize()分别对其初始化，在onStart函数中调用函数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}};}然后定义函数drawGrids(int[][]grids)用于绘制4*4方阵和其二维数组对应的数字。

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<4;row++){for(intcolumn=0;column<4;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);}再定义函数changeGrids(int[][]grids,intdirection)，每次接收一个方向，2表示上移，-1表示左移，1表示右移，-2表示下移，找出空白方格所在位置对应的二维数组下标，对应的方格和空白方格对应的二维数组的数值对调。

publicvoidchangeGrids(int[][]grids,intdirection){introw_0=3;intcolumn_0=3;inttemp;for(introw=0;row<4;row++){for(intcolumn=0;column<4;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;}}定义函数createGrids(int[][]grids)用于随机生成一个表示方向的数字，循环调用函数changeGrids(grids,direction)用于随机打乱二维数组对应的数字。

publicvoidcreateGrids(int[][]grids){int[]array={-1,-2,1,2};for(inti=0;i<100;i++){intrandom=(int)Math.floor(Math.random()*4);intdirection=array[random];changeGrids(grids,direction);}}最后在initialize()函数中调用createGrids(grids)函数和drawGrids(grids)函数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);}实现滑动或点击调换数字

添加“重新开始”和“返回”按钮，在每个方块下面添加不同方向箭头的按钮，点击方块并向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格。

在这里编写代码：

entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice先定义一个函数drawButton()用于绘制所有的按钮，四个指示不同方向箭头的按钮分别添加四个响应点击事件的函数。

分别调用对应的changeGrids(grids,direction)函数实现空白方格周围对应位置的方格便会随之向对应的方向移动一格，并调用drawGrids(grids)函数用于绘制新的方阵。

publicvoiddrawButton(){Buttonbuttnotallow=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(){@OverridepublicvoidonClick(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(){@OverridepublicvoidonClick(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(){@OverridepublicvoidonClick(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(){@OverridepublicvoidonClick(Componentcomponent){changeGrids(grids,-2);}});layout.addComponent(button4);drawGrids(grids);}然后添加一个函数slideGrids()为布局layout添加一个滑动事件，并获取滑动开始与结束的坐标，并计算出大致的滑动方向。

分别调用对应的changeGrids(grids,direction)函数实现空白方格周围对应位置的方格便会随之向对应的方向移动一格，并调用drawGrids(grids)函数用于绘制新的方阵，并在开头添加相应的变量。

privatefloatstarX,starY,distanceX,distanceY;publicvoidslideGrids(){layout.setTouchEventListener(newComponent.TouchEventListener(){@OverridepublicbooleanonTouchEvent(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)200){changeGrids(grids,-2);}elseif(distanceY<-200){changeGrids(grids,2);}}}drawGrids(grids);returnfalse;}});}最后在initialize()函数中调用slideGrids()函数和drawButton()函数。

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);}实现游戏成功界面

点击“重新开始”按钮即会重新生成随意打乱的1至15的数字和一个空白方格的方阵，点击“返回”按钮即会切换到数字华容道的初始界面。

经过若干次滑动或点击后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动或点击也不会有任何变化。

在这里编写代码：

entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice首先定义一个函数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);}然后定义一个函数gameover()用于判断二维数组的数字是否按顺序排列，当二维数组的数字按顺序排列时返回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<4;row++){for(intcolumn=0;column<4;column++){if(grids[row][column]!=gameoverGrids[row][column]){returnfalse;}}}returntrue;}再在drawButton()函数中重新开始按钮中添加一个响应点击事件的函数，用于调用函数initialize()实现重新生成随意打乱的1至15的数字和一个空白方格的方阵，返回按钮中添加一个响应点击事件的函数。

用parsen函数返回数字华容道的初始界面，四个指示不同方向箭头的按钮的响应点击事件的函数中增加一个判断。

当函数gameover（）返回为false时才调用各自的changeGrids(grids,direction)函数。

最后增加一个判断，当函数gameover（）返回为true时调用函数drawText()。

publicvoiddrawButton(){//部分代码没有贴出，可自行下载源代码查看button.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){initialize();}});button0.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){present(newSecondAbilitySlice(),newIntent());}});button1.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){if(gameover()==false){changeGrids(grids,2);}}});button2.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){if(gameover()==false){changeGrids(grids,-1);}}});button3.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){if(gameover()==false){changeGrids(grids,1);}}});button4.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){if(gameover()==false){changeGrids(grids,-2);}}});if(gameover()){drawText();}}在函数slideGrids()函数中增加一个判断，当函数gameover（）返回为false时才调用changeGrids(grids,direction)函数，最后增加一个判断，当函数gameover（）返回为true时调用函数drawText()。

publicvoidslideGrids(){//部分代码没有贴出，可自行下载源代码查看if(gameover()==false){//{...}}if(gameover()){drawText();}}