从零开发HarmonyOS（鸿蒙）运动手表小游戏——黑白翻棋

最新推荐文章于 2024-08-11 19:10:56 发布
最新推荐文章于 2024-08-11 19:10:56 发布
阅读量6.1k 收藏 61
点赞数 21
分类专栏： HarmonyOS 文章标签： 游戏 javascript 华为 app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52542088/article/details/109711961
版权
这篇博客详细记录了作者如何使用HarmonyOS（鸿蒙）开发一款运动手表上的黑白翻棋小游戏。从创建项目文件到实现游戏规则，包括开始界面布局、随机生成题目、色块翻转、游戏结束页面，以及颜色代码的介绍。适合初学者跟随学习，源代码在文末提供。
摘要由CSDN通过智能技术生成

HarmonyOS（鸿蒙）运动手表第一个小游戏APP——黑白翻棋

前言

此次博客是深鸿会博主（Zzt_01-23）学习完HarmonyOS（鸿蒙）后，自行开发的第一个鸿蒙demo——黑白翻棋，详细讲述了黑白翻棋的编写思路，内含详细解释，适合刚入门的小白，使读者在观看完此次博客后能够自行开发第一个小游戏APP——黑白翻棋，文末附有本个demo源代码。本博主也欢迎与各位感兴趣的读者一起学习HarmonyOS（鸿蒙）开发。

概述

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

  1. 在初始界面中显示7*7的棋盘，棋盘中黑白色块为随意打乱的，棋盘上面显示游戏翻转的次数，棋盘下方显示一个“重新开始”的按钮，为用户提供重新开始改游戏。
    图一
  2. 点击7*7棋盘中任一色块，其上下左右四个色块也会跟着一起变色（在边缘的色块则只会改变其中若干个色块的颜色），棋盘上方的当前步数则会相应依次增加。
    图二
  3. 经过若干次点击后，当所有的色块都为白色时，则会弹出游戏成功界面，此时再点击棋盘，不会有任何变化，点击“重新开始”的按钮时则会重新返回步骤1界面所示。
    图三

正文

创建项目文件

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

实现开始界面的布局

首先我们要先在运动手表上画出一个7*7的棋盘，色块颜色先设定为全是白色，棋盘上方显示“当前步数：0”，棋盘下方有一个“重新开始”的按钮，如图所示：
在这里插入图片描述

  1. 首先在index.hml文件中创建一个基础容器div类名为container
<div class="container" >
</div>

在此容器中间添加一个文字组件text类名为steps，并且写上显示的固定部分“当前步数：”，为动态变换部分赋予一个名为currentSteps的变量

<text class="steps">
        当前步数：{
   {
   currentSteps}}
    </text>

再添加一个画布组件canvas类名为canvas，增加一个引用属性ref，以便在此画布上画出7*7表格

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

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

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

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

<div class="container" >
    <text class="steps">
        当前步数：{
   {
   currentSteps}}
    </text>
    <canvas class="canvas" ref="canvas" ></canvas>
    <input type="button" value="重新开始" class="bit" />
</div>
  1. 在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;
}

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

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

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

.canvas{
   
    width:320px;
    height:320px;
    background-color: #BBADA0;
}

编写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文件已经全部编写完成了

.container {
   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.steps {
   
    font-size: 18px;
    text-align:center;
    width:300px;
    height:20px;
    letter-spacing:0px;
    margin-top:10px;
}
.canvas{
   
    width:320px;
    height:320px;
    background-color: #BBADA0;
}
.bit{
   
    width:150px;
    height:30px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}
  1. 在index.js编写描述页面中的组件是如何进行交互的，首先在data函数中为当前步数赋值为0
data: {
   
        currentSteps: 0,
    }

在文件开头定义一个全局变量量context，创建一个onReady()函数，用于定义2d绘画工具

var context;

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

用0表示白色，1代表黑色，这样我们就能定义一个用0和1表示键，颜色表示值的字典COLORS，并且定义全局常量边长SIDELEN为40，间距MARGIN为5，定义一个全局变量的二维数组grids，其中的值全为0

var grids=[[0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0]];

const SIDELEN=40;
const MARGIN=5;

const COLORS = {
   
    "0": "#FFFFFF",
    "1": "#000000"
}

创建drawGrids()函数，先将grids的值利用toString()函数全部转化为字符串，fillStyle表社画图的背景颜色，引用字典即可，fillRect表示画矩形的大小，其中有四个参数，第一个参数指定矩形左上角的x坐标，第二参数指定矩形左上角的y坐标，第三个参数指定矩形的高度，第四个参数指定矩形的宽度，最后创建onShow()调用drawGrids()函数即可

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

                context.fillStyle = COLORS[gridStr];
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
            }
        }
    }

