Echemos un vistazo a las representaciones primero:
Análisis funcional
Por supuesto, se trata de jugar. Como entusiasta de Vue, debemos profundizar en el juego y explorar la implementación del código. A continuación, analicemos qué funciones se necesitan principalmente para completar dicho juego. A continuación enumeraré directamente los puntos funcionales de este ejemplo:
1. Genere al azar las cuadrículas de dígitos de 1 a 15. Cada número debe aparecer y solo aparecer una vez.
2. Después de hacer clic en un cuadrado digital, si hay un lugar arriba, abajo, izquierda y derecha, las dos posiciones de intercambio
3. Cada vez que se mueve la cuadrícula, debemos verificar si ha pasado con éxito el nivel.
4. Después de hacer clic en el botón Restablecer el juego, debes reordenar los rompecabezas
Los anteriores son los principales puntos funcionales de este ejemplo. Se puede ver que las funciones del juego no son complicadas. Solo necesitamos romperlos uno por uno y estará bien. A continuación, mostraré los códigos VUE de cada punto funcional.
Construir un panel de juego
Como marco JS basado en datos, las plantillas HTML de VUE a menudo deberían estar vinculadas a datos. Por ejemplo, la cuadrícula de bloque de dicho juego no debe escribirse aquí. El código es el siguiente:
<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]}}} </script>He omitido la parte de estilo CSS aquí, por lo que no tienes que preocuparte por ahora. En el código anterior, escribimos los números del 1 al 15 en una matriz. Obviamente, esto no se clasifica al azar, por lo que implementaremos la función de la clasificación aleatoria.
Clasificación aleatoria de números
<template> <div> <ul> <li: class = "{'Puzzle': true, 'Puzzle-Eempty':! Puzzle}" v-For = "Puzzle en rompecabezas" v-text = "Puzzle"> </li> </ul> </div> </splate> <script> exporta predeterminado {data () {return {raya {raylles: []}}}: {////set). {Let Puzzlearr = [], i = 1 // Genere una matriz de 1 a 15 números para (i; i <16; i ++) {PuzzlearR.push (i)} // interrumpir aleatoriamente la matriz Puzzlearr = PuzzlearR.sort (() => {return Math.Random () - 0.5}); // La página muestra esto.puzzles = Puzzlearr this.puzzles.push ('')},}, Ready () {this.render ()}} En el código anterior, usamos el bucle for para generar una matriz ordenada de 1 ~ 15. Luego usamos el método de clasificación JS nativo para interrumpir aleatoriamente los números. Esto también contiene un punto de conocimiento, que es Math.random() .
Para usar sort() para la clasificación personalizada, necesitamos proporcionar una función de comparación y luego devolver un número utilizado para ilustrar el orden relativo de estos dos valores, y su valor de retorno es el siguiente:
1. Devolver un valor inferior a 0, lo que indica que A es menor que B
2. Return 0, lo que indica que A es igual a B
3. Devolver un valor mayor que 0, lo que indica que A es mayor que B
Aquí, Math.random() se usa para generar un número aleatorio entre 0 y 1, y luego reste 0.5. De esta manera, la mitad de la probabilidad devolverá un valor inferior a 0 y la mitad de la probabilidad devolverá un valor mayor que 0, lo que garantiza la aleatoriedad de la matriz generada y realiza la función de la generación aleatoria dinámica de cuadrículas numéricas.
Cabe señalar que también insertamos una cadena vacía al final de la matriz para generar una cuadrícula en blanco única.
Posición del bloque de interruptor
<template> <div> <ul> <li: class = "{'Puzzle': true, 'Puzzle-Eempty':! Puzzle}" V-For = "Puzzle en Pujules" V-Text = "Puzzle" @Click = "Movefn ($ index)"> </li> </ul> </div> </tempate> <script> exportación {data () {retorno {Puerta de retorno Métodos: {// restablecer render () {let Puzzlearr = [], i = 1 // Generar una matriz de 1 a 15 números para (i; i <16; i ++) {PuzzlearR.Push (i)} // aleatorios para interrumpir la matriz Pompi -Azzlearr = PuzzLearr.sort (() => {return Math.random () - 0.5}); // La página muestra esto.puzzles = Puzzlearr this.puzzles.push ('')}, // Haga clic en el bloque Movefn (index) {// Obtenga la posición de clic y sus valores arriba y abajo y dejen curnum = this.puzzles [index], izquierda = this.puzzles [index - 1], rightnum = this.puzzles [index + 1], topnum - 4], BottomNum = this.puzzles [índice + 4] // intercambia el valor con la posición vacía if (leftnum === '' ') {this.puzzles. $ Set (index - 1, curnum) this.puzzles. $ Set (index,' '')} de lo contrario (rightNum === '' ') {this.puzzles. $ Set (index + 1, curnum) this.puzzles. $ set (index, '')} else if (topnum ==== '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} más if (bottomNum === '' ') {this.puzzles. $ set (index + 4, curnum) this.puzzles. }}, Ready () {this.render ()}} </script>1. Aquí agregamos primero el evento de clic @Click = "Movefn ($ índice)" a la li de cada cuadrícula, y usamos el parámetro $ índice para obtener la posición del bloque de clics en la matriz.
2. En segundo lugar, obtenga los valores de índice de los números hacia arriba, hacia abajo, izquierda y derecha en la matriz, como índice - 4, índice + 4, índice - 1, índice + 1
3. Cuando encontramos un lugar que está vacío en la parte superior, inferior, izquierda y derecha, asignamos la posición vacía a la cantidad de la cuadrícula actualmente haciendo clic en la posición nula y establece la posición actualizada para vaciar para vaciar
Nota: ¿Por qué usamos el método $ set en lugar de asignar valores directamente? Esto contiene puntos de conocimiento sobre el principio de respuesta a VUE.
// Debido a las limitaciones de JavaScript, Vue.js no puede detectar los siguientes cambios en la matriz: // 1. Establezca elementos directamente con índices, como vm.items [0] = {}; // 2. Modifique la longitud de los datos, como vm.items.length = 0. // para resolver el problema (1), vue.js extiende la matriz de observación y agrega un método $ set () a it: // mismo que `ejemplo1.items [0] = ...`, pero puede activar el ejemplo de actualización de la vista 1.Items.Compruebe si la prueba es exitosa
<template> <div> <ul> <li: class = "{'Puzzle': true, 'Puzzle-Eempty':! Puzzle}" V-For = "Puzzle en Pujules" V-Text = "Puzzle" @Click = "Movefn ($ index)"> </li> </ul> </div> </tempate> <script> exportación {data () {retorno {Puerta de retorno Métodos: {// restablecer render () {let Puzzlearr = [], i = 1 // Generar una matriz de 1 a 15 números para (i; i <16; i ++) {PuzzlearR.Push (i)} // aleatorios para interrumpir la matriz Pompi -Azzlearr = PuzzLearr.sort (() => {return Math.random () - 0.5}); // La página muestra esto.puzzles = Puzzlearr this.puzzles.push ('')}, // Haga clic en el bloque Movefn (index) {// Obtenga la posición de clic y sus valores arriba y abajo y dejen curnum = this.puzzles [index], izquierda = this.puzzles [index - 1], rightnum = this.puzzles [index + 1], topnum - 4], BottomNum = this.puzzles [índice + 4] // intercambia el valor con la posición vacía if (leftnum === '' ') {this.puzzles. $ Set (index - 1, curnum) this.puzzles. $ Set (index,' '')} de lo contrario (rightNum === '' ') {this.puzzles. $ Set (index + 1, curnum) this.puzzles. $ set (index, '')} else if (topnum ==== '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} más if (dottomNum === '' ') {this.puzzles. $ set (index + 4, curnum) this.puzzles. this.passfn ()}, // Verifique si pasa el passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) constspass = newpuzzles.every ((e, i) => e === i + 1) if (ispass) {alerta (alerta (alerta (alerta). }}}}}}, listo () {this.render ()}} </script> Llamamos al método passFn en el método moveFn para detectar, y passFn implica dos puntos de conocimiento:
(1) Método de corte
A través del método Slice, interceptamos los primeros 15 elementos de la matriz para generar una nueva matriz, por supuesto, el siguiente elemento de la matriz está vacío.
(2) Cada método
A través de cada método, encajamos si cada elemento de la matriz interceptada es igual a su valor de índice+1. Si todos son iguales, devuelve verdadero. Si hay uno que no es igual, devuelve falso.
Si pasa con éxito el nivel, entonces el valor de ISPASS es verdadero, y alertará "¡Felicitaciones, pasan con éxito el nivel!" Ventana de inmediato. Si no, no se presentará.
Restablecer el juego
Restablecer el juego es realmente muy simple, solo agregue el botón de reinicio y llame render :
<template> <div> <ul> <li: class = "{'Puzzle': true, 'Puzzle-Eempty:! Puzzle}" V-For = "Puzzle en Rompecas" V-TEXT = "Puzzle" @Click = "Movefn ($ index)"> </li> </ul> <Botton @Click = "Representar"> RESET del juego </boton> () {{return {return {rompujles: []}}, métodos: {// reins render () {dejar puzzlearReRr = [], i = 1 // generar una matriz que contenga 1 a 15 números para (i; i <16; i ++) {PuzzlearR.push (i)} // aleatorios para interrumpir el conjunto Math.random () - 0.5}); // La página muestra esto.puzzles = Puzzlearr this.puzzles.push ('')}, // Haga clic en el bloque Movefn (index) {// Obtenga la posición de clic y sus valores arriba y abajo y dejen curnum = this.puzzles [index], izquierda = this.puzzles [index - 1], rightnum = this.puzzles [index + 1], topnum - 4], BottomNum = this.puzzles [índice + 4] // intercambia el valor con la posición vacía if (leftnum === '' ') {this.puzzles. $ Set (index - 1, curnum) this.puzzles. $ Set (index,' '')} de lo contrario (rightNum === '' ') {this.puzzles. $ Set (index + 1, curnum) this.puzzles. $ set (index, '')} else if (topnum ==== '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} más if (dottomNum === '' ') {this.puzzles. $ set (index + 4, curnum) this.puzzles. this.passfn ()}, // Verifique si pasa el passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) constspass = newpuzzles.every ((e, i) => e === i + 1) if (ispass) {alerta (alerta (alerta (alerta). }}}}}}, Ready () {this.render ()}} </script> <style> @import url ('./ assets/css/bootstrap.min.css'); cuerpo {Font-Family: Arial, "Microsoft Yahei"; "; } .box {ancho: 400px; margen: 50px auto 0;}. rompecabezas {ancho: 400px; Altura: 400px; margen de fondo: 40px; relleno: 0; Antecedentes: #ccc; estilo list: ninguno;}. rompecabezas {float: izquierda; Ancho: 100px; Altura: 100px; tamaño de fuente: 20px; Antecedentes: #F90; Text-Align: Center; Línea de altura: 100px; borde: 1px sólido #ccc; Shadow de caja: 1px 1px 4px; Shadow de texto: 1px 1px 1px #b9b4b4; cursor: pointer;}. Puzzle-vacío {fondo: #ccc; Box Shadow: INSET 2PX 2PX 18PX;}. BTN-reset {Box-shadow: INSET 2PX 2PX 18PX;} </style>Aquí agregué el código CSS.
Resumir
Lo anterior se trata de este artículo. De hecho, el volumen de código de este juego no es mucho, y los puntos de función no son muy complicados. Sin embargo, escribir dicho juego a través de Vue nos ayudará a comprender el principio receptivo de Vue impulsado por los datos. Si bien simplifica la cantidad de código, también aumenta la legibilidad del código. Espero que este artículo sea útil para que todos aprendan algunos vue.