【牛角书】从零开始实现鸿蒙项目——华容道

标签：鸿蒙 grids column 华容道 int 从零开始 new public row

【华容道】小项目

本学期选修了鸿蒙应用开发课程，为了完成课程要求也为了检验自己的能力，在网上搜索资料后实现了华容道小游戏。

项目运行

如图

【牛角书】从零开始实现鸿蒙项目——华容道_ide

【牛角书】从零开始实现鸿蒙项目——华容道_ide_02

【牛角书】从零开始实现鸿蒙项目——华容道_ide_03

正式开始

一、创建项目

1、选择空白模板

【牛角书】从零开始实现鸿蒙项目——华容道_ide_04

2、项目名、包名

【牛角书】从零开始实现鸿蒙项目——华容道_Text_05

3、目录如下

【牛角书】从零开始实现鸿蒙项目——华容道_ide_06

二、编程

1、导入图片作为界面

【牛角书】从零开始实现鸿蒙项目——华容道_ide_07

2、先在entry>src>main>config.json文件中最下方"launchType": “standard"的后面添加以下代码，并且将上方的“label”：“MyPhoneApplication”修改成"label”: “数字华容道”，这样就实现去掉应用上方的标题栏和将应用名称改为数字华容道了

"orientation": "unspecified",
"name": "com.example.mypnone2.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": ""
    }

3、在entry>src>main>resources>base>layout>ability_main.xml中添加布局，先将事先存在的Text组件删去，添加Image图片组件

<?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:first"
        ohos:layout_alignment="center"
        />

    <Button
        ohos:id="$+id:button_game"
        ohos:height="150"
        ohos:width="515"
        ohos:text_alignment="center"
        ohos:top_margin="-810"
        ohos:left_margin="250"
        />

</DirectionalLayout>

4、将entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice中的代码修改成如下：

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

实现数字的随机打乱

在entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice编写代码先定义个一个位置布局layout和一个二维数组grids，创建函数initializeinitialize()分别对其初始化，在onStart函数中调用函数initializeinitialize()

package com.example.mypnone2.slice;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.render.Canvas;
import ohos.agp.render.Paint;
import ohos.agp.utils.*;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;

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 < 100; i++){
            int random = (int)Math.floor(Math.random()*4);
            int direction = array[random];
            changeGrids(grids,direction);
        }
    }

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

    public void drawButton(){

        Button button=new Button(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);
        ShapeElement background = new ShapeElement();
        background.setRgbColor(new RgbColor(174, 158, 143));
        background.setCornerRadius(100);
        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(100);
        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(174, 158, 143));
        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();
        }
    }

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

实现滑动或点击调换数字

添加“重新开始”和“返回”按钮，在最下方添加四个指示不同方向箭头的按钮，点击任一按钮或向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格。在entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice编写代码先定义一个函数drawButton()用于绘制所有的按钮，四个指示不同方向箭头的按钮分别添加四个响应点击事件的函数，分别调用对应的changeGrids(grids,direction)函数实现空白方格周围对应位置的方格便会随之向对应的方向移动一格，并调用drawGrids(grids)函数用于绘制新的方阵

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

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

}

实现游戏成功界面

点击“重新开始”按钮即会重新生成随意打乱的1至15的数字和一个空白方格的方阵，点击“返回”按钮即会切换到数字华容道的初始界面，经过若干次滑动或点击后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，在entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice编写代码首先定义一个函数drawText()用于绘制游戏成功字样

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

    }

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

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

}

标签：鸿蒙,grids,column,华容道,int,从零开始,new,public,row
From： https://blog.51cto.com/u_15909238/5928361