至此，index.js文件已经全部编写完成了，运行即可得出开始界面布局了

var grids=[[0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0]];

var context;

const SIDELEN=40;
const MARGIN=5;

const COLORS = {
   
    "0": "#FFFFFF",
    "1": "#000000"
}

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

                context.fillStyle = COLORS[gridStr];
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
            }
        }
    }
}

实现题目的随机生成和色块的翻转

其次我们要先在运动手表上随机生成一个色块被打乱的7*7的棋盘，并且点击棋盘中任一色块，其上下左右四个色块也会跟着一起变色（在边缘的色块则只会改变其中若干个色块的颜色），棋盘上方的当前步数则会相应依次增加，如图所示：
在这里插入图片描述
在这里插入图片描述
1.为了使点击任意一个色块时能得到其对应的二维数组的下标，我们需要给每个色块添加一个按钮button，并增加一个点击事件click，分别给这些按钮设定一个类名和点击按钮所调用的函数然后为了使按钮显示在棋盘格子的上方，需要添加一个栈stack类名设定位stack，使画布先进栈，按钮后进栈，这样就能达到预期效果了，index.hml代码如下：

<div class="container" >
    <text class="steps">
        当前步数：{
   {
   currentSteps}}
    </text>
    <stack class="stack">
        <canvas class="canvas" ref="canvas" ></canvas>

        <input type="button" class="bitgrid1"  onclick="getgrid1"/>
        <input type="button" class="bitgrid2"  onclick="getgrid2"/>
        <input type="button" class="bitgrid3"  onclick="getgrid3"/>
        <input type="button" class="bitgrid4"  onclick="getgrid4"/>
        <input type="button" class="bitgrid5"  onclick="getgrid5"/>
        <input type="button" class="bitgrid6"  onclick="getgrid6"/>
        <input type="button" class="bitgrid7"  onclick="getgrid7"/>
        <input type="button" class="bitgrid8"  onclick="getgrid8"/>
        <input type="button" class="bitgrid9"  onclick="getgrid9"/>
        <input type="button" class="bitgrid10"  onclick="getgrid10"/>
        <input type="button" class="bitgrid11"  onclick="getgrid11"/>
        <input type="button" class="bitgrid12"  onclick="getgrid12"/>
        <input type="button" class="bitgrid13"  onclick="getgrid13"/>
        <input type="button" class="bitgrid14"  onclick="getgrid14"/>
        <input type="button" class="bitgrid15"  onclick="getgrid15"/>
        <input type="button" class="bitgrid16"  onclick="getgrid16"/>
        <input type="button" class="bitgrid17"  onclick="getgrid17"/>
        <input type="button" class="bitgrid18"  onclick="getgrid18"/>
        <input type="button" class="bitgrid19"  onclick="getgrid19"/>
        <input type="button" class="bitgrid20"  onclick="getgrid20"/>
        <input type="button" class="bitgrid21"  onclick="getgrid21"/>
        <input type="button" class="bitgrid22"  onclick="getgrid22"/>
        <input type="button" class="bitgrid23"  onclick="getgrid23"/>
        <input type="button" class="bitgrid24"  onclick="getgrid24"/>
        <input type="button" class="bitgrid25"  onclick="getgrid25"/>
        <input type="button" class="bitgrid26"  onclick="getgrid26"/>
        <input type="button" class="bitgrid27"  onclick="getgrid27"/>
        <input type="button" class="bitgrid28"  onclick="getgrid28"/>
        <input type="button" class="bitgrid29"  onclick="getgrid29"/>
        <input type="button" class="bitgrid30"  onclick="getgrid30"/>
        <input type="button" class="bitgrid31"  onclick="getgrid31"/>
        <input type="button" class="bitgrid32"  onclick="getgrid32"/>
        <input type="button" class="bitgrid33"  onclick="getgrid33"/>
        <input type="button" class="bitgrid34"  onclick="getgrid34"/>
        <input type="button" class="bitgrid35"  onclick="getgrid35"/>
        <input type="button" class="bitgrid36"  onclick="getgrid36"/>
        <input type="button" class="bitgrid37"  onclick="getgrid37"/>
        <input type="button" class="bitgrid38"  onclick="getgrid38"/>
        <input type="button" class="bitgrid39"  onclick="getgrid39"/>
        <input type="button" class="bitgrid40"  onclick="getgrid40"/>
        <input type="button" class="bitgrid41"  onclick="getgrid41"/>
        <input type="button" class="bitgrid42"  onclick="getgrid42"/>
        <input type="button" class="bitgrid43"  onclick="getgrid43"/>
        <input type="button" class="bitgrid44"  onclick="getgrid44"/>
        <input type="button" class="bitgrid45"  onclick="getgrid45"/>
        <input type="button" class="bitgrid46"  onclick="getgrid46"/>
        <input type="button" class="bitgrid47"  onclick="getgrid47"/>
        <input type="button" class="bitgrid48"  onclick="getgrid48"/>
        <input type="button" class="bitgrid49"  onclick="getgrid49"/>
    </stack>
    <input type="button" value="重新开始" class="bit" />
