返回发烧友论坛
发 帖  

[文章]【木棉花】学习笔记--分布式数字华容道（中）

jf_62992433
2021-09-22 14:20:57
阅读量0
学习笔记
1
6


前言
     嘿嘿，我又来啦。看过我的学习笔记–分布式数字华容道（上）的同学，有没有感觉到自己写一个游戏不再是那么可望而不可及的事，是不是感觉自己写一个游戏的难度不再是不可想象的了。那我们上一篇学习笔记就是给这个分布式数字华容道写了一个主要的框架，创建了一些页面还有完成一些前期的工作。那我们今天就在上一篇学习笔记的基础之上，再继续编写个人游戏的游戏界面。也请下载学习笔记–分布式数字华容道（上）完之后跟着我一步一步来编写我们的游戏吧。
      那为了大家更好地熟练掌握鸿蒙手机应用开发，为了供大家更方便的学习鸿蒙手机的应用开发，我会将所有的笔记都整理到Awesome-HarmonyOS_木棉花，更多详细学习资料请查看Awesome-HarmonyOS_木棉花。也请关注我们这个项目，我们会持续更新的，会帮大家把资料都整理好更便于大家的学习。
那现在就先开始我们这星期的西之旅吧！



正文
     那我们这个单人模式除了游戏功能还需要包括什么功能呢，那暂停开始键是必不可少的吧，那完成之后想继续玩的话是不是就需要一个重新开始的功能，那肯定是还包括一个返回按钮的吧，那既然是分布式游戏，是不是就需要整点和分布式相关的功能，没错我们还要实现一个游戏的迁移功能，还有一个计时和保存记录的功能。咋一看有没有感觉这功能有点多，不知道从何下手呀，没事我们一步一步来。
游戏功能
     那我们最开始就需要来完成我们的游戏功能了，这是后面那些功能的基础吧。
我们一开始是需要先画一个画布出来，把画布的背景设置成赤红色的，如果再根据传输的阶数的值来画出方格来。那我们就先是需要定义一些变量了。
  1.     private static int single;
  2.     private DirectionalLayout layout;
  3.     private static int length;
  4.     private static final int interval = 5;
  5.     private static final int left = 32;
  6.     private static final int top = 300;
  7.     private static final int margin = 15;
  8.     private static int[][] grids;
  9.     private float startX;
  10.     private float startY;
  11.     private static int row_0;
  12.     private static int column_0;
  13.     private static final HiLogLabel TAG = new HiLogLabel(HiLog.LOG_APP, 0x12345, "signal");
复制代码
     接着我们就需要写一个初始化的函数，用于初始化我们的二维数组，还有打乱二维数组中的值，那我这里就是产生一个随机数，0、1、2、3分别代表向上、下、左、右四个不同的方向打乱。那我们就先来完成这个打乱的函数吧。
  1.     public void createGrids() {
  2.         int i = 0;

  4.         while(i < single * single * 6){
  5.             int random = (int)Math.floor(Math.random() *4 );
  6.             int temp_row = row_0;
  7.             int tem_column = column_0;

  9.             if(random == 0){
  10.                 changeGrids(row_0 - 1, column_0);
  11.             }else if(random == 1){
  12.                 changeGrids(row_0 + 1, column_0);
  13.             }else if(random == 2){
  14.                 changeGrids(row_0, column_0 - 1);
  15.             }else if(random == 3){
  16.                 changeGrids(row_0, column_0 + 1);
  17.             }

  19.             if(temp_row != row_0 || tem_column != column_0){
  20.                 i++;
  21.             }
  22.         }
  23.     }
