Vamos dar uma olhada nas renderizações primeiro:
Análise funcional
Claro, trata -se de jogar. Como entusiasta de Vue, devemos aprofundar o jogo e explorar a implementação do código. Em seguida, vamos analisar quais funções são necessárias principalmente para concluir esse jogo. Abaixo, listarei diretamente os pontos funcionais deste exemplo:
1. Gere aleatoriamente grades de dígitos de 1 a 15. Cada número deve aparecer e aparecer apenas uma vez.
2. Depois de clicar em um quadrado digital, se houver um lugar acima, inferior, esquerda e direita, as duas posições de troca
3. Toda vez que a grade se move, precisamos verificar se ela passou com sucesso no nível.
4. Depois de clicar no botão Redefinir jogo, você precisa reordenar os quebra -cabeças
Os acima são os principais pontos funcionais deste exemplo. Pode -se observar que as funções do jogo não são complicadas. Só precisamos quebrá -los um por um e tudo ficará bem. Em seguida, mostrarei os códigos VUE de cada ponto funcional.
Construa um painel de jogo
Como uma estrutura JS orientada a dados, os modelos HTML da Vue devem frequentemente estar vinculados aos dados. Por exemplo, a grade de bloco desse jogo não deve ser escrita aqui. O código é o seguinte:
<modemplate> <div> <ul> <li: class = "{'Puzzle': true, 'quebra-cabeça-vazio':! Puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle"> </li> </l> 10, 11, 12, 13, 14, 15]}}} </script>Eu omiti a parte do estilo CSS aqui, então você não precisa se preocupar com isso por enquanto. No código acima, escrevemos os números de 1 a 15 em uma matriz. Obviamente, isso não é classificado aleatoriamente, então implementaremos a função da classificação aleatória.
Classificação aleatória de números
<modemplate> <div> <ul> <li: class = "{'Puzzle': true, 'quebra-cabeça-vazio':! Puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle"> </li> </ul> </div> </model> <cript> default {) {) {Return {Return {) {Let PuzzLearr = [], i = 1 // Gere uma matriz de 1 a 15 números para (i; i <16; i ++) {puzzLearr.push (i)} // interrompe aleatoriamente o array puzzlearr = pupzzlearr.sort (() => {retornar math.random () - 0,5}; // A página mostra this.puzzles = puzzlearr this.puzzles.push ('')},}, pronta () {this.render ()}} No código acima, usamos o loop for para gerar uma matriz ordenada de 1 ~ 15. Em seguida, usamos o método nativo de classificação JS para interromper aleatoriamente os números. Isso também contém um ponto de conhecimento, que é Math.random() .
Para usar sort() para classificação personalizada, precisamos fornecer uma função de comparação e, em seguida, retornar um número usado para ilustrar a ordem relativa desses dois valores, e seu valor de retorno é o seguinte:
1. Retorne um valor menor que 0, indicando que A é menor que B
2. Retorno 0, indicando que A é igual a B
3. Retorne um valor maior que 0, indicando que A é maior que B que
Aqui, Math.random() é usado para gerar um número aleatório entre 0 e 1 e depois subtrair 0,5. Dessa maneira, metade da probabilidade retornará um valor inferior a 0 e metade da probabilidade retornará um valor maior que 0, o que garante a aleatoriedade da matriz gerada e perceberá a função da geração aleatória dinâmica de grades numéricas.
Deve -se notar que também inserimos uma corda vazia no final da matriz para gerar uma grade em branco exclusiva.
Posição do bloco de comutação
<Modemplate> <div> <ul> <li: class = "{'Puzzle': true, 'quebra-cabeça-vazio':! Puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle" @click = "movefn ($ index)"> </li> </ul> </div> </«script> export> export> export> export> export> Métodos: {// Redefinir render () {let pupzzlearr = [], i = 1 // gera uma matriz de 1 a 15 números para (i; i <16; i ++) {pupzzlearr.push (i)} // aleatório para interromper a matriz pupzlear = pupzzlearr.sort ()} => {Return. // The page shows this.puzzles = puzzleArr this.puzzles.push('') }, // Click the block moveFn (index) { // Get the click position and its values up and down and left let curNum = this.puzzles[index], leftNum = this.puzzles[index - 1], rightNum = this.puzzles[index + 1], topNum = this.puzzles[index - 4], Bottomnum = this.puzzles [Índice + 4] // Troca o valor com a posição vazia se (leftnum === '') {this.puzzles. $ set (index - 1, Curnum) this.puzzles. $ set (Índice, '')} mais 1, curnum = curn) {this.puzzles. (topnum === '') {this.puzzles. $ set (index - 4, Curnum) this.puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. }} </script>1. Aqui, primeiro adicionamos o evento de clique @click = "movefn ($ index)" ao LI de cada grade e use o parâmetro $ index para obter a posição do bloco de clique na matriz.
2. Em segundo lugar, obtenha os valores do índice dos números para cima, para baixo, esquerda e direita na matriz, como índice - 4, índice + 4, índice - 1, índice + 1
3. Quando encontramos um local vazio na parte superior, inferior, esquerda e direita, atribuímos a posição vazia ao número da grade atualmente clicada na posição nula e definimos a posição clicada atual para esvaziar
Nota: Por que usamos o método $ set em vez de atribuir valores diretamente? Isso contém pontos de conhecimento sobre o princípio da capacidade de resposta da vue.
// Devido às limitações de JavaScript, o vue.js não pode detectar as seguintes alterações da matriz: // 1. Defina elementos diretamente com índices, como Vm.Items [0] = {}; // 2. Modifique o comprimento dos dados, como vm.iTems.length = 0. // Para resolver o problema (1), o vue.js estende a matriz de observação e adiciona um método $ set () a ele: // A mesma coisa que `Exemplo1.items [0] = ...`, mas pode acionar a exibição Exemplate1.mems.Verifique se o teste é bem -sucedido
<Modemplate> <div> <ul> <li: class = "{'Puzzle': true, 'quebra-cabeça-vazio':! Puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle" @click = "movefn ($ index)"> </li> </ul> </div> </«script> export> export> export> export> export> Métodos: {// Redefinir render () {let pupzzlearr = [], i = 1 // gera uma matriz de 1 a 15 números para (i; i <16; i ++) {pupzzlearr.push (i)} // aleatório para interromper a matriz pupzlear = pupzzlearr.sort ()} => {Return. // The page shows this.puzzles = puzzleArr this.puzzles.push('') }, // Click the block moveFn (index) { // Get the click position and its values up and down and left let curNum = this.puzzles[index], leftNum = this.puzzles[index - 1], rightNum = this.puzzles[index + 1], topNum = this.puzzles[index - 4], Bottomnum = this.puzzles [Índice + 4] // Troca o valor com a posição vazia se (leftnum === '') {this.puzzles. $ set (index - 1, Curnum) this.puzzles. $ set (Índice, '')} mais 1, curnum = curn) {this.puzzles. (topnum === '') {this.puzzles. $ set (index - 4, Curnum) this.puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. if (this.puzzles[15] === '') { const newPuzzles = this.puzzles.slice(0, 15) const isPass = newPuzzles.every((e, i) => e === i + 1) if (isPass) { alert ('Congratulations, I successfully passed the level!') } } } } } }, ready () { this.render() }} </script> Chamamos o método passFn no método moveFn para detectar, e passFn envolve dois pontos de conhecimento:
(1) Método de fatia
Através do método da fatia, interceptamos os 15 primeiros elementos da matriz para gerar uma nova matriz, é claro, o seguinte elemento da matriz está vazio.
(2) Todo método
Através de todos os métodos, fazemos loop se cada elemento da matriz interceptada é igual ao seu valor de índice+1. Se todos forem iguais, ele retorna verdadeiro. Se houver um que não seja igual, ele retornará falso.
Se você passar com sucesso no nível, o valor do ISPass é verdadeiro e alertará "Parabéns, você passará com sucesso no nível!" janela imediata. Caso contrário, você não solicitará.
Redefina o jogo
A redefinição do jogo é realmente muito simples, basta adicionar o botão Redefinir e chamar render :
<modemplate> <div> <ul> <li: class = "{'Puzzle': true, 'quebra-cabeça-vazio':! Puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle" @click = "movefn ($ index)"> </li> </ul> <botão @"" "> () {return {Puzzles: []}}, Métodos: {// Redefinir render () {Let PuzzLearr = [], i = 1 // gera uma matriz contendo 1 a 15 números para (i; i <16; i ++) {Puzzlearr.push (i)} // aleatório para descer a Array Math.Random () - 0,5}); // The page shows this.puzzles = puzzleArr this.puzzles.push('') }, // Click the block moveFn (index) { // Get the click position and its values up and down and left let curNum = this.puzzles[index], leftNum = this.puzzles[index - 1], rightNum = this.puzzles[index + 1], topNum = this.puzzles[index - 4], Bottomnum = this.puzzles [Índice + 4] // Troca o valor com a posição vazia se (leftnum === '') {this.puzzles. $ set (index - 1, Curnum) this.puzzles. $ set (Índice, '')} mais 1, curnum = curn) {this.puzzles. (topnum === '') {this.puzzles. $ set (index - 4, Curnum) this.puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. if (this.puzzles[15] === '') { const newPuzzles = this.puzzles.slice(0, 15) const isPass = newPuzzles.every((e, i) => e === i + 1) if (isPass) { alert ('Congratulations, I successfully passed the level!') } } } } } }, ready () { this.render() }} </script> <yoy> @import url ('./ Assets/css/bootstrap.min.css'); corpo {Font-Family: Arial, "Microsoft Yahei"; } .Box {Width: 400px; margem: 50px auto 0;}. quebra-cabeça {width: 400px; Altura: 400px; Margin-Bottom: 40px; preenchimento: 0; Antecedentes: #ccc; estilo de lista: nenhum;}. Puzzle {float: esquerda; Largura: 100px; Altura: 100px; Size da fonte: 20px; Antecedentes: #f90; Alinhamento de texto: centro; altura da linha: 100px; borda: 1px sólido #ccc; Shadow de caixa: 1px 1px 4px; Shadow de texto: 1px 1px 1px #B9B4B4; Cursor: Pointer;}. Puzzle-Offy {Background: #CCC; Shadow Box: Insert 2px 2px 18px;}.Aqui eu adicionei o código CSS.
Resumir
O acima é tudo sobre este artigo. De fato, o volume de código deste jogo não é muito e os pontos de função não são muito complicados. No entanto, escrever esse jogo através da Vue nos ajudará a entender o princípio responsivo de Vue impulsionado pelos dados. Ao simplificar a quantidade de código, também aumenta a legibilidade do código. Espero que este artigo seja útil para todos aprenderem um pouco.