</div>
  1. 编写stack的样式，width、height都设定为320px，margin-top设定为10px
.<
最低0.47元/天 解锁文章
鲸云夕陌
关注
专栏目录
从零开发HarmonyOS（鸿蒙）手机小游戏——数字华容道
weixin_52542088的博客
12-20 6622
HarmonyOS（鸿蒙）手机第一个小游戏app——数字华容道前言概述正文创建项目实现初始界面布局实现数字的随机打乱实现滑动或点击调换数字实现游戏成功界面源代码结语 前言 2月16号HarmonyOS2.0手机开发者Beta版已经发布了，作为“1+8+N”战略的重要入口和生态核心，怎么能少得了手机应用开发呢，今天将由深鸿会深大学习小组（Zzt_01-23）从零基础开发第一个HarmonyOS手机小游戏——数字华容道（界面略丑陋，大佬别喷），此前已经在运动手表上成功开发了：HarmonyOS运动手表游戏合并、
鸿蒙应用开发游戏（一）---大鱼吃小鱼（界面部署）
shudaoshanQAQ的博客
03-14 1994
大鱼吃小鱼
鸿蒙HarmonyOS NEXT开发：半模态转场
最新发布
shudaoshanBBQ的博客
08-11 1319
通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。
鸿蒙系统开发游戏,鸿蒙原生开发游戏----给鸿蒙引入一些游戏思想
weixin_33771816的博客
06-02 752
鸿蒙有很多布局组件，但我们不需要他们的自适应布局，因为这只适合软件不适合游戏，所以布局最好只使用DependentLayout(相对布局)，组件只使用Image当我们的精灵。层级:鸿蒙没有层级思想，只有先后加载，后加载的层级大于前面的层级。但有父子的思想。所以我们可以提前设置层级。比如下图这个意思ohos:id="$+id:game_root"ohos:width="match_parent"oh...
【鸿蒙实战开发项目】HarmonyOS原生应用开发小游戏你画我猜
HarmonyOS_001的博客
06-28 1165
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。获取完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）
鸿蒙应用调测助手,想不到吧，鸿蒙上可以开发小游戏了！
weixin_39761655的博客
05-30 905
11 月 4 日，首批 HarmonyOS 系统课程开发者张荣超老师为大家带来了一场主题为《从零开发鸿蒙小游戏APP》的精彩公开课，课上很多网友提出了自己关心的问题，下面我们就来和大家分享其中的精华部分：01如何将开发的 Lite Wearable 项目部署在鸿蒙手表 Watch GT2 Pro 真机上？步骤(1)生成秘钥和证书请求文件链接：https://developer.harmonyos....
从零开发HarmonyOS（鸿蒙）运动手表小游戏——数字华容道
weixin_52542088的博客
11-21 5025
HarmonyOS（鸿蒙）运动手表第二个小游戏app——数字华容道前言概述正文创建项目实现开始界面的布局实现数字的随机打乱和方格的移动 前言 此次博客是深鸿会博主（Zzt_01-23）学习完HarmonyOS（鸿蒙）后，自行开发的第二个鸿蒙demo——数字华容道，详细讲述了数字华容道的开发思路，适合刚入门小白，使读者能自行从零开发一个小游戏APP——数字华容道，文末附有整个demo的源代码，有兴趣的读者也可以前往观看我的第一个游戏开发学习：黑白翻棋，较第一个而言，此次只是多了滑动事件和计时器，其他组件和第一
HarmonyOS鸿蒙快速入门应用开发基础+进阶视频.zip
05-24
02.3 HarmonyOS设备开发平台介绍 02.4 分布式应用开发实例演示 02.5 第2期答疑环节 03.1 致软件工程师的灵魂拷问 03.2 重新定位_人_设备_场景的关系 03.3 应用开发者面临的挑战 03.4 DevEco_Studio提供分布式多设备...
HarmonyOS 鸿蒙小应用.zip
02-07
HarmonyOSSampleCloud-main 是一个基于华为鸿蒙操作系统（HarmonyOS）开发的小应用程序示例项目。这个压缩包包含了开发者需要的源代码、资源文件以及相关的文档，旨在帮助开发者理解和学习如何在鸿蒙系统上构建小...
鸿蒙HarmonyOS项目实战开发：井字过三关小游戏_基于harmonyos的井字棋游戏开发
2401_84870988的博客
05-12 994
Button(‘确定’).width(200).height(50).fontSize(30).onClick(() => {//…})点击游戏规则的弹窗由Text，Text，button组成，具体实现可以参考弹窗1，和源代码。
智能手表源码
01-02
智能手表源码，嵌入式平台智能手表，WTM32智能手表开发源码
鸿蒙小游戏开发demo实例
weixin_63998921的博客
10-25 1424
简单学个demo熟悉一下开发流程哈~
【鸿蒙实战开发项目】小游戏-界面部署一
HarmonyOS_666的博客
07-12 1128
到这里，界面部署就算完成了。还是非常简单的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙小游戏-俄罗斯方块
大数据爱好者的博客
12-15 1024
经典的鸿蒙手机小游戏——俄罗斯方块
鸿蒙开发小demo
weixin_46148684的博客
07-21 1138
鸿蒙开发-Java-登录界面、跳转界面、跑马灯项目项目截图graphic中的代码.XML登录界面代码.XML.Javastring.jsonconfig.json主页代码.XML.Java赤壁赋部分代码.XML.Java图片 菜鸟一个一枚，有错误直接喷 项目 项目截图 登录界面 输入错误的界面 主页 进入功能页 进入正文 graphic中的代码 .XML <?xml version="1.0" encoding="UTF-8" ?> <shape xmlns:ohos="
HarmonyOS应用开发实战 | 开发运动手表小游戏
HarmonyOS技术社区
11-27 2792
HarmonyOS（鸿蒙）运动手表第一个小游戏app——黑白翻棋 从零开发HarmonyOS（鸿蒙）运动手表小游戏——数字华容道
鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
热门推荐
shudaoshanQAQ的博客
03-14 1万+
鸿蒙项目实战全家桶
鸿蒙应用开发教程第06期：手把手教你写项目！
传智播客的专栏
08-03 493
黑马程序员为了帮助开发者先行一步，把最前沿的优质开发技术教授于IT开发者，依托自身强大的课程研发力量，集结1000余名课研老师和技术大牛，推出首套《HarmonyOS 2.0鸿蒙应用开发实...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值