复制代码
     那在这个打乱函数中就涉及根据那个随机数来交换数组的内容，那交换的函数代码如下：
  1.     public void changeGrids(int i, int j) {
  2.         int temp;
  3.         if(0 <= i && i <= single - 1 && 0 <= j && j <= single - 1 ){
  4.             if((j - 1 == column_0 && i == row_0) || (j + 1 == column_0 && i == row_0) || (i - 1 == row_0 && j == column_0) || (i + 1 == row_0 && j == column_0)){
  5.                 temp = grids[i][j];
  6.                 grids[i][j] = grids[row_0][column_0];
  7.                 grids[row_0][column_0] = temp;
  8.                 row_0 = i;
  9.                 column_0 = j;
  10.             }
  11.         }
  12.     }
复制代码
     那接下来就是写一个根据这个数组的内容在画布上把这些数字画出来了。
  1.     public void drawGrids() {
  2.         layout.setLayoutConfig((new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT)));

  4.         Component.DrawTask task = new Component.DrawTask() {
  5.             @Override
  6.             public void onDraw(Component component, Canvas canvas) {
  7.                 Paint paint = new Paint();

  9.                 Color backcolor = new Color(Color.rgb(151,75,49));
  10.                 paint.setColor(backcolor);
  11.                 RectFloat rect = new RectFloat(left - margin, top - margin, length * single + interval * (single - 1) + left + margin, length * single + interval * (single - 1) + top + margin);
  12.                 canvas.drawRect(rect, paint);

  14.                 for (int row = 0; row < single; row++) {
  15.                     for (int column = 0; column < single; column++) {
  16.                         Color backgroundcolor = new Color(Color.rgb(229,188,132));
  17.                         if (grids[row][column] != 0) {
  18.                             paint.setColor(backgroundcolor);
  19.                             RectFloat rectFloat = new RectFloat(left + column * (length + interval), top + row * (length + interval), left + length + column * (length + interval), top + length + row * (length + interval));
  20.                             canvas.drawRect(rectFloat, paint);
  21.                         }

  23.                         Color numbercolor = new Color(Color.rgb(140,85,47));
  24.                         paint.setColor(numbercolor);
  25.                         paint.setTextSize(length / 2);
  26.                         if(grids[row][column] != 0){
  27.                             if(grids[row][column] < 10){
  28.                                 canvas.drawText(paint,Integer.toString(grids[row][column]),left + column * (length + interval) + length / 12 * 5,top + row * (length + interval) + length / 3 * 2);
  29.                             }else{
  30.                                 canvas.drawText(paint,Integer.toString(grids[row][column]),left + column * (length + interval) + length / 12 * 3,top + row * (length + interval) + length / 3 * 2);
  31.                             }
  32.                         }
  33.                     }
  34.                 }
  35.             }
  36.         };

  38.         layout.addDrawTask(task);
  39.         setUIContent(layout);
  40.     }
复制代码
     然后写完这几个函数，我们就在初始化函数中给数组开空间和设置画布中每个小方格的长度，并且调用这两个打乱还有画出数字的函数。
  1.     private void initialize() {
  2.         initDbManager();
  3.         if(!isMigrate) {
  4.             grids = new int[single][single];
  5.             getrecord();
  6.             for (int row = 0; row < single; row++) {
  7.                 for (int column = 0; column < single; column++) {
  8.                     grids[row][column] = single * row + column + 1;
  9.                 }
  10.             }
  11.             grids[single - 1][single - 1] = 0;
  12.             row_0 = single - 1;
  13.             column_0 = single - 1;
  14.             hour = 0;
  15.             min = 0;
  16.             sec = 0;
  17.             msec = 0;
  18.         }
  19.         layout = new DirectionalLayout(this);
  20.         length = 1020 / single - interval;
  21.         if (!isMigrate)
  22.             createGrids();
  23.         drawGrids();
  24.         draw();
  25.         swipeGrids();
  26.         isMigrate = false;
  27.     }
