从零开发HarmonyOS（鸿蒙）运动手表小游戏——数字华容道

最新推荐文章于 2024-03-28 17:18:28 发布
最新推荐文章于 2024-03-28 17:18:28 发布
阅读量4.5k 收藏 35
点赞数 3
分类专栏： HarmonyOS 文章标签： 游戏 javascript 华为 app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52542088/article/details/109906486
版权

HarmonyOS（鸿蒙）运动手表第二个小游戏app——数字华容道

前言

此次博客是深鸿会博主（Zzt_01-23）学习完HarmonyOS（鸿蒙）后，自行开发的第二个鸿蒙demo——数字华容道，详细讲述了数字华容道的开发思路，适合刚入门小白，使读者能自行从零开发一个小游戏APP——数字华容道，文末附有整个demo的源代码，有兴趣的读者也可以前往观看我的第一个游戏开发学习：黑白翻棋，较第一个而言，此次只是多了滑动事件和计时器，其他组件和第一个游戏一样，建议先观看完第一个再学习第二个。

概述

本个demo将从零基础开始完成鸿蒙小游戏APP在可穿戴设备上的编译，此处以运动手表为例，在项目中我们所使用到的软件为DevEco Studio，下载地址为：DevEco Studio下载、DevEco Studio安装教程，在项目中我们要实现的内容为数字华容道APP的开发。

  1. 在初始界面中显示4*4的方阵，方阵中分布有随意打乱的1至15的数字和一个空白方格，方阵上方增加一个计时器，显示游戏进行的时间，单位为秒，方阵下方显示一个“重新开始”的按钮，为用户提供重新开始游戏的机会。
    在这里插入图片描述

  2. 向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格，计时器也会显示游戏开始到当前的时间。
    在这里插入图片描述

  3. 经过若干次移动后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动也不会有任何变化，此时方阵上方的计时器停止计时，点击“重新开始”的按钮后则会重新返回步骤1界面所示。
    在这里插入图片描述

正文

创建项目

DevEco Studio下载安装成功后，打开DevEco Studio，点击左上角的File，点击New，再选择New Project，选择Lite Wearable选项，选择默认的模板，然后选择保存路径，将文件命名为Game1（文件名不能出现中文或者特殊字符，否则将无法成功创建项目文件），最后点击Finish。
在这里插入图片描述
主要编写的文件为index.css、index.hml和index.js，打开路径如图所示，index.hml用于描述页面中包含哪些组件，index.css用于描述页面中的组件都长什么样，index.js用于描述页面中的组件是如何进行交互的。
在这里插入图片描述

实现开始界面的布局

首先，我们要先画出一个4*4的方阵，方阵中按照顺序显示1至15的数字，方阵上方显示“当前秒数：0”，方阵下方有一个“重新开始”的按钮。
在这里插入图片描述
1.在index.hml中添加相应的页面组件：
首先创建一个基础容器div类名为container，用于盛装所有的其他组件

<div class="container" >
</div>

然后在此基础容器中添加一个文字组件text类名为seconds，且注明显示的固定部分“当前秒数：”，为动态变换部分赋予一个名为currentSteps的变量，用于动态显示游戏进行的秒数

<text class="seconds">
        当前秒数：{{currentSeconds}}
</text>

再添加一个画布组件canvas类名为canvas，增加一个引用属性ref，用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上，以便在此画布上画出4*4的方阵

<canvas class="canvas" ref="canvas" >
</canvas>

最后添加一个普通按钮组件，类名为bit，并赋值“重新开始”，用于重新开始游戏

<input type="button" value="重新开始" class="bit"/>

至此，index.hml文件已经全部编写完毕

<div class="container" >
    <text class="seconds">
        当前秒数：{{currentSeconds}}
    </text>
    <canvas class="canvas" ref="canvas" ></canvas>
    <input type="button" value="重新开始" class="bit"/>
</div>

2.在index.css中描述刚才添加的页面组件的样式：
首先编写container的样式，flex-direction为容器主轴方向，选择column（垂直方向从上到下），justify-content为容器当前行的主轴对齐格式，选择center（项目位于容器的中心），align-items为容器当前行的交叉轴对齐格式，选择center（元素在交叉轴居中），width、height分别为容器以像素为单位的宽度和高度，都设定为450px

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}

