Jetons un coup d'œil aux rendus en premier:
Analyse fonctionnelle
Bien sûr, il s'agit de jouer. En tant que passionné de Vue, nous devons aller profondément dans le jeu et explorer la mise en œuvre du code. Ensuite, analysons les fonctions que les fonctions sont principalement nécessaires pour terminer un tel jeu. Ci-dessous, je listerai directement les points fonctionnels de cet exemple:
1. Générer au hasard des grilles de chiffres de 1 à 15. Chaque nombre doit apparaître et n'apparaître qu'une seule fois.
2. Après avoir cliqué sur un carré numérique, s'il y a un endroit au-dessus, en bas, à gauche et à droite, les deux positions d'échange
3. Chaque fois que la grille se déplace, nous devons vérifier s'il a réussi à passer le niveau.
4. Après avoir cliqué sur le bouton de réinitialisation du jeu, vous devez réorganiser les puzzles
Ce qui précède est les principaux points fonctionnels de cet exemple. On peut voir que les fonctions de jeu ne sont pas compliquées. Nous avons juste besoin de les briser un par un et ce sera OK. Ensuite, je montrerai les codes Vue de chaque point fonctionnel.
Construire un panneau de jeu
En tant que cadre JS basé sur les données, les modèles HTML de VUE doivent souvent être liés aux données. Par exemple, la grille de bloc d'un tel jeu ne doit pas être écrite ici. Le code est le suivant:
<template> <div> <ul> <li :class="{'puzzle': true, 'puzzle-empty': !puzzle}" v-for="puzzle in puzzles" v-text="puzzle" ></li> </ul> </div></template><script>export default { data () { return { puzzles: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]}}} </dcript>J'ai omis la partie de style CSS ici, donc vous n'avez pas à vous en soucier pour le moment. Dans le code ci-dessus, nous avons écrit les chiffres de 1 à 15 dans un tableau. Ce n'est évidemment pas trié au hasard, nous allons donc implémenter la fonction du tri aléatoire.
Tri aléatoire des nombres
<mpelate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-empty':! puzzle}" v-for = "puzzle dans les puzzles" v-text = "puzzle"> </li> </ul> </div> </ template> <script> Exporter par défaut {data () {return {puzzles: []}}, les méthodes: {// remet rder () {putzles: []}},, les méthodes: {// remet rder () {). puzzlearr = [], i = 1 // générer un tableau de 1 à 15 nombres pour (i; i <16; i ++) {puzzlearr.push (i)} // perturber au hasard le tableau puzzlearr = puzzlearr.sort (() => {return math.random () - 0,5}); // La page montre this.puzzles = puzzlearrr this.puzzles.push ('')},}, ready () {this.render ()}} Dans le code ci-dessus, nous utilisons la boucle pour générer un tableau ordonné de 1 ~ 15. Ensuite, nous utilisons la méthode de tri JS native pour perturber au hasard les nombres. Cela contient également un point de connaissance, qui est Math.random() .
Pour utiliser sort() pour le tri personnalisé, nous devons fournir une fonction de comparaison, puis renvoyer un nombre utilisé pour illustrer l'ordre relatif de ces deux valeurs, et sa valeur de retour est la suivante:
1. Renvoie une valeur inférieure à 0, indiquant que A est inférieur à B
2. Retour 0, indiquant que A est égal à B
3. Renvoie une valeur supérieure à 0, indiquant que A est supérieur à B
Ici, Math.random() est utilisé pour générer un nombre aléatoire entre 0 et 1, puis soustraire 0,5. De cette façon, la moitié de la probabilité renverra une valeur inférieure à 0 et la moitié de la probabilité renverra une valeur supérieure à 0, ce qui assure le caractère aléatoire du tableau généré et réalise la fonction de la génération aléatoire dynamique de grilles numériques.
Il convient de noter que nous avons également inséré une chaîne vide à la fin du tableau pour générer une grille vierge unique.
Position de blocage de commutation
<mpelate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-Empty' :! puzzle}" v-for = "puzzle dans les puzzles" v-text = "puzzle" @ click = "movefn ($ index)"> </li> </ul> </ div> </ template> <script> exporter default {data () {return {return {/ puzzles: []},}, {{): {) {return {/ puzzles: []},}, {{{) {) {return {/ puzzles: []},}, {{{{) {) {return {/ puzzles: []},},}, {) {) {return {/ puzzles: []. Reset render () {Soit puzzleary = [], i = 1 // générer un tableau de 1 à 15 nombres pour (i; i <16; i ++) {puzzlearr.push (i)} // aléatoire pour perturber le tableau puzzlearr = puzzlearrr.sort (() => {return math.random () - 0,5}); // La page montre this.puzzles = puzzleary this.puzzles.push ('')}, // cliquez sur le bloc movefn (index) {// obtenez la position de clic et ses valeurs de haut en bas et de gauche let Curnum = this.puzzles [index], gauche - 4], inférieur = this.puzzles [index + 4] // échange la valeur avec la position vide if (Leftnum === '') {this.puzzles. $ Set (index - 1, curnum) this.puzzles. $ Set (index, '')} else if (droite === '') {this.puzzles. $ Set (index + 1, curnnum) this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} else if (inférieur === '') {this.puzzles. $ set (index + 4, curnum) this.puzzles. }}, ready () {this.render ()}} </script>1. Ici, nous ajoutons d'abord l'événement de clic @ click = "movefn ($ index)" au LI de chaque grille, et utilisons le paramètre $ index pour obtenir la position du bloc de clics dans le tableau.
2. Deuxièmement, obtenez les valeurs d'index des nombres, en bas, en gauche et en droite dans le tableau, comme index - 4, index + 4, index - 1, index + 1
3. Lorsque nous trouvons un endroit vide en haut, en bas, en gauche et en droite, nous attribuons la position vide au numéro de la grille actuellement cliquée sur la position nul et définissons la position cliquée actuelle pour vider
Remarque: Pourquoi utilisons-nous la méthode $ SET au lieu d'attribuer directement des valeurs? Cela contient des points de connaissance sur le principe de la réactivité de Vue.
// En raison des limitations JavaScript, Vue.js ne peut pas détecter les modifications du tableau suivantes: // 1. Définir les éléments directement avec des index, tels que vM.Items [0] = {}; // 2. Modifier la longueur des données, telles que vm.items.length = 0. // Pour résoudre le problème (1), Vue.js étend le tableau d'observation et ajoute une méthode $ set ()Vérifiez si le test est réussi
<mpelate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-Empty' :! puzzle}" v-for = "puzzle dans les puzzles" v-text = "puzzle" @ click = "movefn ($ index)"> </li> </ul> </ div> </ template> <script> exporter default {data () {return {return {/ puzzles: []},}, {{): {) {return {/ puzzles: []},}, {{{) {) {return {/ puzzles: []},}, {{{{) {) {return {/ puzzles: []},},}, {) {) {return {/ puzzles: []. Reset render () {Soit puzzleary = [], i = 1 // générer un tableau de 1 à 15 nombres pour (i; i <16; i ++) {puzzlearr.push (i)} // aléatoire pour perturber le tableau puzzlearr = puzzlearrr.sort (() => {return math.random () - 0,5}); // La page montre this.puzzles = puzzleary this.puzzles.push ('')}, // cliquez sur le bloc movefn (index) {// obtenez la position de clic et ses valeurs de haut en bas et de gauche let Curnum = this.puzzles [index], gauche - 4], inférieur = this.puzzles [index + 4] // échange la valeur avec la position vide if (Leftnum === '') {this.puzzles. $ Set (index - 1, curnum) this.puzzles. $ Set (index, '')} else if (droite === '') {this.puzzles. $ Set (index + 1, curnnum) this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} else if (inférieur === '') {this.puzzles. $ set (index + 4, curnum) this.puzzles. $. this.passfn ()}, // Vérifiez s'il transmet le passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const iSpass = newpuzzles.every ((e, i) => e === i + 1) if (iSpass) {alert ('congrat, i) niveau! ')}}}}}}, ready () {this.render ()}} </script> Nous appelons la méthode passFn dans la méthode moveFn à détecter, et passFn implique deux points de connaissance:
(1) Méthode de tranche
Grâce à la méthode Slice, nous interceptons les 15 premiers éléments du tableau pour générer un nouveau tableau, bien sûr, l'élément suivant du tableau est vide.
(2) chaque méthode
Grâce à chaque méthode, nous boumons si chaque élément du tableau intercepté est égal à sa valeur index + 1. Si tout est égal, il renvoie vrai. S'il y en a un qui n'est pas égal, il renvoie faux.
Si vous réussissez le niveau, alors la valeur de ISPASS est vraie, et vous alerte "Félicitations, vous passez avec succès le niveau!" fenêtre d'invite. Sinon, vous n'inviterez pas.
Réinitialiser le jeu
La réinitialisation du jeu est en fait très simple, ajoutez simplement le bouton de réinitialisation et appelez render dessus:
<mpelate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-empty':! puzzle}" v-for = "puzzle dans les puzzles" v-text = "puzzle" @ click = "movefn ($ index)"> </li> </ul> </ bouton @ click = "render"> Réinitialiser le jeu </ bouton> </v> </vring> {puzzles: []}}, méthodes: {// réinitialiser render () {let puzzaryrr = [], i = 1 // générer un tableau contenant 1 à 15 nombres pour (i; i <16; i ++) {puzzlearr.push (i)} // aléatoire pour perturber le tableau puzzlear }); // La page montre this.puzzles = puzzleary this.puzzles.push ('')}, // cliquez sur le bloc movefn (index) {// obtenez la position de clic et ses valeurs de haut en bas et de gauche let Curnum = this.puzzles [index], gauche - 4], inférieur = this.puzzles [index + 4] // échange la valeur avec la position vide if (Leftnum === '') {this.puzzles. $ Set (index - 1, curnum) this.puzzles. $ Set (index, '')} else if (droite === '') {this.puzzles. $ Set (index + 1, curnnum) this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} else if (inférieur === '') {this.puzzles. $ set (index + 4, curnum) this.puzzles. $. this.passfn ()}, // Vérifiez s'il transmet le passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const iSpass = newpuzzles.every ((e, i) => e === i + 1) if (iSpass) {alert ('congrat, i) Niveau! ')}}}}}}, Ready () {this.render ()}} </cript> <style> @import url (' ./ actifs / css / bootstrap.min.css '); body {Font-Family: Arial, "Microsoft Yahei"; } .box {width: 400px; marge: 50px auto 0;}. puzzle-wap {width: 400px; hauteur: 400px; marge-fond: 40px; rembourrage: 0; Contexte: #ccc; Style de liste: aucun;}. Puzzle {float: Left; Largeur: 100px; hauteur: 100px; taille de police: 20px; Contexte: # F90; Texte-aligne: Centre; hauteur de ligne: 100px; Border: 1px solide #ccc; Box-shadow: 1px 1px 4px; Text-shadow: 1px 1px 1px # b9b4b4; curseur: pointeur;}. Puzzle-Empty {background: #ccc; Box-shadow: inset 2px 2px 18px;}. btn-reset {box-shadow: inset 2px 2px 18px;} </ style>Ici, j'ai ajouté le code CSS.
Résumer
Ce qui précède concerne cet article. En fait, le volume de code de ce jeu n'est pas beaucoup et les points de fonction ne sont pas très compliqués. Cependant, l'écriture d'un tel jeu via Vue nous aidera à comprendre le principe réactif de Vue motivé par les données. Tout en simplifiant la quantité de code, il augmente également la lisibilité du code. J'espère que cet article sera utile à tout le monde pour apprendre un Vue.