Avant-propos
Cette fois, c'est la première démo développée par le Shenzhen Group (Zzt_01-23) après avoir appris HarmonyOS, qui est la première démo développée par lui-même-Otto et Otto. Elle décrit en détail l'idée d'écrire Otto et Otto. Elle contient des explications détaillées ainsi que Bienvenue pour étudier le développement HarmonyOS avec tous les lecteurs intéressés, communiquer entre eux et progresser ensemble.
Vue d'ensemble
Cette démo complètera la compilation de l'application Hongmeng Mini Game sur les appareils portables à partir de zéro. Prenons une montre de sport comme exemple. Le logiciel que nous utilisons dans le projet est DevEco Studio. L'adresse de téléchargement est: Télécharger DevEco Studio , en Le contenu que nous voulons atteindre dans le projet est le développement de l'application d'échecs en noir et blanc.
- Un tableau 7 * 7 est affiché dans l'interface initiale. Les blocs noir et blanc du tableau sont perturbés aléatoirement. Le nombre de retournements de jeu est affiché sur le tableau et un bouton "redémarrer" est affiché en bas du tableau pour permettre aux utilisateurs de redémarrer le jeu.
- Cliquez sur n'importe quel bloc de couleur dans le tableau 7 * 7, les quatre blocs de couleur haut, bas, gauche et droite changeront également de couleur ensemble (le bloc de couleur sur le bord ne changera que la couleur de certains des blocs de couleur), et le nombre actuel d'étapes au-dessus du tableau correspondra Augmentez séquentiellement.
- Après plusieurs clics, lorsque tous les blocs de couleur sont blancs, l'interface de réussite du jeu apparaîtra. À ce moment, cliquez à nouveau sur le plateau, il n'y aura pas de changement, et cliquez sur le bouton "Redémarrer" pour revenir à l'interface de l'étape 1. Montré.
Une fois le
fichier de projet de création de texte
DevEco Studio téléchargé, cliquez sur Fichier dans le coin supérieur gauche, cliquez sur Nouveau, puis sélectionnez Nouveau projet, sélectionnez l'option Lite Wearable, sélectionnez le modèle par défaut, puis sélectionnez le chemin de sauvegarde et nommez le fichier MyGame (le nom du fichier ne peut pas apparaître en chinois Ou des caractères spéciaux, sinon le fichier projet ne sera pas créé avec succès), comme indiqué sur la figure. 
Les fichiers principaux sont index.css, index.hml et index.js. Le chemin d’ouverture est indiqué dans la figure. Index.hml est utilisé pour décrire les composants inclus dans la page et index.css est utilisé pour décrire à quoi ressemblent les composants de la page. , Index.js est utilisé pour décrire comment les composants de la page interagissent.
Pour réaliser la disposition de l'interface de départ,
nous devons d'abord dessiner un échiquier 7 * 7 sur la montre de sport. La couleur du bloc de couleur est d'abord réglée sur tout blanc. La partie supérieure de l'échiquier affiche "pas actuel: 0", et la partie inférieure de l'échiquier a un "renouveler". Bouton Démarrer, comme indiqué sur la figure:
- Tout d'abord, créez une classe div de conteneur de base nommée container dans le fichier index.hml, ajoutez une classe de texte de composant de texte nommée étapes au milieu du conteneur et écrivez la partie fixe de l'affichage "numéro de l'étape actuelle:" pour donner la partie de transformation dynamique Une variable nommée currentSteps, puis ajoutez une classe de canevas de composant de canevas nommée canevas, ajoutez un attribut de référence ref pour dessiner une table 7 * 7 sur ce canevas, et enfin ajoutez un bouton commun, le nom de la classe est bit et attribuez la valeur " Redémarrer"
<div class = "container"> <text class = "steps"> 当前 步 数 ： {{currentSteps}} </text> <canvas class = "canvas" ref = "canvas"> </canvas> <input type = "button" value = "重新 开始" class = "bit" /> </div> - Écrivez le style du composant qui vient d'être ajouté dans index.css. Tout d'abord, écrivez le style du conteneur, flex-direction est la direction de l'axe principal du conteneur, sélectionnez la colonne (direction verticale de haut en bas), justify-content est le format d'alignement de l'axe principal de la ligne actuelle du conteneur, sélectionnez centre (L'élément est situé au centre du conteneur), align-items est le format d'alignement transversal de la ligne actuelle du conteneur, sélectionnez center (l'élément est centré sur l'axe transversal), la largeur et la hauteur sont respectivement la largeur et la hauteur du conteneur en pixels, définies sur 450px; écrivez le style des étapes, la taille de la police est de définir la taille du texte, définie sur 18px, text-align est de définir l'alignement du texte du texte, sélectionnez le centre (texte aligné au centre), la largeur et la hauteur sont respectivement définies sur 300px et 20px , L'espacement des lettres sert à définir l'espacement des caractères du texte, défini sur 0px, margin-top est de définir la marge supérieure, définie sur 10px; écrivez le style de la toile, la largeur et la hauteur sont définies sur 320px, la couleur d'arrière-plan est définie sur l'arrière-plan Couleur, définie sur # BBADA0; le style, la largeur et la hauteur des bits d'écriture sont définis sur 150px et 30px, la couleur d'arrière-plan est définie sur # AD9D8F, la taille de la police est définie sur 24px, margin-top est définie sur 10px
.container { flex-direction: colonne; justify-content: centre; align-items: centre; largeur: 450px; hauteur: 450px; } .steps { taille de la police: 18px; text-align: centre; largeur: 300px; hauteur: 20px; espacement des lettres: 0px; marge supérieure: 10px; } .canvas { largeur: 320px; hauteur: 320px; couleur de fond: # BBADA0; } .bit { largeur: 150px; hauteur: 30px; couleur d'arrière-plan: # AD9D8F; taille de la police: 24px; marge supérieure: 10px; } - Écrivez dans index.js pour décrire comment les composants de la page interagissent. Tout d'abord, attribuez le numéro de l'étape actuelle à 0 dans la fonction de données.
données: { currentSteps: 0, }Définissez un contexte de variable globale au début du fichier et créez une fonction onReady () pour définir les outils de peinture 2D
var context; onReady () { context = this. $ refs.canvas.getContext ('2d'); }Utilisez 0 pour le blanc et 1 pour le noir. De cette manière, nous pouvons définir un dictionnaire de COULEURS avec 0 et 1 pour les clés et les couleurs pour les valeurs, et définir la longueur de côté constante globale SIDELEN à 40, l'espacement MARGIN à 5, et définir la seconde d'une variable globale Grilles de tableau dimensionnel, où les valeurs sont toutes 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" }Créez la fonction drawGrids (). Tout d'abord, utilisez la fonction toString () pour convertir toutes les valeurs des grilles en chaînes. FillStyle représente la couleur d'arrière-plan de l'image dessinée par l'entreprise. Reportez-vous simplement au dictionnaire. FillRect représente la taille du rectangle. Il existe quatre paramètres. Le premier Deux paramètres spécifient la coordonnée x du coin supérieur gauche du rectangle, le deuxième paramètre spécifie la coordonnée y du coin supérieur gauche du rectangle, le troisième paramètre spécifie la hauteur du rectangle et le quatrième paramètre spécifie la largeur du rectangle. Enfin, créez onShow () et appelez la fonction drawGrids (). pouvez
onShow () { this.drawGrids (); }, drawGrids () { for (let row = 0; row <7; row ++) { for (let column = 0; column <7; column ++) { let gridStr = grids [ligne] [colonne] .toString (); context.fillStyle = COULEURS [gridStr]; let leftTopX = colonne * (MARGE + SIDELEN) + MARGIN; let leftTopY = row * (MARGIN + SIDELEN) + MARGIN; context.fillRect (leftTopX, leftTopY, SIDELEN, SIDELEN); } } }Exécutez pour obtenir la disposition de l'interface de démarrage.
Réalisez la génération aléatoire de la question et le retournement du bloc de couleur.
Deuxièmement, nous devons d'abord générer au hasard un échiquier 7 * 7 avec des blocs de couleur perturbés sur la montre de sport, et cliquer sur n'importe quel bloc de couleur du tableau, les quatre blocs de couleur seront également Au fur et à mesure que la couleur change ensemble (les blocs de couleur sur le bord ne changeront que la couleur de plusieurs d'entre eux), le nombre actuel de pas au-dessus de l'échiquier augmentera en conséquence, comme indiqué sur la figure:
- Afin d'obtenir l'indice du tableau bidimensionnel correspondant lorsque vous cliquez sur n'importe quel bloc de couleur, nous devons ajouter un bouton bouton à chaque bloc de couleur, et ajouter un clic d'événement de clic, et définir un nom de classe et un bouton de clic pour ces boutons respectivement Ensuite, afin d'afficher le bouton en haut de la grille en damier, la fonction appelée doit ajouter une pile de bits de paramètre de nom de classe de pile de pile, afin que le canevas soit avancé vers la pile et que le bouton soit poussé dans la pile, afin que l'effet attendu puisse être obtenu. Le code index.hml est le suivant:
Le contenu de suivi et les pièces jointes de l'article peuvent cliquer sur le lien d'origine ci-dessous pour connaître le
lien d'origine: https://harmonyos.51cto.com/posts/2002#bkwz
Pour en savoir plus, veuillez visiter:
https://harmonyos.51cto.com/#bkwz