2020征文-手表深鸿会深大小组：鸿蒙HarmonyOS手表游戏之黑白翻棋

想了解更多内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

 前言

此次是深鸿会深大小组(Zzt_01-23)学习完HarmonyOS后，自行开发的第一个demo——黑白翻棋，详细讲述了黑白翻棋的编写思路，内含详细解释，同时也欢迎与各位感兴趣的读者一起学习HarmonyOS开发，相互交流、共同进步。

概述

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

在初始界面中显示7*7的棋盘，棋盘中黑白色块为随意打乱的，棋盘上面显示游戏翻转的次数，棋盘下方显示一个“重新开始”的按钮，为用户提供重新开始改游戏。

点击7*7棋盘中任一色块，其上下左右四个色块也会跟着一起变色(在边缘的色块则只会改变其中若干个色块的颜色)，棋盘上方的当前步数则会相应依次增加。

经过若干次点击后，当所有的色块都为白色时，则会弹出游戏成功界面，此时再点击棋盘，不会有任何变化，点击“重新开始”的按钮时则会重新返回步骤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，在此容器中间添加一个文字组件text类名为steps，并且写上显示的固定部分”当前步数：”，为动态变换部分赋予一个名为currentSteps的变量，再添加一个画布组件canvas类名为canvas，增加一个引用属性ref，以便在此画布上画出7*7表格，最后添加一个普通按钮，类名为bit，并赋值“重新开始”。

<div class="container" > 
    <text class="steps"> 
        当前步数：{{currentSteps}} 
    </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;编写steps的样式，font-size为设置文本的尺寸，设定为18px，text-align为设置文本的文本对齐方式，选择center(文本居中对齐)，width、height分别设定为300px和20px，letter-spacing为设置文本的字符间距，设定为0px，margin-top为设置上外边距，设定为10px;编写canvas的样式，width、height都设定为320px，background-color为设置背景颜色，设定为#BBADA0;编写bit的样式，width、height分别设定为150px和30px，background-color设定为#AD9D8F，font-size设定为24px，margin-top设定为10px。

本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！