鸿蒙数字华容道小项目

中原工学院软件学院

项你而去（菜鸡勿喷）。

华容道是三国演义中一个非常有名的桥段，曹操赤壁大败后率残兵败将，想回到许昌以图东山再起，然而却被诸葛亮派遣的关羽在华容道截住，关羽义薄云天，因曹操曾有恩于他，不忍杀之，遂让兵士让出道路放走曹操。

如今，铁马金戈已逝，关羽、曹操皆已不在。然而华容道却被很人改编成了游戏。这个游戏相对简单，而如今，我们就用代码来浅浅回顾这一段史事。

卸下包袱，直入主题。

建项目直接略过，咱直接从页面布局入手

这边修饰之后，最后的样子是这样（按钮做的小了点）咱就是说，这双大眼睛咱也不舍得用东西压住。觉得按钮较小可以修改，见Button中ohos：height与weight，可以改成大点的按钮，这里的属性可以选择。图片在文件夹media中。图片当然可以换成自己喜欢的图片，也可以换成与华容道有关的图片。

布局较为简单。用的原件也比较基础，一个Button，一个Image。

首页ability代码如下。

其中主要包括一个button原件，用来切换页面。使用的是find，转换到第二个ability上面

public class MainAbilitySlice extends AbilitySlice {    public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Button button1 = (Button) findComponentById(ResourceTable.Id_button_game); button1.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  present(new SecondAbilitySlice(),new Intent());     } });    }    @Override    public void onActive() { super.onActive();    }    @Override    public void onForeground(Intent intent) { super.onForeground(intent);    }}

点击开始游戏，即可进入游戏部分，这一部分图像如下图

技术有限，我也想过用图片来代替数字，奈何我天资愚钝，只得以简单方法来完成这部分的内容，button，layout。配色这方面我随便配的，大家可以用自己喜欢的颜色，黑色边框也可以修改的。

这一部分的内容全在secondability中

代码如下