然后编写seconds的样式，font-size为设置文本的尺寸，设定为18px，text-align为设置文本的文本对齐方式，选择center（文本居中对齐），width、height分别设定为300px和20px，letter-spacing为设置文本的字符间距，设定为0px，margin-top为设置上外边距，设定为10px

.seconds{
    font-size: 18px;
    text-align:center;
    width:300px;
    height:20px;
    letter-spacing:0px;
    margin-top:10px;
}

再编写canvas的样式，width、height都设定为320px，background-color为设置背景颜色，设定为#FFFFFF

.canvas{
    width:305px;
    height:305px;
    background-color: #FFFFFF;
}

最后编写bit的样式，width、height分别设定为150px和30px，background-color设定为#AD9D8F，font-size设定为24px，margin-top设定为10px

.bit{
    width:150px;
    height:30px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}

至此，index.css文件已经全部编写完毕
3.在index.js中描述页面中的组件交互情况：
首先在data中为当前秒数currentSeconds赋值为0

data: {
        currentSeconds:0,
    }

然后在文件开头定义一个全局变量context，定义一个全局变量的二维数组grids，其中的值为1至15和0，定义全局常量方格的边长SIDELEN为70，方格的间距MARGIN为5，创建一个onReady()函数，用于定义2d绘画工具

var grids=[[1, 2, 3, 4],
           [5, 6, 7, 8],
           [9, 10, 11, 12],
           [13, 14, 15, 0]];
var context;

const SIDELEN = 70;
const MARGIN = 5;

onReady(){
        context=this.$refs.canvas.getContext('2d');
    }

再创建drawGrids()函数，先将grids的值利用toString()函数全部转化为字符串，fillStyle为画图工具context的方格的颜色，方格的背景颜色定义为#BBADA0，数字的颜色定义为#000000，fillRect为画图工具context的画图矩形的大小，其中有四个参数，第一个参数指定矩形左上角的x坐标，第二个参数指定矩形左上角的y坐标，第三个参数指定矩形的高度，第四个参数指定矩形的宽度。font为为画图工具context的字体大小，定义为30px HYQiHei-65S，因为要出现一个空白的方格，所以需要添加一个判断语句，当数字为0时不显示数字。fillText为画图工具context的文本字体大小，其中有三个参数，第一个参数为绘制的文本，第二个参数指定文本左上角的x坐标，第三个参数指定文本左上角的y坐标，最后创建onShow()函数，用于调用drawGrids()函数

onShow() {
        this.drawGrids();
    },
    drawGrids() {
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                let gridStr = grids[row][column].toString();

                context.fillStyle = "#BBADA0";
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);

                context.font = "30px HYQiHei-65S";
                if (gridStr != "0") {
                    context.fillStyle = "#000000";
                    let offsetX = (4 - gridStr.length) * (SIDELEN / 8);
                    let offsetY = (SIDELEN - 30) / 2;
                    context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);
                }
            }
        }
    }

至此，index.jd文件已经全部编写完毕，运行即可得出上述界面布局了

var grids=[[1, 2, 3, 4],
           [5, 6, 7, 8],
           [9, 10, 11, 12],
           [13, 14, 15, 0]];
var context;

const SIDELEN = 70;
const MARGIN = 5;

export default {
    data: {
        currentSeconds:0,
    },
    onReady() {
        context = this.$refs.canvas.getContext('2d');
    },
    onShow() {
        this.drawGrids();
    },
    drawGrids() {
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                let gridStr = grids[row][column].toString();

                context.fillStyle = "#BBADA0";
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);

                context.font = "30px HYQiHei-65S";
                if (gridStr != "0") {
                    context.fillStyle = "#000000";
                    let offsetX = (4 - gridStr.length) * (SIDELEN / 8);
                    let offsetY = (SIDELEN - 30) / 2;
                    context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);
                }
            }
        }
    },
}

实现数字的随机打乱和方格的移动

其次我们要在屏幕上随机生成一个数字被随意打乱的4*4的方阵，并且向任意方向滑动屏幕，空白方格周围对应位置的方格便会随之向对应的方向移动一格
在这里插入图片描述
在这里插入图片描述
1.在index.hml中添加相应的页面组件：
我们需要在画布中添加一个swipe属性，用于响应滑动事件，赋予一个所自动调用的函数swipeGrids

<canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>

至此，index.hml文件已经全部编写完毕
2.在index.css中描述刚才添加的页面组件的样式：
这一部分不需要添加或修改页面组件的样式
3.在index.js中描述页面中的组件交互情况：
首先我们得先实现方格的移动，创建一个函数changeGrids(direction)，接受一个参数direction指示滑动的方向，先找出空白方格所在位置对应的二维数组下标，接着判断参数direction为’left’、‘right’、‘up’ 或’down’时，当isShow为false时，对应的方格和空白方格对应的二维数组的数值对调，创建响应滑动事件所自动调用的函数swipeGrids(event)，参数为滑动事件，调用函数changeGrids(direction)，并传入滑动的方向，最后调用函数drawGrids()

swipeGrids(event) {
        this.changeGrids(event.direction);
        this.drawGrids();
    },
    changeGrids(direction) {
        let x;
        let y;
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                if (grids[row][column] == 0) {
                    x = row;
                    y = column;
                    break;
                }
            }
        }
        let temp;
        if(this.isShow==false){
            if (direction == 'left' && (y + 1) < 4) {
                temp = grids[x][y + 1];
                grids[x][y + 1] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'right' && (y - 1) > -1) {
                temp = grids[x][y - 1];
                grids[x][y - 1] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'up' && (x + 1) < 4) {
                temp = grids[x + 1][y];
                grids[x + 1][y] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'down' && (x - 1) > -1) {
                temp = grids[x - 1][y];
                grids[x - 1][y] = grids[x][y];
                grids[x][y] = temp;
            }
        }

然后添加一个函数initGrids()，用于随机打乱排列规则的数字，先创建一个一维数组变量array，赋值为上下左右四个方向"left",“up”,“right”,“down”，Math.random()函数是随机[0,1)内的小数，Math.random() * 4是随机[0,4)内的小数，Math.floor（x）为得出小于或等于x的最大整数，随机生成一个数字，读取数组array对应的值，调用函数this.changeGrids(direction)并将刚才的array对应的值传入，便能移动一次方格，循环此步骤若干次便可随机打乱排列规则的数字，生成一个数字被随意打乱的4*4的方阵

initGrids(){
        let array=["left","up","right","down"];

        for (let i = 0; i < 100; i++){
            let randomIndex = Math.floor(Math.random() * 4);
            let direction = array[randomIndex];
            this.changeGrids(direction);
        }
    }

最后在函数onShow()中调用函数initGrids()

onShow() {
        this.initGrids();
        this.drawGrids();
    }

至此，index.jd文件已经全部编写完毕，运行即可得出上述界面布局了

实现计时器、重新开始和游戏成功

最后我们要在方阵上方动态显示游戏开始到当前的时间，并且当数字按顺序排列后弹出“游戏成功”界面，点击“重新开始”按钮能够重新随机生成一个数字被随意打乱的4*4的方阵，当前秒数置为0 ，且能够重新开始计时
在这里插入图片描述
在这里插入图片描述
1.在index.hml中添加相应的页面组件：
为了使数字按顺序排列后才显示“游戏成功”界面，需要添加一个栈stack类名设定为stack，使画布先进栈，“游戏成功”后进栈，这样就能达到“游戏成功”界面显示在画布上方了

<stack class="stack">
</stack>

在栈stack组件中增加一个游戏成功的容器div类名为subcontainer，以isShow控制该容器是否进栈，当isShow为true时才进栈，增加文本组件text，类名gameover，并赋值“游戏成功”

<div class="subcontainer" show="{{isShow}}">
            <text class="gameover">
                游戏成功
            </text>
        </div>

最后为“重新开始”按钮增加一个点击事件click，所调用的函数为restartGame

<input type="button" value="重新开始" class="bit" onclick="restartGame"/>

至此，index.hml文件已经全部编写完毕

<div class="container" >
    <text class="seconds">
        当前秒数：{{currentSeconds}}
    </text>
    <stack class="stack">
        <canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>
        <div class="subcontainer" show="{{isShow}}">
            <text class="gameover">
                游戏成功
            </text>
        </div>
    </stack>
    <input type="button" value="重新开始" class="bit" onclick="restartGame"/>
