Directory:

1. Canvas component

2. Stack components

3, 2048 source code package

4, “from wechat small program to Hongmeng JS Development” series of articles collection

The Spring Festival at home back to see the Zhang Rongchao teacher “from zero development HongMeng little game” live lesson (harmonyos.51cto.com/activity/17 APP…

1. Canvas component

Canvas component, wechat small program also has, in which you can dynamically draw graphics and text. In 2048 games, different numbers corresponding to the background color is different, if the use of dynamic style, judgment and rendering of performance requirements will be very high.

<canvas class="content" id="canvas" onswipe="swipeGrids"></canvas>
Copy the code

1.1 Obtaining the drawing context

Given a component ID or ref, the component drawing context can be obtained in JS and drawn using the obtained CanvasRenderingContext2D object. The official document mentioned that the operation of obtaining drawing context cannot be called in onInit and onReady. After experiments, if the application is executed in onInit(), the screen will be blank, and the contents of the canvas in onReady() will not be drawn, so it needs to be written in onShow().

// Draw object var canvas; export default { data: { ... }, onShow() { canvas = this.$element("canvas").getContext("2d"); / / drawing enclosing drawGrids (); },... }Copy the code

Global variables that will be used in more than one method can be written in data or outside of export. For data that does not need to be bound in a page, writing it outside export might improve performance a bit.

1.2 Listen for slide events

The event binding that slides across the canvas is through the OnSwipe property, which is not stated in the official documentation, but is hinted at by the IDE. For the method entry, the log shows the following structure:

Event. direction There are four values: up, Down, left, and right, which can be used to determine the sliding direction.

1.3 Drawing a Rectangle

canvas.fillStyle = "#ffffff";
Copy the code

After obtaining the drawing context object, set its fillStyle property to a hexadecimal color to set the color of this drawing. You can also create a fill template using createLinearGradient() for a given gradient, createPattern().

canvas.fillRect(leftTopX, leftTopY, gridWidth, gridWidth);
Copy the code

The fillRect() method is used to draw a rectangle with four parameters: the upper-left x-coordinate, the upper-left y-coordinate, the width, and the height.

1.4 Drawing Text

canvas.font = "70px HYQiHei-65S";
canvas.fillStyle = gridTxColors[gridVal];
Copy the code

The font property specifies the size and font of the text, and fillStyle specifies the color of the text.

canvas.fillText(text, leftBottomX, leftBottomY);
Copy the code

The fillText() method is used to draw text. The three parameters are the text content, the X coordinate in the lower left corner, and the Y coordinate in the lower left corner. The last two parameters are the lower left corner, which is different from the wechat applet and fillRect() mentioned earlier.

Method of drawing 2048 squares and text:

// Grids: two-dimensional arrays that store numbers; GridBgColors: Objects that store the grid background colors; GridTxColors: Store text color object drawGrids() {for (let r = 0; r < 4; r++) { for (let c = 0; c < 4; c++) { let gridVal = grids[r][c].toString(); // Draw the background canvas. FillStyle = gridBgColors[gridVal]; let leftTopX = c * (gridWidth + gridMargin) + gridMargin; let leftTopY = r * (gridWidth + gridMargin) + gridMargin; // top-left x top-left y width height canvas.fillrect (leftTopX, leftTopY, gridWidth, gridWidth); // Draw the text canvas.font = "70px hyqii-65s "; if (gridVal ! = "0") { if (gridVal == "2" || gridVal == "4") { canvas.fillStyle = gridTxColors[gridVal]; } else { canvas.fillStyle = gridTxColors["others"]; } let offsetX = (4 - gridVal.length) * (gridWidth / 8); let offsetY = (gridWidth - fontSize) / 2; Y canvas.fillText(gridVal, leftTopX + offsetX, leftTopY + offsetY + fontSize - 5); }}}},Copy the code

Each time the number changes, call the above method to draw the effect of 2048.

2. Stack components

This component is interesting because the children in the stack are stacked in order. It is usually implemented in a Z-index style, but the implementation here combines the stack of data structures with the page hierarchy, which is very clever.

At the end of the game, the prompt text will cover the grid area:

<stack class="content"> <canvas class="content" id="canvas" onswipe="swipeGrids"></canvas> <div show="{{ isEnd }}"> <text> Game over </text> </div> </stack>Copy the code

In fact, hongmeng JS components do not support z-index style.

Author: Chris.

Want to know more, please visit: 51 cto and huawei officials strategic cooperation HongMeng technology community at https://harmonyos.51cto.com