public class SecondAbilitySlice extends AbilitySlice {    private float starX, starY, distanceX, distanceY;    private DirectionalLayout layout;    private int[][] grids;    public void onStart(Intent intent) { super.onStart(intent); initialize();    }    public void initialize(){ layout = new DirectionalLayout(this); grids = new int[][]{{1, 2, 3, 4}, {5, 6, 7, 8,}, {9, 10, 11, 12}, {13, 14, 15, 0}}; createGrids(grids); slideGrids(); drawButton(); drawGrids(grids);    }    public void createGrids(int[][] grids){ int[] array = {-1,-2,1,2}; for(int i = 0; i  Math.abs(distanceY)) {   if (distanceX > 200) {changeGrids(grids,1);   } else if (distanceX < -200) {changeGrids(grids,-1);   }      } else if (Math.abs(distanceX)  200) {changeGrids(grids,-2);   } else if (distanceY < -200) {changeGrids(grids,2);   }      }  }  drawGrids(grids);  if(gameover()){      drawText();  }  return false;     } });    }    public void drawGrids(int[][] grids){ layout.setLayoutConfig((new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,ComponentContainer.LayoutConfig.MATCH_PARENT))); Component.DrawTask task=new Component.DrawTask() {     public void onDraw(Component component, Canvas canvas) {  Paint mPaint = new Paint();  mPaint.setColor(Color.BLACK);  RectFloat rect=new RectFloat(2,230,1078,1306);  canvas.drawRect(rect,mPaint);  for(int row = 0; row < 4; row++){      for(int column = 0; column < 4; column++){   mPaint.setColor(new Color(Color.rgb(0,100,100)));   RectFloat rectFloat=new RectFloat(22+column*262,250+row*262,272+column*262,500+row*262);   canvas.drawRect(rectFloat,mPaint);   mPaint.setColor(new Color(Color.rgb(100,100,100)));   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);    }    public void drawButton(){ Button button=new Button(this); button.setText("重新开始"); button.setTextSize(80); button.setTextAlignment(TextAlignment.CENTER); button.setTextColor(Color.WHITE); button.setMarginTop(1400); button.setMarginLeft(80); button.setPadding(20,20,20,20); ShapeElement background = new ShapeElement(); background.setRgbColor(new RgbColor(0, 191, 255)); background.setCornerRadius(80); button.setBackground(background); button.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  initialize();     } }); layout.addComponent(button); Button button0=new Button(this); button0.setText("返回"); button0.setTextSize(80); button0.setTextAlignment(TextAlignment.CENTER); button0.setTextColor(Color.WHITE); button0.setMarginTop(-170); button0.setMarginLeft(680); button0.setPadding(20,20,20,20); button0.setBackground(background); button0.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  present(new SecondAbilitySlice(),new Intent());     } }); layout.addComponent(button0); ShapeElement background0 = new ShapeElement(); background0.setRgbColor(new RgbColor(0, 191, 255)); background0.setCornerRadius(100); Button button1=new Button(this); button1.setText("↑"); button1.setTextAlignment(TextAlignment.CENTER); button1.setTextColor(Color.BLACK); button1.setTextSize(100); button1.setMarginLeft(500); button1.setMarginTop(70); button1.setPadding(10,0,10,0); button1.setBackground(background0); button1.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  if (gameover() == false){      changeGrids(grids,2);  }     } }); layout.addComponent(button1); Button button2=new Button(this); button2.setText("←"); button2.setTextAlignment(TextAlignment.CENTER); button2.setTextColor(Color.BLACK); button2.setTextSize(100); button2.setMarginTop(10); button2.setMarginLeft(400); button2.setPadding(10,0,10,0); button2.setBackground(background0); button2.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  if (gameover() == false){      changeGrids(grids,-1);  }     } }); layout.addComponent(button2); Button button3=new Button(this); button3.setText("→"); button3.setTextAlignment(TextAlignment.CENTER); button3.setTextColor(Color.BLACK); button3.setTextSize(100); button3.setMarginLeft(600); button3.setMarginTop(-130); button3.setPadding(10,0,10,0); button3.setBackground(background0); button3.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  if (gameover() == false){      changeGrids(grids,1);  }     } }); layout.addComponent(button3); Button button4=new Button(this); button4.setText("↓"); button4.setTextAlignment(TextAlignment.CENTER); button4.setTextColor(Color.BLACK); button4.setTextSize(100); button4.setMarginLeft(500); button4.setMarginTop(10); button4.setPadding(10,0,10,0); button4.setBackground(background0); button4.setClickedListener(new Component.ClickedListener() {     @Override     public void onClick(Component component) {  if (gameover() == false){      changeGrids(grids,-2);  }     } }); layout.addComponent(button4); drawGrids(grids); if(gameover()){     drawText(); }    }    public void changeGrids(int[][] grids,int direction){ int row_0 = 3; int column_0 = 3; int temp; for(int row = 0; row < 4; row++) {     for (int column = 0; column < 4; column++) {  if(grids[row][column] == 0){      row_0 = row;      column_0 = column;  }     } } if(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; } 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; }    }    public boolean gameover() { int[][] gameoverGrids = {{1, 2, 3, 4}, {5, 6, 7, 8,}, {9, 10, 11, 12}, {13, 14, 15, 0}}; for (int row = 0; row < 4; row++) {     for (int column = 0; column < 4; column++) {  if (grids[row][column] != gameoverGrids[row][column]) {      return false;  }     } } return true;    }    public void drawText(){ Text text=new Text(this); text.setText("游戏成功"); text.setTextSize(100); text.setTextColor(Color.RED); text.setTextAlignment(TextAlignment.CENTER); text.setMarginsTopAndBottom(-2000,0); text.setMarginsLeftAndRight(350,0); layout.addComponent(text); setUIContent(layout);    }    @Override    public void onActive() { super.onActive();    }    @Override    public void onForeground(Intent intent) { super.onForeground(intent);    }}

 这部分代码中，编辑了按钮样式，以及颜色配置还有所有的活动形式。其中数组部分采用的是二维数组的形式。

上下左右四个箭头分别代表的是空格子上下左右的四个方格，以下箭头按钮为例，当点击上的时候，空格子下面的一个方格平移到空格子的位置，这样空格就下移了一个格子，当空格子在边缘时，点击按钮时会进行一个判断，看数组是否越界。当完成游戏后，会出现红色字样，提示你游戏成功。

ps：我还没赢过，就不展示结束的图啦。代码中有这一部分内容，见drawText().

配置及其他代码如下。

  "string": [    {      "name": "app_name",      "value": "MyPnone2"    },    {      "name": "mainability_description",      "value": "Java_Phone_Empty Feature Ability"    }  ]}

{  "app": {    "bundleName": "com.example.mypnone2",    "vendor": "example",    "version": {      "code": 1,      "name": "1.0"    },    "apiVersion": {      "compatible": 3,      "target": 4,      "releaseType": "Beta1"    }  },  "deviceConfig": {},  "module": {    "package": "com.example.mypnone2",    "name": ".MyApplication",    "deviceType": [      "phone"    ],    "distro": {      "deliveryWithInstall": true,      "moduleName": "entry",      "moduleType": "entry"    },    "abilities": [      { "skills": [   {     "entities": ["entity.system.home"     ],     "actions": ["action.system.home"     ]   } ], "orientation": "unspecified", "name": "com.example.mypnone2.MainAbility", "icon": "$media:icon", "description": "$string:mainability_description", "label": "$string:app_name", "type": "page", "launchType": "standard", "metaData": {   "customizeData": [     {"name": "hwc-theme","value": "androidhwext:style/Theme.Emui.Light.NoTitleBar","extra": ""     }   ] }      }    ]  }}