复制代码
     然后只要在onStart中调用这这个初始化函数就OK啦，那接下来就运行一下来查看我们的成果吧。

     那接下来我们就把按钮和时间给加上去，那还是一样的，先定义时间还有按钮的那些变量。
  1.     private static Text timetext;
  2.     private static Text maxtext;
  3.     private static int hour = 0;
  4.     private static int min = 0;
  5.     private static int sec = 0;
  6.     private static int msec = 0;
  7.     private static int maxhour = 23;
  8.     private static int maxmin = 59;
  9.     private static int maxsec = 59;
  10.     private static int maxmsec = 99;
  11.     private static String text = "暂停";
  12.     private static Button button_moveback;
  13.     private static String strhour = "";
  14.     private static String strmin = "";
  15.     private static String strsec = "";
  16.     private static String strmsec = "";
  17.     private static Timer timer;
  18.     private static final String str = "!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a";
  19.     private static boolean isMigrate = false;
复制代码
     然后为了让时间显示得更加好看，我们就让一位数的时间前面多加一个0，那我们就来写一个settime的函数吧。
  1.     private void settime(int msec, int sec, int min, int hour) {
  2.         if (msec < 10) {
  3.             strmsec = "0" + msec;
  4.         } else if (msec >= 10) {
  5.             strmsec = Integer.toString(msec);
  6.         }
  7.         if (sec < 10){
  8.             strsec = "0" + sec;
  9.         } else if (sec >= 10) {
  10.             strsec = Integer.toString(sec);
  11.         }
  12.         if (min < 10){
  13.             strmin = "0" + min;
  14.         } else if (min >= 10) {
  15.             strmin = Integer.toString(min);
  16.         }
  17.         if (hour < 10){
  18.             strhour = "0" + hour;
  19.         } else if (hour >= 10) {
  20.             strhour = Integer.toString(hour);
  21.         }
  22.     }
复制代码
     然后再写一个函数可以把那些按钮和时间给显示出来。
  1.     public void draw(){
  2.         maxtext = new Text(this);
  3.         settime(maxmsec, maxsec, maxmin, maxhour);
  4.         maxtext.setText("最短时间: "+ strhour + ":" + strmin + ":" + strsec + ":" + strmsec);
  5.         maxtext.setTextSize(80);
  6.         maxtext.setMarginTop(40);
  7.         maxtext.setMarginLeft(140);
  8.         layout.addComponent(maxtext);

  10.         timetext = new Text(this);
  11.         timetext.setText("time: " + strhour + ":" + strmin + ":" + strsec + ":" + strmsec);
  12.         timetext.setTextSize(80);
  13.         timetext.setMarginTop(10);
  14.         timetext.setMarginLeft(230);
  15.         layout.addComponent(timetext);

  17.         ShapeElement background = new ShapeElement();
  18.         background.setRgbColor(new RgbColor(138, 70, 50));
  19.         background.setCornerRadius(100);

  21.         Button button_again = new Button(this);
  22.         button_again.setText("重新开始");
  23.         button_again.setTextAlignment(TextAlignment.CENTER);
  24.         button_again.setTextColor(Color.WHITE);
  25.         button_again.setTextSize(100);
  26.         button_again.setMarginTop(1200);
  27.         button_again.setMarginLeft(160);
  28.         button_again.setPadding(30, 0, 30, 0);
  29.         button_again.setBackground(background);
  30.         layout.addComponent(button_again);

  32.         Button button_back = new Button(this);
  33.         button_back.setText("返回");
  34.         button_back.setTextAlignment(TextAlignment.CENTER);
  35.         button_back.setTextColor(Color.WHITE);
  36.         button_back.setTextSize(100);
  37.         button_back.setMarginLeft(700);
  38.         button_back.setMarginTop(-130);
  39.         button_back.setPadding(30, 0, 30, 0);
  40.         button_back.setBackground(background);
  41.         layout.addComponent(button_back);


  44.         Button button_migrate = new Button(this);
  45.         button_migrate.setText("迁移");
  46.         button_migrate.setTextAlignment(TextAlignment.CENTER);
  47.         button_migrate.setTextColor(Color.WHITE);
  48.         button_migrate.setTextSize(100);
  49.         button_migrate.setMarginLeft(260);
  50.         button_migrate.setMarginTop(100);
  51.         button_migrate.setPadding(30, 0, 30, 0);
  52.         button_migrate.setBackground(background);
  53.         layout.addComponent(button_migrate);

  55.         button_moveback = new Button(this);
  56.         button_moveback.setText(text);
  57.         button_moveback.setTextAlignment(TextAlignment.CENTER);
  58.         button_moveback.setTextColor(Color.WHITE);
  59.         button_moveback.setTextSize(100);
  60.         button_moveback.setMarginLeft(700);
  61.         button_moveback.setMarginTop(-130);
  62.         button_moveback.setPadding(30, 0, 30, 0);
  63.         button_moveback.setBackground(background);
  64.         layout.addComponent(button_moveback);

  66.         setUIContent(layout);
  67.     }