</div>

2.在index.css中描述刚才添加的页面组件的样式：
首先编写stack的样式，width、height都设定为320px，margin-top设定为10px

.stack{
    width: 305px;
    height: 305px;
    margin-top: 10px;
}

然后编写subcontainer的样式，left为指示距边界框左上角的以像素为单位的水平坐标，top为指示距边界框左上角的以像素为单位的垂直坐标，width、height分别设定为220px和130px，justify-content选择center，align-items选择center， background-color设定为#E9C2A6

.subcontainer {
    left:50px;
    top:95px;
    width: 220px;
    height: 130px;
    justify-content: center;
    align-items: center;
    background-color: #E9C2A6;
}

最后编写gameover的样式，font-size设定为38px，color设定为black

.gameover {
    font-size: 38px;
    color: black;
}

至此，index.css文件已经全部编写完毕
3.在index.js中描述页面中的组件交互情况：
首先在data函数中给isShow赋值为false，将开头的全局变量grids赋值删除，增加一个函数onInit()给grids赋值，并调用函数initGrids()和this.drawGrids()

var grids;

data: {
        currentSeconds:0,
        isShow: false
    },
    onInit() {
        grids=[[1, 2, 3, 4],
               [5, 6, 7, 8],
               [9, 10, 11, 12],
               [13, 14, 15, 0]];

        this.initGrids();
        this.drawGrids();
    }

然后在开头定义一个全局变量timer赋值为null，在函数onShow()中增加一个计时器setInterval（），其中有两个参数，第一个参数为调用的函数，第二个参数为每隔多长时间调用一次函数，单位为毫秒，再定义调用的函数run()，用于每次currentSeconds加0.1，parseFloat是使字符串转换为单精度浮点数，至此计时器便完成了

var timer = null;

onShow() {
        this.initGrids();
        this.drawGrids();

        timer = setInterval(this.run, 100);
    }
 
run(){
        this.currentSeconds = (Math.floor(parseFloat(this.currentSeconds) * 10+ 1) / 10).toString();
        if(parseFloat(this.currentSeconds) % 1 == 0){
            this.currentSeconds = this.currentSeconds + ".0";
        }
    }

创建一个函数gameover()判断数字是否有顺序地排列好即判断游戏是否成功，循环判断当前二维数组的数值是否等于有顺序排列好的二维数组的数值即可判断游戏是否成功，当游戏成功时返回true，否则返回false，在函数中swipeGrids(event)调用函数gameover()，当返回值为true时将isShow赋值为true，使游戏成功界面显示在最上方，并且调用函数clearInterval停止计时

swipeGrids(event) {
        this.changeGrids(event.direction);
        this.drawGrids();

        if(this.gameover()){
            clearInterval(timer);
            this.isShow = true;
        }
    },
    gameover(){
        let originalgrids=[[1, 2, 3, 4],
                           [5, 6, 7, 8],
                           [9, 10, 11, 12],
                           [13, 14, 15, 0]];
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                if (grids[row][column] != originalgrids[row][column]){
                    return false;
                }
            }
        }
        return true;
    }

最后创建点击“重新开始”按钮所自动调用的函数restartGame()，调用函数onInit()，重新随机生成一个数字被随意打乱的4*4的方阵，将isShow赋值为false，使“游戏成功”界面隐藏，将currentSeconds置为0，将time赋值为null，调用函数onShow()重新开始计时

restartGame(){
        this.currentSeconds = "0.0";
        this.isShow = false;

        this.onShow();
    }

至此，index.jd文件已经全部编写完毕，整个demo也全部完成了

心得体会

本个demo整体难度不高，涉及的组件或样式都是很常见的，需要掌握栈、按钮、画布、计时器、滑动等组件即可完成编写，组件交互采用二维数组串连整个项目，十分适合刚入门的读者编写与学习，其中组件学习可以前往官方文档查看更详细的介绍：官方文档，较之第一个游戏黑白翻棋，组件虽多了一种，但算法更简单了，代码更优化，可读性更加强，建议读者在学习时可以与第一个游戏黑白翻棋对照一起学习：黑白翻棋。

结语

