Давайте сначала посмотрим на визуализации:
Функциональный анализ
Конечно, это все о игре. Как энтузиаст VUE, мы должны углубиться в игру и исследовать реализацию кода. Далее, давайте проанализируем, какие функции в основном необходимы для завершения такой игры. Ниже я напрямую перечислю функциональные точки этого примера:
1. Случайно генерируйте цифровые сетки от 1 до 15. Каждое число должно появиться и появляться только один раз.
2. После нажатия на цифровой квадрат, если есть одно место выше, внизу, слева и справа, две обменные позиции
3. Каждый раз, когда сетка движется, нам нужно проверить, успешно ли она прошла уровень.
4. После нажатия кнопки «Сбросить игру» вам нужно переупорядочить головоломки
Вышеуказанное является основными функциональными точками этого примера. Видно, что игры не сложны. Нам просто нужно сломать их один за другим, и все будет в порядке. Далее я покажу коды VUE каждой функциональной точки.
Создайте игровой панель
В качестве структуры JS, управляемой данными, шаблоны HTML Vue часто должны быть связаны с данными. Например, блок -сетка такой игры не должна быть написана здесь. Код заключается в следующем:
<Template> <div> <ul> <li: class = "{'головоломка: true,' головоломка empty ':! Puzzle}" v-for = "головоломка в головоломках" v-text = "puzzle"> </li> </ul> </div> </tempate> <cript>. 9, 10, 11, 12, 13, 14, 15]}}} </script>Я опустил здесь часть стиля CSS, поэтому вам сейчас не нужно беспокоиться об этом. В приведенном выше коде мы написали числа от 1 до 15 в массиве. Это, очевидно, не случайно отсортировано, поэтому мы будем реализовать функцию случайной сортировки.
Случайная сортировка чисел
<Template> <div> <ul> <li: class = "{'головоломка: true,' головоломка-томпти ':! головоломка}" v-for = "головоломка в головоломках" v-text = "buzzle"> </li> </ul> </div> </tempate> <cript> export defaul () {let buzzlearr = [], i = 1 // генерировать массив от 1 до 15 чисел для (i; i <16; i ++) {puzzlearr.push (i)} // случайно разрушать массив puzzlearr = puzzlearr.sort (() => {return math.random () - 0.5}); // На странице показано это.puzzles = puzzlearr this.puzzles.push ('')},}, ready () {this.render ()}} В приведенном выше коде мы используем цикл для создания упорядоченного массива 1 ~ 15. Затем мы используем нативный метод сортировки JS, чтобы случайным образом нарушить числа. Это также содержит точку знания, которая является методом Math.random() .
Чтобы использовать метод sort() для пользовательской сортировки, нам необходимо предоставить функцию сравнения, а затем вернуть число, используемое для иллюстрации относительного порядка этих двух значений, и его возвратное значение следующим образом:
1. Верните значение меньше 0, указывая на то, что A меньше B
2. возврат 0, указывая, что A равен B
3. вернуть значение больше 0, что указывает на то, что A больше B
Здесь, Math.random() используется для генерации случайного числа от 0 до 1, а затем вычитать 0,5. Таким образом, половина вероятности вернет значение менее 0, и половина вероятности вернет значение больше 0, что обеспечивает случайность сгенерированного массива и реализует функцию динамической случайной генерации численных сетей.
Следует отметить, что мы также вставили пустую строку в конце массива, чтобы генерировать уникальную пустую сетку.
Положение блока переключения
<template> <div> <ul> <li: class = "{'головоломка: true,' головоломка-пухлый ':! головоломка}" v-for = "головоломка в головоломках" v-text = "chuzzle" @Clic }, Методы: {// сбросить render () {let buzzlearr = [], i = 1 // генерировать массив от 1 до 15 чисел для (i; i <16; i ++) {puzzlearr.push (i)} // случайный, чтобы нарушить массив puzzlearr = puzzlearr.sort (() => {return math.random () - 0.5-10 () // На странице показано это.puzzles = puzzlearr this.puzzles.push ('')}, // нажимать на блок перемещения (index) {// Получить позицию щелчка и его значения вверх и влево. this.puzzles [index - 4], bottomnum = this.puzzles [index + 4] // обмен значением с пустой позицией if (Leatsnum === '') {this.puzzles. $ set (index - 1, curnum) this.puzzles. $ set (index, '') ense else (rightnum == '') {this.tex. Curnum) this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. this.puzzles. $ set (index, '')}}}}, ready () {this.render ()}} </script>1. Здесь мы сначала добавляем Click Event @Click = "MoveFn ($ index)" в LI каждой сетки и используем параметр $ Index, чтобы получить позицию блока Click в массиве.
2. Во -вторых, получите значения индекса чисел вверх, вниз, влево и справа в массиве, как индекс - 4, индекс + 4, индекс - 1, индекс + 1
3. Когда мы находим пустое место, которое на верхнем, нижнем, влево и вправо, мы назначаем пустую позицию на номеру сетки, нажатой в настоящее время в нулевом положении и устанавливаем текущую нажавшую позицию на пустое
Примечание. Почему мы используем метод $ set вместо напрямую назначать значения? Это содержит знаний о принципе отзывчивости VUE.
// Из -за ограничений JavaScript vue.js не может обнаружить следующие изменения массива: // 1. Установите элементы непосредственно с помощью индексов, таких как Vm.items [0] = {}; // 2. Измените длину данных, такие как vm.items.length = 0. // Чтобы решить проблему (1), Vue.js расширяет массив наблюдений и добавляет к нему метод $ set (): // То же, что и `example1.items [0] = ...`, но может вызвать обновление обновления.Проверьте, успешно ли тест
<template> <div> <ul> <li: class = "{'головоломка: true,' головоломка-пухлый ':! головоломка}" v-for = "головоломка в головоломках" v-text = "chuzzle" @Clic }, Методы: {// сбросить render () {let buzzlearr = [], i = 1 // генерировать массив от 1 до 15 чисел для (i; i <16; i ++) {puzzlearr.push (i)} // случайный, чтобы нарушить массив puzzlearr = puzzlearr.sort (() => {return math.random () - 0.5-10 () // На странице показано это.puzzles = puzzlearr this.puzzles.push ('')}, // нажимать на блок перемещения (index) {// Получить позицию щелчка и его значения вверх и влево. this.puzzles [index - 4], bottomnum = this.puzzles [index + 4] // обмен значением с пустой позицией if (Leatsnum === '') {this.puzzles. $ set (index - 1, curnum) this.puzzles. $ set (index, '') ense else (rightnum == '') {this.tex. Curnum) this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. this.puzzles. $ set (index, '')} this.passfn ()}, // Проверьте, проходит ли он passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const ispass = newpuzzles.ever {alert ('Поздравляю, я успешно прошел уровень!')}}}}}}, ready () {this.render ()}} </script> Мы называем метод passFn в методе moveFn для обнаружения, и метод passFn включает в себя две точки знания:
(1) метод срезов
С помощью метода срезов мы перехватываем первые 15 элементов массива, чтобы генерировать новый массив, конечно, следующий элемент массива пуст.
(2) Каждый метод
Через каждый метод мы зацикливаем, является ли каждый элемент перехваченного массива равным его значению индекса+1. Если все равны, это возвращает истину. Если есть тот, который не является равенным, он возвращает ложь.
Если вы успешно пройдете уровень, то ценность ISPASS верна, и вы будете предупреждать: «Поздравляем, вы успешно проходите уровень!» приглашенное окно. Если нет, вы не будете запрашивать.
Сбросить игру
Сброс игры на самом деле очень просто, просто добавьте кнопку сброса и вызовите метод render :
<template> <div> <ul> <li :class="{'puzzle': true, 'puzzle-empty': !puzzle}" v-for="puzzle in puzzles" v-text="puzzle" @click="moveFn($index)" > </li> </ul> <button @click="render">Reset the game</button> </div></template><script>export default {data () {return {puzzles: []}}, методы: {// reset render () {let buzzlearr = [], i = 1 // Сгенерировать массив, содержащий 1-15 чисел для (i; i <16; i ++) {puzzlearr.push (i)} // случайный, чтобы разрушить array puzzlearr. Math.random () - 0,5}); // На странице показано это.puzzles = puzzlearr this.puzzles.push ('')}, // нажимать на блок перемещения (index) {// Получить позицию щелчка и его значения вверх и влево. this.puzzles [index - 4], bottomnum = this.puzzles [index + 4] // обмен значением с пустой позицией if (Leatsnum === '') {this.puzzles. $ set (index - 1, curnum) this.puzzles. $ set (index, '') ense else (rightnum == '') {this.tex. Curnum) this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. this.puzzles. $ set (index, '')} this.passfn ()}, // Проверьте, проходит ли он passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const ispass = newpuzzles.ever {alert ('Поздравляю, я успешно прошел уровень!')}}}}}}, ready () {this.render ()}} </script> <style> @Import url ('./ Assets/css/bootstrap.min.css'); body {font-family: arial, "microsoft '); body {font-family: arial," microsoft'; } .box {width: 400px; Маржа: 50px auto 0;}. головоломка {ширина: 400px; Высота: 400px; маржинальный бат: 40px; Заполнение: 0; Фон: #CCC; Список стиля: none;}. головоломка {float: left; Ширина: 100px; высота: 100px; размер шрифта: 20px; Фон: #F90; Текст-альбом: Центр; высота линии: 100px; Граница: 1PX SOLID #CCC; Box-Shadow: 1px 1px 4px; Текстовая тень: 1px 1px 1px #b9b4b4; Cursor: pointer;}. Buzzle-empty {founale: #ccc; Box-Shadow: вставка 2px 2px 18px;}. Btn-reset {box-shadow: вставка 2px 2px 18px;} </style>Здесь я добавил код CSS.
Суммировать
Выше всего об этой статье. На самом деле, объем кода этой игры не так много, а точки функции не очень сложны. Тем не менее, написание такой игры через VUE поможет нам понять отзывчивый принцип VUE, обусловленного данными. Упрощая сумму кода, он также увеличивает читабельность кода. Я надеюсь, что эта статья будет полезна всем, чтобы узнать какую -то VUE.