复制代码
     那接下去就是在初始化函数中调用我们的刚刚完成的draw函数。那这部分的工作就完成了，来运行一下查看效果吧。

      那我们接下去就来真正的实现游戏功能吧，就是点击数字，然后实现数组的相应数据的交换。
     那在完成这个之前，就需要先完成一个判断是否游戏成功的函数了。
  1.     public boolean gamesuccess() {
  2.         int[][] Grids = new int[single][single];
  3.         for (int row = 0; row < single; row++){
  4.             for (int column = 0; column < single; column++){
  5.                 Grids[row][column] = single * row + column + 1;
  6.             }
  7.         }
  8.         Grids[single - 1][single - 1] = 0;

  10.         for (int row = 0; row < single; row++){
  11.             for (int column = 0; column < single; column++){
  12.                 if(grids[row][column] != Grids[row][column]){
  13.                     return false;
  14.                 }
  15.             }
  16.         }

  18.         return true;
  19.     }
复制代码
     那我们点击的时候要是已经游戏成功了或者是暂停了，是不可以改变数据的，所以我们在交换数据之前需要判断是否已经游戏成功或者是已经暂停。
  1.     public void swipeGrids(){
  2.         layout.setTouchEventListener(new Component.TouchEventListener() {
  3.             @Override
  4.             public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  5.                 MmiPoint point = touchEvent.getPointerScreenPosition(0);

  7.                 switch (touchEvent.getAction()) {
  8.                     case TouchEvent.PRIMARY_POINT_DOWN:
  9.                         startX = point.getX();
  10.                         startY = point.getY();
  11.                         if (!gamesuccess() && text.equals("暂停")) {
  12.                             changeGrids((int)Math.floor((startY - top - 120) / (length + interval)), (int)Math.floor((startX - left) / (length + interval)));
  13.                             drawGrids();
  14.                         }
  15.                         break;
  16.                 }
  17.                 return true;
  18.             }
  19.         });
  20.     }
复制代码
      游戏功能完成了，接下来就是我们的计时了吧。我们需要写一个时间函数来计时，然后点击暂停的时候时间停止，点击开始的时候函数继续。
  1.     public void runing(){
  2.         timer = new Timer();
  3.         timer.schedule(new TimerTask() {
  4.             @Override
  5.             public void run() {
  6.                 getUITaskDispatcher().asyncDispatch(()->{
  7.                     if (text.equals("开始")) {
  8.                         button_moveback.setText(text);
  9.                         timer.cancel();
  10.                     }
  11.                     msec++;
  12.                     if (msec >= 100){
  13.                         sec++;
  14.                         msec = msec % 100;
  15.                         if (sec >= 60) {
  16.                             min++;
  17.                             sec = sec % 60;
  18.                             if (min >= 60) {
  19.                                 hour++;
  20.                                 min = min % 60;
  21.                             }
  22.                         }
  23.                     }
  24.                     settime(msec, sec, min, hour);
  25.                     timetext.setText("time: "+ strhour +":"+strmin+":"+strsec+":"+strmsec);
  26.                 });
  27.             }
  28.         },0,10);
  29.     }
