鸿蒙华容道小游戏

概述：本次demo是我的选修期末小作业，让我们独自完成一个项目，让我们独自发挥自我想象力和创造力写出自己的基于鸿蒙开发的小项目，于是我借鉴网上大佬，然后写出自己的项目。

前言：

        本次开发所需要工具：DevEco Studio(主) Google 浏览器(次).以上工具下载安装使用简单，不再赘述。

        本次使用开发语言：java 。

成果展示：

 

 

正文 ：

1. 先在config.json文件中最下方"launchType": "standard"的后面添加以下代码，并且将上方的“label”：“MyPhoneApplication”修改成"label": "$string:app_name"。

config.json最下面部分代码：

{
  "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": ""
            }
          ]
        }
      }
    ]
  }
}

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

<?xml version="1.0" encoding="utf-8"?>
<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:first1"
        ohos:scale_mode="stretch"
        />

    <Button
        ohos:id="$+id:button_game"
        ohos:height="165"
        ohos:width="600"
        ohos:text_alignment="center"
        ohos:top_margin="-810"
        ohos:left_margin="225"
        />

</DirectionalLayout>

3.在slice中右键选择New>Java Class增加一个空白的类以用来后面编写数字华容道的游戏界面，并且命名为SecondAbilitySlice。

package com.example.mypnone2.slice;

import com.example.mypnone2.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class SecondAbilitySlice extends AbilitySlice {

    public void onStart(Intent intent) {
        super.onStart(intent);
        
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

4.在MainAbilitySlice中的onStart函数中添加一个按钮指向我们（2）中添加的按钮，按钮添加一个响应点击事件的函数，用parsent函数跳转到SecondAbilitySlice。

package com.example.mypnone2.slice;

import com.example.mypnone2.ResourceTable;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbilitySlice extends ohos.aafwk.ability.AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Button button = (Button) findComponentById(ResourceTable.Id_button_game);
        button.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);
    }
}

实现数字的随机打乱

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

在SecondAbilitySlice编写代码

先定义个一个位置布局layout和一个二维数组grids，创建函数initializeinitialize()分别对其初始化，在onStart函数中调用函数initializeinitialize()。

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}};
    }

 然后定义函数drawGrids(int[][] grids)用于绘制4*4方阵和其二维数组对应的数字。

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.GRAY);
                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(Color.CYAN);
                        RectFloat rectFloat=new RectFloat(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,int direction)，每次接收一个方向，2表示上移，-1表示左移，1表示右移，-2表示下移，找出空白方格所在位置对应的二维数组下标，对应的方格和空白方格对应的二维数组的数值对调.

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) <= 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;
        }else 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) <= 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;
        }
    }

 定义函数createGrids(int[][] grids)用于随机生成一个表示方向的数字，循环调用函数changeGrids(grids,direction)用于随机打乱二维数组对应的数字.

public void createGrids(int[][] grids){
        int[] array = {-1,-2,1,2};

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

 最后在initialize()函数中调用createGrids(grids)函数和drawGrids(grids)函数.

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);
        drawGrids(grids);
    }

 

实现滑动或点击调换数字

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

在SecondAbilitySlice编写代码

先定义一个函数drawButton()用于绘制所有的按钮，四个指示不同方向箭头的按钮分别添加四个响应点击事件的函数，分别调用对应的changeGrids(grids,direction)函数实现空白方格周围对应位置的方格便会随之向对应的方向移动一格，并调用drawGrids(grids)函数用于绘制新的方阵。

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.WHITE);
        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.WHITE);
        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.WHITE);
        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.WHITE);
        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();
        }
    }

然后添加一个函数slideGrids()为布局layout添加一个滑动事件，并获取滑动开始与结束的坐标，并计算出大致的滑动方向，分别调用对应的changeGrids(grids,direction)函数实现空白方格周围对应位置的方格便会随之向对应的方向移动一格，并调用drawGrids(grids)函数用于绘制新的方阵，并在开头添加相应的变量.

private float starX, starY, distanceX, distanceY;

public void slideGrids(){
        layout.setTouchEventListener(new Component.TouchEventListener() {
            @Override
            public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
                MmiPoint point = touchEvent.getPointerScreenPosition(0);

                switch (touchEvent.getAction()) {
                    case TouchEvent.PRIMARY_POINT_DOWN:
                        starX = point.getX();
                        starY = point.getY();
                        break;
                    case TouchEvent.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);
                        } else if (distanceX < -200) {
                            changeGrids(grids,-1);

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

                return false;
            }
        });
    }

最后在initialize()函数中调用slideGrids()函数和drawButton()函数.

    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);
    }

 

实现游戏成功界面

点击“重新开始”按钮即会重新生成随意打乱的1至15的数字和一个空白方格的方阵，点击“返回”按钮即会切换到数字华容道的初始界面，经过若干次滑动或点击后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动或点击也不会有任何变化。

在SecondAbilitySlice编写代码。

 public void drawText(){
        Text text=new Text(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.

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;
    }

再在drawButton()函数中重新开始按钮中添加一个响应点击事件的函数，用于调用函数initialize()实现重新生成随意打乱的1至15的数字和一个空白方格的方阵，返回按钮中添加一个响应点击事件的函数，用parsen函数返回数字华容道的初始界面，四个指示不同方向箭头的按钮的响应点击事件的函数中增加一个判断，当函数gameover（）返回为false时才调用各自的changeGrids(grids,direction)函数，最后增加一个判断，当函数gameover（）返回为true时调用函数drawText().

public void drawButton(){//部分代码没有贴出，可自行下载源代码查看

        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                initialize();
            }
        });

        button0.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                present(new SecondAbilitySlice(),new Intent());
            }
        });
    
        button1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (gameover() == false){
                    changeGrids(grids,2);
                }
            }
        });
        
        button2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (gameover() == false){
                    changeGrids(grids,-1);
                }
            }
        });
        
        button3.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (gameover() == false){
                    changeGrids(grids,1);
                }
            }
        });

        button4.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (gameover() == false){
                    changeGrids(grids,-2);
                }
            }
        });

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

在函数slideGrids()函数中增加一个判断，当函数gameover（）返回为false时才调用changeGrids(grids,direction)函数，最后增加一个判断，当函数gameover（）返回为true时调用函数drawText().

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

 结语：

写完这个demo我受益颇深，首先我学会运用所学鸿蒙的相关知识，并且学会简单的使用开发工具，更加清楚地学习了开发鸿蒙项目的架构，以及各个组件的相关调用和联系，另外又进一步复习所学java语言，对学习编程的思想进一步拓宽，另外，我会继续努力学习，争取有朝一日进入大厂，继续学习，我下个学习的目标就是细化软件，我写的软件和别的公司写的项目有何区别，我要如何加强这一方面的学习。 

另外想要源码的可以私信我