Prólogo
Esta vez es la primera demostración desarrollada por el Grupo Shenzhen (Zzt_01-23) después de aprender HarmonyOS, que es la primera demostración desarrollada por ellos mismos: Otto y Otto. Describe en detalle la idea de escribir Otto y Otto. Contiene explicaciones detalladas y también Bienvenido a estudiar el desarrollo de HarmonyOS con todos los lectores interesados, comunicarse entre sí y progresar juntos.
Descripción general
Esta demostración completará la compilación de la aplicación Hongmeng Mini Game en dispositivos portátiles desde cero. Tome un reloj deportivo como ejemplo. El software que usamos en el proyecto es DevEco Studio. La dirección de descarga es: Descargar DevEco Studio , en El contenido que queremos lograr en el proyecto es el desarrollo de la APP de ajedrez en blanco y negro.
- Se muestra un tablero de 7 * 7 en la interfaz inicial. Los bloques en blanco y negro del tablero se mezclan aleatoriamente. El número de giros del juego se muestra en el tablero, y se muestra un botón de "reiniciar" en la parte inferior del tablero, que permite a los usuarios reiniciar el juego.
- Haga clic en cualquier bloque de color en el tablero 7 * 7, los cuatro bloques de color arriba, abajo, izquierda y derecha también cambiarán de color juntos (el bloque de color en el borde solo cambiará el color de algunos de los bloques de color), y el número actual de pasos sobre el tablero será el correspondiente Incrementar secuencialmente.
- Después de varios clics, cuando todos los bloques de color sean blancos, aparecerá la interfaz de éxito del juego. En este momento, haga clic en el tablero nuevamente, no habrá cambios, y haga clic en el botón "Reiniciar" para volver a la interfaz del paso 1. Mostrado.
Después de que el
archivo del proyecto de creación de texto
DevEco Studio se haya descargado correctamente, haga clic en Archivo en la esquina superior izquierda, haga clic en Nuevo, luego seleccione Nuevo proyecto, seleccione la opción Lite Wearable, seleccione la plantilla predeterminada y luego seleccione la ruta de guardado y asigne un nombre al archivo MyGame (el nombre del archivo no puede aparecer en chino O caracteres especiales, de lo contrario el archivo del proyecto no se creará correctamente), como se muestra en la figura. 
Los archivos principales son index.css, index.hml e index.js. La ruta de apertura es como se muestra en la figura. Index.hml se usa para describir qué componentes están incluidos en la página, e index.css se usa para describir cómo se ven los componentes en la página. , Index.js se utiliza para describir cómo interactúan los componentes de la página.
Para realizar el diseño de la interfaz de inicio,
primero necesitamos dibujar un tablero de ajedrez de 7 * 7 en el reloj deportivo. El color del bloque de color se establece primero en todo blanco. La parte superior del tablero de ajedrez muestra "paso actual: 0", y la parte inferior del tablero de ajedrez tiene un "renovar". Botón de inicio, como se muestra en la figura:
- Primero, cree una clase div de contenedor básica llamada contenedor en el archivo index.hml, agregue una clase de texto de componente de texto llamada pasos en el medio del contenedor y escriba la parte fija de la pantalla "número de paso actual:" para dar la parte de transformación dinámica Una variable llamada currentSteps, y luego agregue una clase de lienzo de componente de lienzo llamada lienzo, agregue un atributo de referencia ref para dibujar una tabla 7 * 7 en este lienzo, y finalmente agregue un botón común, el nombre de la clase es bit, y asigne el valor " Reiniciar"
<div class = "container"> <text class = "steps"> 当前 步 数 ： {{currentSteps}} </text> <canvas class = "canvas" ref = "canvas"> </canvas> <input type = "botón" value = "重新 开始" class = "bit" /> </div> - Escriba el estilo del componente que acaba de agregar en index.css. Primero, escriba el estilo del contenedor, flex-direction es la dirección del eje principal del contenedor, seleccione la columna (dirección vertical de arriba a abajo), justify-content es el formato de alineación del eje principal de la fila actual del contenedor, seleccione el centro (El elemento está ubicado en el centro del contenedor), align-items es el formato de alineación de eje transversal de la fila actual del contenedor, seleccionar centro (el elemento está centrado en el eje transversal), width y height son el ancho y alto del contenedor en píxeles, respectivamente, establecidos en 450px; escriba el estilo de los pasos, font-size es para establecer el tamaño del texto, establecido en 18px, text-align es para establecer la alineación del texto del texto, seleccione el centro (texto alineado en el centro), ancho y alto se establecen en 300px y 20px respectivamente , El espaciado entre letras es para establecer el espaciado de caracteres del texto, establecido en 0px, margin-top es para establecer el margen superior, establecido en 10px; escriba el estilo del lienzo, el ancho y la altura se establecen en 320px, el color de fondo se establece en el fondo Color, establecido en # BBADA0; el estilo de bit de escritura, el ancho y la altura se establecen en 150px y 30px, el color de fondo se establece en # AD9D8F, el tamaño de fuente se establece en 24px, el margin-top se establece en 10px
.container { flex-direction: column; justificar-contenido: centro; alinear-elementos: centro; ancho: 450px; altura: 450px; } .steps { tamaño de fuente: 18px; alineación de texto: centro; ancho: 300px; altura: 20px; espaciado entre letras: 0px; margen superior: 10px; } .canvas { ancho: 320px; altura: 320px; color de fondo: # BBADA0; } .bit { ancho: 150px; altura: 30px; color de fondo: # AD9D8F; tamaño de fuente: 24px; margen superior: 10px; } - Escriba index.js para describir cómo interactúan los componentes de la página. Primero, asigne el número de paso actual a 0 en la función de datos.
datos: { currentSteps: 0, }Defina un contexto de variable global al principio del archivo y cree una función onReady () para definir herramientas de pintura 2d
var context; onReady () { contexto = esto. $ refs.canvas.getContext ('2d'); }Use 0 para blanco y 1 para negro. De esta manera, podemos definir un diccionario de COLORES con 0 y 1 para claves y colores para valores, y definir la longitud del lado constante global SIDELEN a 40, el espaciado MARGIN a 5, y definir el segundo de una variable global Cuadrículas de matriz dimensional, donde los valores son todos 0
var cuadrículas = [[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; MARGEN const = 5; COLORES const = { "0": "#FFFFFF", "1": "# 000000" }Cree la función drawGrids (). Primero, use la función toString () para convertir todos los valores de las cuadrículas en cadenas. FillStyle representa el color de fondo de la imagen dibujada por la empresa. Simplemente consulte el diccionario. FillRect representa el tamaño del rectángulo. Hay cuatro parámetros. El primero Dos parámetros especifican la coordenada x de la esquina superior izquierda del rectángulo, el segundo parámetro especifica la coordenada y de la esquina superior izquierda del rectángulo, el tercer parámetro especifica la altura del rectángulo y el cuarto parámetro especifica el ancho del rectángulo. Finalmente, cree onShow () y llame a la función drawGrids (). lata
onShow () { this.drawGrids (); }, drawGrids () { for (let row = 0; row <7; row ++) { for (let column = 0; column <7; column ++) { let gridStr = grids [fila] [columna] .toString (); context.fillStyle = COLORES [gridStr]; let leftTopX = columna * (MARGEN + SIDELEN) + MARGIN; let leftTopY = fila * (MARGEN + SIDELEN) + MARGIN; context.fillRect (leftTopX, leftTopY, SIDELEN, SIDELEN); } } }Ejecutar para obtener el diseño de la interfaz de inicio.
Realice la generación aleatoria de la pregunta y el giro del bloque de color.
En segundo lugar, primero debemos generar aleatoriamente un tablero de ajedrez de 7 * 7 con bloques de color interrumpidos en el reloj deportivo, y hacer clic en cualquier bloque de color en el tablero, los cuatro bloques de color también serán A medida que el color cambia juntos (los bloques de color en el borde solo cambiarán el color de varios de ellos), el número actual de pasos sobre el tablero de ajedrez aumentará en consecuencia, como se muestra en la figura:
- Para obtener el subíndice de la matriz bidimensional correspondiente al hacer clic en cualquier bloque de color, debemos agregar un botón de botón a cada bloque de color, y agregar un clic de evento de clic, y establecer un nombre de clase y un botón de clic para estos botones respectivamente Luego, para mostrar el botón en la parte superior de la cuadrícula del tablero de ajedrez, la función llamada debe agregar una pila de bits de configuración de nombre de clase de pila, de modo que el lienzo avance a la pila y el botón se presione en la pila, de modo que se pueda lograr el efecto esperado. El código index.hml es el siguiente:
El contenido de seguimiento y los archivos adjuntos del artículo pueden hacer clic en el enlace original a continuación para conocer el
enlace original: https://harmonyos.51cto.com/posts/2002#bkwz
Para obtener más información, visite:
Comunidad tecnológica de Hongmeng creada por la cooperación estratégica oficial 51CTO y Huawei
https://harmonyos.51cto.com/#bkwz