本次项目为博主学习了鸿蒙一些基础后自行编写完成的，感兴趣的读者可以自行跟着本博客编写，相信你们也能够完成的。如果有遇到什么问题，或者查找出其中的错误之处，欢迎留言，本博主也欢迎与各位感兴趣的读者一起学习HarmonyOS（鸿蒙）开发。

源代码

index.hml如下：

<div class="container" >
    <text class="seconds">
        当前秒数：{{currentSeconds}}
    </text>
    <stack class="stack">
        <canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>
        <div class="subcontainer" show="{{isShow}}">
            <text class="gameover">
                游戏成功
            </text>
        </div>
    </stack>
    <input type="button" value="重新开始" class="bit" onclick="restartGame"/>
</div>

index.css如下：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.seconds{
    font-size: 18px;
    text-align:center;
    width:300px;
    height:20px;
    letter-spacing:0px;
    margin-top:10px;
}
.canvas{
    width:305px;
    height:305px;
    background-color: #FFFFFF;
}
.bit{
    width:150px;
    height:30px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}
.stack{
    width: 305px;
    height: 305px;
    margin-top: 10px;
}
.subcontainer {
    left:50px;
    top:95px;
    width: 220px;
    height: 130px;
    justify-content: center;
    align-items: center;
    background-color: #E9C2A6;
}
.gameover {
    font-size: 38px;
    color: black;
}

index.js如下：

var grids;
var context;
var timer;

const SIDELEN = 70;
const MARGIN = 5;

