The preface
has previously shared the development ideas of the black and white chess game. Interested readers can go to learn and exchange: black and white chess . Now I will share with you the development ideas of the second game, which is also a very classic game. ——Digital Huarong Road is also a Hongmeng demo developed by the Shenzhen Honghui Group after studying HarmonyOS. It describes the writing ideas of Digital Huarong Road in detail and contains detailed explanations. At the same time, we welcome all interested readers. Learn HarmonyOS development, communicate with each other and make progress together.
Overview
This demo will complete the compilation of the Hongmeng game APP on wearable devices from a zero basis. Here is a sports watch as an example. The software we use in the project is DevEco Studio. The download address is: DevEco Studio download , DevEco Studio installation tutorial , the content we want to achieve in the project is the development of the digital Huarongdao APP.
- A 4*4 square matrix is displayed in the initial interface. The square matrix contains randomly random numbers from 1 to 15 and a blank square. A timer is added above the square matrix to display the time of the game, in seconds. A "restart" button is displayed below the square matrix to provide users with the opportunity to restart the game.
- Swipe up, down, left, or right, the square in the corresponding position around the blank square will move one square in the corresponding direction, and the timer will also display the time from the start of the game to the current time.
- After several moves, when all the numbers are arranged in order, the game success interface will pop up, and there will be no change if you slide again. At this time, the timer above the square matrix stops timing, click the "restart" button Then it will return to the interface shown in step 1.
Text
Create the project
DevEco Studio after the successful download and installation, open DevEco Studio, click File in the upper left corner, click New, then select New Project, select the Lite Wearable option, select the default template, and then select the save path, and name the file Game1 (file The name cannot appear in Chinese or special characters, otherwise the project file will not be successfully created), and finally click Finish.
The main files are index.css, index.hml and index.js. The opening path is as shown in the figure. Index.hml is used to describe which components are included in the page, and index.css is used to describe what the components in the page look like. , Index.js is used to describe how the components in the page interact. 
To realize the layout of the start interface,
first, we need to draw a 4*4 square matrix. The numbers from 1 to 15 are displayed in the order. The upper part of the square shows "Current seconds: 0.0", and the lower part of the square has a " "Restart" button.
- Add the corresponding page components in index.hml: first create a basic container div class named container, which is used to hold all other components; then add a text component text class named seconds to this basic container, and indicate the display The fixed part of "current seconds:" gives a variable named currentSteps to the dynamic transformation part, which is used to dynamically display the number of seconds of the game; add a canvas component called canvas, and add a reference attribute ref, using To specify the reference information pointing to the child element or child component, the reference will be registered to the $refs property object of the parent component, so that a 4*4 square matrix can be drawn on this canvas; finally, a common button component is added, the class name is bit, and assign "restart" to restart the game
<div class="container" >
<text class="seconds">
当前秒数：{{currentSeconds}}
</text>
<canvas class="canvas" ref="canvas" ></canvas>
<input type="button" value="重新开始" class="bit"/>
</div>
2. Describe the style of the page component just added in index.css: first write the style of the container, flex-direction is the main axis direction of the container, select column (vertical direction from top to bottom), justify-content is the main axis of the current row of the container Alignment format, select center (the item is located in the center of the container), align-items is the cross-axis alignment format of the current row of the container, select center (the element is centered on the cross-axis), width and height are the width and height of the container in pixels, respectively , Set to 450px; then write the style of seconds, font-size is to set the size of the text, set to 18px, text-align is to set the text alignment of the text, select center (text aligned in the center), width and height respectively Set to 300px and 20px, letter-spacing is to set the character spacing of the text, set to 0px, margin-top is to set the top margin, set to 10px; then write the style of the canvas, width and height are set to 320px , Background-color is to set the background color, set to #FFFFFF; finally write the bit style, width and height are set to 150px and 30px, background-color is set to #AD9D8F, font-size is set to 24px, margin -top is set to 10px
.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;
}
3. Describe the component interactions in the page in index.js: First, set the currentSeconds value to 0.0 in data.
data: {
currentSeconds:'0.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);
}
}
}
}
至此，运行即可得出上述界面布局了。
实现数字的随机打乱和方格的移动
其次我们要在屏幕上随机生成一个数字被随意打乱的4*4的方阵，并且向任意方向滑动屏幕，空白方格周围对应位置的方格便会随之向对应的方向移动一格
1. 在index.hml中添加相应的页面组件：我们需要在画布中添加一个swipe属性，用于响应滑动事件，赋予一个所自动调用的函数swipeGrids
<canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>
2. 在index.css中描述刚才添加的页面组件的样式：这一部分不需要添加或修改页面组件的样式
3. Describe the interaction of the components on the page in index.js: first we have to move the grid, create a function changeGrids(direction), accept a parameter direction to indicate the direction of sliding, first find out where the blank grid is The corresponding two-dimensional array subscript, and then determine the parameter direction is'left','right','up' or'down', when isShow is false, the corresponding square and blank square corresponding to the two-dimensional array Value swap, create a function swipeGrids(event) that is automatically called in response to a sliding event, the parameter is the sliding event, call the function changeGrids(direction), and pass in the direction of the sliding, and finally call the function drawGrids()
The follow-up content and attachments of the article can click on the original link below to learn the
original link: https://harmonyos.51cto.com/posts/2006#bkwz
Hongmeng technology community built by 51CTO and Huawei official strategic cooperation
https://harmonyos.51cto.com/#bkwz