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

本篇文章教大家如何在鸿蒙上实现“数字华容道”小游戏。
①打开引用首先为数字华容道的初始界面,点击开始游戏即会切换到数字华容道的游戏界面。
②进入数字华容道的游戏界面显示 3*3 的方阵,方阵中分布有随意打乱的 1 至 8 的数字和一个空白方格,方阵下方显示一个“重新开始”的按钮和一个“返回”按钮。
点击“重新开始”按钮即会重新生成随意打乱的 1 至 8 的数字和一个空白方格的方阵,点击“返回”按钮即会切换到数字华容道的初始界面,最下方有四个指示不同方向箭头的按钮,点击任一按钮或向上、下、左、右任一方向滑动,空白方格周围对应位置的方格便会随之向对应的方向移动一格。
③经过若干次滑动或点击后,当所有的数字按顺序排列后,则会弹出游戏成功的界面,再滑动或点击也不会有任何变化。
创建项目
deveco studio 下载安装成功后,打开 deveco studio,点击左上角的 file,点击 new,再选择 new project,选择 phone 选项,选择默认的模板,然后选择保存路径。
将文件命名为 myphoneapplication(文件名不能出现中文或者特殊字符,否则将无法成功创建项目文件),最后点击 finish。
实现初始界面布局
    首先,我们要先实现数字华容道的初始界面,点击开始游戏即会切换到另一页面。
①先在 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:             }          ]        }  ②先将我们事先准备好的图片复制粘贴到 entry>src>main>resources>base>media 文件夹中,并且命名为 game,点击 ok。
在 entry>src>main>resources>base>layout>ability_main.xml 中添加布局。 先将事先存在的 text 组件删去,添加 image 图片组件,引入我们刚才复制粘贴的图片,再添加一个 button 按钮组件,加入唯一标识符 id 并配置好其他相应的属性。
        ③在 entry>src>main>java>com.example.myphoneapplication>slice 中右键选择 new>java class 增加一个空白的类以用来后面编写数字。 华容道的游戏界面,并且命名为 secondabilityslice 在这里插入图片描述。  

entry>src>main>java>com.example.myphoneapplication>slice>secondabilityslice   
中的代码修改成如下:
package com.example.myphoneapplication.slice;import com.example.myphoneapplication.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);    }}   
④在下面代码中的 onstart 函数中添加一个按钮指向我们(2)中添加的按钮。
entry>src>main>java>com.example.myphoneapplication>slice>mainabilityslice  按钮添加一个响应点击事件的函数,用 parsent 函数跳转到 secondabilityslice。package com.example.myphoneapplication.slice;import com.example.myphoneapplication.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 的数字和一个空白方格的方阵。
在这里编写代码:
entry>src>main>java>com.example.myphoneapplication>slice>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) = 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;        }    }  
定义函数 creategrids(int[][] grids) 用于随机生成一个表示方向的数字,循环调用函数 changegrids(grids,direction) 用于随机打乱二维数组对应的数字。
public void creategrids(int[][] grids){        int[] array = {-1,-2,1,2};        for(int i = 0; i src>main>java>com.example.myphoneapplication>slice>secondabilityslice  
先定义一个函数 drawbutton() 用于绘制所有的按钮,四个指示不同方向箭头的按钮分别添加四个响应点击事件的函数。
分别调用对应的 changegrids(grids,direction) 函数实现空白方格周围对应位置的方格便会随之向对应的方向移动一格,并调用 drawgrids(grids) 函数用于绘制新的方阵。
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);        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);        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) {                 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) {                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) {                 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) {                changegrids(grids,-2);            }        });        layout.addcomponent(button4);        drawgrids(grids);    }  然后添加一个函数 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)  200) {                            changegrids(grids,-2);                        } else if (distancey 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);    }  
然后定义一个函数 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();                }    }


红魔3电竞手机的游戏体验如何
苹果继续领跑高端手机市场 有预测称全球手机销量将反弹
预测:未来两年内将需要800G光学器件
PCB制造的过程及工艺
树莓派和n1性能对比
鸿蒙上实现“数字华容道”小游戏
未来区块链将在更多领域得到应用
为什么要检测泄露电流_泄露电流的检测方法
云存储服务技术架构及云存储服务的优势
ATmega3208系列MCU物联网解决方案
车载电源管理抛负载和冷启动问题
WiFi模块在智能硬件中的具体应用
NVF04M语音芯片——宠物喂食器上的应用
合金电力变压器技术简介
无人机如何探索犯罪现场
动力电池包耐碎石冲击试验机
请查收!华为CCF HPC China 2023 参会指南
有哪些设计感满满的轻薄笔记本值得买?
LTC4252B-1 –48V/2.5A 热插拔控制器
三年后剥离晶圆代工业务 英特尔的深化转型之路