export default {
    data: {
        currentSeconds: '0.0',
        isShow: false
    },
    onInit() {
        grids=[[1, 2, 3, 4],
               [5, 6, 7, 8],
               [9, 10, 11, 12],
               [13, 14, 15, 0]];

        this.initGrids();
        this.drawGrids();
    },
    initGrids(){
        let array=["left","up","right","down"];

        for (let i = 0; i < 100; i++){
            let randomIndex = Math.floor(Math.random() * 4);
            let direction = array[randomIndex];
            this.changeGrids(direction);
        }
    },
    onReady() {
        context = this.$refs.canvas.getContext('2d');
    },
    onShow() {
        this.initGrids();
        this.drawGrids();

        timer = setInterval(this.run, 100);
    },
    drawGrids() {
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                let gridStr = grids[row][column].toString();

                context.fillStyle = "#BBADA0";
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);

                context.font = "30px HYQiHei-65S";
                if (gridStr != "0") {
                    context.fillStyle = "#000000";
                    let offsetX = (4 - gridStr.length) * (SIDELEN / 8);
                    let offsetY = (SIDELEN - 30) / 2;
                    context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);
                }
            }
        }
    },
    run(){
        this.currentSeconds = (Math.floor(parseFloat(this.currentSeconds) * 10+ 1) / 10).toString();
        if(parseFloat(this.currentSeconds) % 1 == 0){
            this.currentSeconds = this.currentSeconds + ".0";
        }
    },
    swipeGrids(event) {
        this.changeGrids(event.direction);
        this.drawGrids();

        if(this.gameover()){
            clearInterval(timer);
            this.isShow = true;
        }
    },
    gameover(){
        let originalgrids=[[1, 2, 3, 4],
                           [5, 6, 7, 8],
                           [9, 10, 11, 12],
                           [13, 14, 15, 0]];
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                if (grids[row][column] != originalgrids[row][column]){
                    return false;
                }
            }
        }
        return true;
    },
    changeGrids(direction) {
        let x;
        let y;
        for (let row = 0; row < 4; row++) {
            for (let column = 0; column < 4; column++) {
                if (grids[row][column] == 0) {
                    x = row;
                    y = column;
                    break;
                }
            }
        }
        let temp;
       if(this.isShow==false){
            if (direction == 'left' && (y + 1) < 4) {
                temp = grids[x][y + 1];
                grids[x][y + 1] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'right' && (y - 1) > -1) {
                temp = grids[x][y - 1];
                grids[x][y - 1] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'up' && (x + 1) < 4) {
                temp = grids[x + 1][y];
                grids[x + 1][y] = grids[x][y];
                grids[x][y] = temp;
            } else if (direction == 'down' && (x - 1) > -1) {
                temp = grids[x - 1][y];
                grids[x - 1][y] = grids[x][y];
                grids[x][y] = temp;
            }
        }
    },
    restartGame(){
        this.currentSeconds = "0.0";
        this.isShow = false;

        this.onShow();
    }
}
鲸云夕陌
关注
  • 3
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
【HarmonyOS】【ARK UI】怎么实现一个悬浮框
华为开发者联盟
07-28 645
config.json配置权限，代码如下在mianAbility进行配置，代码如下create(idvoid创建子窗口参数示例。
数字华容道———小游戏
08-29
做了一个数字华容道的小游戏练练手，偶尔会出现无解的情况。不过会玩的话应该会很快过关的。。。。。。。。。
Excel 数字华容道小游戏源代码，基于Excel VBA 宏制作的数字华容道小游戏源码
12-27
Excel 数字华容道小游戏源代码，基于Excel VBA 宏制作的数字华容道小游戏源码
鸿蒙应用调测助手,想不到吧，鸿蒙上可以开发小游戏了！
weixin_39761655的博客
05-30 796
11 月 4 日，首批 HarmonyOS 系统课程开发者张荣超老师为大家带来了一场主题为《从零开发鸿蒙小游戏APP》的精彩公开课，课上很多网友提出了自己关心的问题，下面我们就来和大家分享其中的精华部分：01如何将开发的 Lite Wearable 项目部署在鸿蒙手表 Watch GT2 Pro 真机上？步骤(1)生成秘钥和证书请求文件链接：https://developer.harmonyos....
HarmonyOS实战开发-实现一个计步器卡片应用
2401_82546228的博客
03-28 898
本篇Codelab基于Stage模型实现带有卡片的计步应用，用于介绍卡片的开发及生命周期实现。需要完成以下功能：
鸿蒙——贪吃蛇项目源码
09-23
鸿蒙——贪吃蛇项目源码，HarmonyOS实战 | 贪吃蛇游戏 | JS全注释
鸿蒙如何用JS开发智能手表App
公众号：Python研究者
09-19 2972
阅读本文需要3分钟 介绍如何用JS开发智能手表App，首先按下图创建智能手表的工程（工程名是MyFirstWatch）。 watch工程目录的结构与TV工程的结构类似，只是源代码除了java部分，还有js部分，而且多了个node_modules目录，用过Node的同学都应该很清楚，这个目录是保存Node中模块的。js目录包含了所有相关的JS、HTML和CSS代码。watch工程目录结构如下图所示。 现在着重看一下js目录，结构如下： 在js/default目录下，有3个...
『牛角书』HarmonyOS鸿蒙实战 开发一个简单聊天助手APP
weixin_56436907的博客
12-17 2209
基于鸿蒙的一个简单功能的聊天助手app
基于HarmonyOS的华为智能手表APP开发实战——Fitness
热门推荐
SongD1114的博客
10-12 1万+
本文针对华为HarmonyOS智能穿戴产品（即HUAWEI WATCH 3）开发了一款运动健康类的游戏化APP——Fitness，旨在通过游戏化的方式，提升用户运动动机。
鸿蒙开发实战一——手表篇
weixin_47354208的博客
06-13 2401
应用创建时触发 应用毁灭时触发 onlnit 页面数据已准备好，可以使用js中的数据： 资源准备好了 onReady 页面已编译完成， 可以将页面显示给用户 onShow 页面正在显示 onDestroy 表示页面正在销毁 flex-start 主（副）轴上左（上）对齐 flex-end 主（副）轴上右（下）对齐 center 主（副）轴上居中对齐 space-between 主轴上两端对齐 space-around 主轴上分散对齐 任务2：添加训练页面实现与主页面之间的相互.
基于HarmonyOS使用ArkTS开发的数字华容道APP（移动应用开发第二次实验）.zip
最新发布
04-07
github
Android数字华容道小游戏开发
01-04
它里面第一关是叫做数字华容道。说白了，就是和拼图差不多。一开始我准备下一个玩玩的。结果没搜到。所以决定写了一个。最后效果差不多是这样： 思路以及实现 首先，我们应该考虑如何去实现这个效果。细想一下，...
从零开发HarmonyOS（鸿蒙）运动手表小游戏——黑白翻棋
weixin_52542088的博客
11-16 5827
HarmonyOS（鸿蒙）运动手表第一个小游戏APP——黑白翻棋 前言 张荣超老师的从零开发鸿蒙小游戏App视频是一部非常优秀的入门视频，详细教导如何在运动手表上开发鸿蒙小游戏App——2048，保证观看完视频后即可完成一个鸿蒙小游戏APP的开发，原视频地址为：从零开发鸿蒙小游戏App，内附源代码下载，感兴趣的可以前往观看。此次博客是博主学习完此视频后，自行开发的第一个鸿蒙demo——黑白翻棋，能够使读者在观看完此次博客后能够自行开发第一个小游戏APP——黑白翻棋。 概述 本个demo将从零开始完成鸿蒙小游
从零开发HarmonyOS（鸿蒙）手机小游戏——数字华容道
weixin_52542088的博客
12-20 5822
HarmonyOS（鸿蒙）手机第一个小游戏app——数字华容道前言概述正文创建项目实现初始界面布局实现数字的随机打乱实现滑动或点击调换数字实现游戏成功界面源代码结语 前言 2月16号HarmonyOS2.0手机开发者Beta版已经发布了，作为“1+8+N”战略的重要入口和生态核心，怎么能少得了手机应用开发呢，今天将由深鸿会深大学习小组（Zzt_01-23）从零基础开发第一个HarmonyOS手机小游戏——数字华容道（界面略丑陋，大佬别喷），此前已经在运动手表上成功开发了：HarmonyOS运动手表游戏合并、
手把手教你上架HarmonyOS（鸿蒙）应用
weixin_52542088的博客
12-17 5236
HarmonyOS（鸿蒙）应用上架流程前言正文申请访问证书管理菜单生成密钥和证书请求文件申请证书和Profile编译构建生成HAP编译构建生成APP上架结语 前言 9月鸿蒙开发者大会，12月16号HarmonyOS2.0手机开发者Beta版发布，相信在那之后将会有越来越多开发者加入鸿蒙开发这个系列中，那么开发的应用如何上架应用市场呢？今天将由深鸿会深大学习小组博主（Zzt_01-23）手把手教你上架HarmonyOS应用，本次应用源代码选取从零实现HarmonyOS（鸿蒙）运动手表两个游戏的合并、Harmo
全网最详细Hi3861软件下载到配置环境全过程
weixin_52542088的博客
12-26 1657
最详细Hi3861环境搭建前言Linux环境搭建Linux 系统的环境搭建虚拟机下载编译代码设置apt-get源安装sambawindows映射Windows环境搭建Visual Studio Code安装Node.js安装hpm安装DevEco Device Tool插件安装C/C++插件安装附件结语 前言 正所谓“工欲善其事，必先利其器”，目前鸿蒙系统的开发方式是在Linux系统上面编译源码，Windows 系统上编写、烧录，故我们要搭建这两个的开发环境。今天将由深鸿会深大学习小组（Zzt_01-23）
数字华容道qt游戏代码压缩包
12-25
数字华容道qt游戏代码压缩包是一个包含了数字华容道qt游戏的源代码的压缩文件。这个游戏是基于qt平台开发的，玩家需要将乱序的数字按照从小到大的顺序重新排列。代码压缩包中包含了游戏的各个模块，包括界面设计、游戏逻辑、数字生成和移动等功能的实现代码。在使用这个压缩包时，需要先解压缩文件，然后在qt开发环境中打开项目文件，编译和运行游戏代码。 数字华容道qt游戏代码压缩包的使用范围很广泛。它可以用于学习和研究qt平台下游戏开发的相关知识，也可以作为参考和模板用于开发自己的数字华容道游戏项目。另外，对于对qt开发有一定经验的开发者来说，这个压缩包也可以用作快速开发原型或者调试qt游戏开发的参考代码。 除此之外，数字华容道qt游戏代码压缩包还可以作为技术交流和分享的载体。开发者可以将自己编写的代码分享出去，供其他对qt游戏开发感兴趣的人学习和使用。同时，他们也可以从其他开发者分享的代码中获取灵感和经验，从而提高自己的编码技术和游戏开发能力。总的来说，数字华容道qt游戏代码压缩包是一种非常有价值的资源，对于想要学习qt游戏开发及提高编码技术的人来说都是非常有帮助的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值