复制代码
      接下来在暂停按钮那加一个点击事件，暂停的时候点击时间函数停止然后把文本设置为开始，开始的时候反过来。
  1.         button_moveback.setClickedListener(new Component.ClickedListener() {
  2.             @Override
  3.             public void onClick(Component component) {
  4.                 if (!gamesuccess()) {
  5.                     if (text.equals("暂停")) {
  6.                         timer.cancel();
  7.                         text = "开始";
  8.                     } else if (text.equals("开始")) {
  9.                         text = "暂停";
  10.                         runing();
  11.                     }
  12.                     button_moveback.setText(text);
  13.                 }
  14.             }
  15.         });
复制代码
      那时间都开始了，那离记录最近记录是不是就不远了。我们接下来就创建一个轻量级偏好数据库，来让记下来我们的最快记录。
  1.     private void initDbManager() {
  2.         context = getContext();
  3.         databaseHelper = new DatabaseHelper(context);
  4.         preferences = databaseHelper.getPreferences(filename);
  5.     }

  7.     public void getrecord() {
  8.         maxhour = preferences.getInt("hour" + single,23);
  9.         maxmin = preferences.getInt("min" + single, 59);
  10.         maxsec = preferences.getInt("sec" + single, 59);
  11.         maxmsec = preferences.getInt("msec" + single , 99);
  12.     }

  14.     public void Write() {
  15.         if (!compare()) {
  16.             preferences.putInt("hour" + single, maxhour);
  17.             preferences.putInt("min" + single, maxmin);
  18.             preferences.putInt("sec" + single, maxsec);
  19.             preferences.putInt("msec" + single, maxmsec);
  20.         }
  21.     }

  23.     public boolean compare() {
  24.         int nowtime = hour * 36000 + min * 6000 + sec * 100 + msec;
  25.         int maxtime = maxhour * 36000 + maxmin * 6000 + maxsec * 100 + maxmsec;

  27.         return nowtime > maxtime;
  28.     }
复制代码
       然后就是在初始化函数中调用初始化数据库还有获取数据库中的记录。然后在实现游戏功能的函数中判断成功之后，我们在那里面需要再判断是否破纪录，如果破纪录了我们需要把新的记录写到数据库里并且把最短时间的文本给换了。
  1.                             if(gamesuccess()) {
  2.                                 timer.cancel();
  3.                                 if (!compare()) {
  4.                                     maxhour = hour;
  5.                                     maxmin = min;
  6.                                     maxsec = sec;
  7.                                     maxmsec = msec;
  8.                                     Write();
  9.                                     settime(maxmsec, maxsec, maxmin, maxhour);
  10.                                     maxtext.setText("最短时间: "+ strhour +":"+strmin+":"+strsec+":"+strmsec);
  11.                                     setUIContent(layout);
  12.                                 }
  13.                             }
复制代码
      那这个计时的功能完成了之后就已经算是完成一大半了。我们接下来就是把返回按钮的功能给实现了，给返回按钮加一个点击事件，让时间函数停止还有销毁页面。
  1.         button_back.setClickedListener(new Component.ClickedListener() {
  2.             @Override
  3.             public void onClick(Component component) {
  4.                 timer.cancel();
  5.                 terminateAbility();
  6.             }
  7.         });
复制代码
       那我们接下来就是来实现重新开始的按钮的功能，这个点击事件里面需要实现一个重新打乱还有计时重新开始的功能。
  1.         button_again.setClickedListener(new Component.ClickedListener() {
  2.             @Override
  3.             public void onClick(Component component) {
  4.                 timer.cancel();
  5.                 text = "暂停";
  6.                 initialize();
  7.                 runing();
  8.             }
  9.         });
复制代码
      那这个之后呢，我们就来现实最后的这个迁移的功能了。不知道大家还记不记得写迁移第一步是在干什么，没错第一步就是加一个IAbilityContinuation的接口函数。接下来我们就在onSaveData接口中将我们的所有的数据都写入intentParams。
  1.         intentParams.setParam("single",single);
  2.         for (int row = 0;row < single;row++) {
  3.             for (int column = 0;column < single; column++) {
  4.                 string += str.charAt(grids[row][column]);
  5.             }
  6.         }
  7.         HiLog.info(TAG,string);
  8.         intentParams.setParam("string",string);
  9.         intentParams.setParam("text",text);
  10.         intentParams.setParam("hour",hour);
  11.         intentParams.setParam("min",min);
  12.         intentParams.setParam("sec",sec);
  13.         intentParams.setParam("msec",msec);
  14.         intentParams.setParam("maxhour",maxhour);
  15.         intentParams.setParam("maxmin",maxmin);
  16.         intentParams.setParam("maxsec",maxsec);
  17.         intentParams.setParam("maxmsec",maxmsec);
  18.         intentParams.setParam("row_0",row_0);
  19.         intentParams.setParam("column_0",column_0);
  20.         intentParams.setParam("isMigrate",true);
  21.         string = "";
  22.         return true;
复制代码
     那接下来就是在目标设备读取数据了。
  1.         single = (int)intentParams.getParam("single");
  2.         string = (String)intentParams.getParam("string");
  3.         grids = new int[single][single];
  4.         StringtoArray();
  5.         string = "";
  6.         text = (String)intentParams.getParam("text");
  7.         hour = (int)intentParams.getParam("hour");
  8.         min = (int)intentParams.getParam("min");
  9.         sec = (int)intentParams.getParam("sec");
  10.         msec = (int)intentParams.getParam("msec");
  11.         maxhour = (int)intentParams.getParam("maxhour");
  12.         maxmin = (int)intentParams.getParam("maxmin");
  13.         maxsec = (int)intentParams.getParam("maxsec");
  14.         maxmsec = (int)intentParams.getParam("maxmsec");
  15.         row_0 = (int)intentParams.getParam("row_0");
  16.         column_0 = (int)intentParams.getParam("column_0");
  17.         isMigrate = (boolean)intentParams.getParam("isMigrate");
  18.         return true;
复制代码
      那这里面我是把二维数组变成字符串作为数据传输到另外的设备的，那就还涉及到了一个从字符串转化为二维数组的函数。
  1.     public void StringtoArray() {
  2.         for (int row = 0;row < single; row++) {
  3.             for(int column = 0;column < single; column++) {
  4.                 grids[row][column] = string.charAt(row * single + column) - 33;
  5.             }
  6.         }
  7.     }
复制代码
     并且在迁移完成后，我们需要把原页面给销毁。
  1.     public void onCompleteContinuation(int i) {
  2.         terminateAbility();
  3.     }
复制代码
     那最后就是给迁移按钮来一个点击事件来完成页面的迁移了。
  1.         button_migrate.setClickedListener(new Component.ClickedListener() {
  2.             @Override
  3.             public void onClick(Component component) {
  4.                 continueAbility();
  5.             }
  6.         });
复制代码
    至此我们的迁移也就完成了，同时我们的单人模式也就完成了，是不是没有想象中的那么难。
最后就在附上迁移的效果图了。



预告    那我们今天的单人模式的学习就结束啦，在下一篇中，我会写双人模式的游戏界面，那双人模式就涉及到了双人数据的同步，还有重新开始和返回的功能。那让我们一起期待下一篇学习笔记的到来吧。
结语     源码我会放到附件中的，有需求的可以自行下载自行学习，大家有什么看不懂的地方可以私信问我或者对照源码进行学习。
更多资料请关注我们的项目 :Awesome-Harmony_木棉花
     本项目会长期更新 ，希望继续关注，我们也会加油做得更好的。明年3月，深大校园内的木棉花会盛开，那时，鸿蒙也会变的更好，愿这花开，有你我的一份。

MyKlotski.rar
(8.67 MB, 下载次数: 2)
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友