먼저 렌더링을 살펴 보겠습니다.
기능 분석
물론, 그것은 모두 연주에 관한 것입니다. VUE 애호가로서 우리는 게임에 깊이 들어가서 코드의 구현을 탐색해야합니다. 다음으로, 그러한 게임을 완료하는 데 주로 어떤 기능이 필요한지 분석하겠습니다. 아래는이 예제의 기능적 지점을 직접 나열합니다.
1. 무작위로 1 ~ 15의 숫자 그리드를 생성합니다. 각 숫자는 나타나야하며 한 번만 나타납니다.
2. 디지털 스퀘어를 클릭 한 후, 위, 왼쪽, 오른쪽 위의 장소가있는 경우 두 교환 위치가 있습니다.
3. 그리드가 움직일 때마다 레벨을 성공적으로 통과했는지 확인해야합니다.
4. 재설정 게임 버튼을 클릭 한 후 퍼즐을 재정렬해야합니다.
위는이 예제의 주요 기능 지점입니다. 게임 기능이 복잡하지 않다는 것을 알 수 있습니다. 우리는 단지 그들을 하나씩 깰 필요가 있으며 괜찮을 것입니다. 다음으로, 각 기능 지점의 vue 코드를 보여 드리겠습니다.
게임 패널을 구축하십시오
데이터 중심의 JS 프레임 워크로서 VUE의 HTML 템플릿은 종종 데이터에 바인딩되어야합니다. 예를 들어, 그러한 게임의 블록 그리드는 여기에 기록되어서는 안됩니다. 코드는 다음과 같습니다.
<template> <div> <ul> <li : class = "{ 'puzzle': true, 'puzzle-empty':! puzzle}"v-for = "puzzle in puzzle in puzzle"v-text = "puzzle"> </li> </ul> </div> </div> <cript> data (data () {puzzles : 1, 2, 4, 4, 4, 4, 4, 5, 6, 6, 6, 6, 6, 6, 5, 6, 6, 6, 6, 6, 6, 5, 5, 6 9, 10, 10, 11, 12, 13, 14, 15]}}} </script>여기에서 CSS 스타일 부분을 생략 했으므로 지금은 걱정할 필요가 없습니다. 위의 코드에서는 배열에 1에서 15까지의 숫자를 썼습니다. 이것은 분명히 무작위로 정렬되지 않으므로 무작위 분류의 기능을 구현합니다.
무작위 숫자 분류
<template> <div> <ul> <li : class = "{ 'puzzle': true, 'puzzle-empty':! puzzle}"v-for = "V-for ="퍼즐 "V-text ="Puzzle "> </li> </ul> </div> </div> <cript> 내보내기 기본값 {data () {puzzles (]},},}}}}}}}}}} {puzzlearr = [], i = 1 // (i; i <16; i ++) {puzzlearr.push (i)}}에 대한 1 ~ 15 숫자 배열을 생성합니다. // 배열 puzzlearr = puzzlearr.sort (() => {return math.random () - 0.5}); // 페이지에는 this.puzzles = puzzlearr this.puzlecle.push ( '')},}, ready () {this.render ()}}이 표시됩니다. 위의 코드에서는 For Loop을 사용하여 1 ~ 15의 순서 배열을 생성합니다. 그런 다음 Native JS 정렬 방법을 사용하여 숫자를 무작위로 방해합니다. 여기에는 또한 지식 포인트가 포함되어 있으며, 이는 Math.random() 메소드입니다.
사용자 지정 정렬을 위해 sort() 메소드를 사용하려면 비교 함수를 제공 한 다음이 두 값의 상대 순서를 설명하는 데 사용되는 숫자를 반환해야하며 반환 값은 다음과 같습니다.
1. 값을 0보다 작은 값을 반환하여 A가 B보다 작음을 나타냅니다.
2. 반환 0, A는 B와 같음을 나타냅니다.
3. 0보다 큰 값을 반환하여 A는 B보다 크다는 것을 나타냅니다.
여기서 Math.random() 0과 1 사이의 난수를 생성 한 다음 0.5를 빼는 데 사용됩니다. 이러한 방식으로 확률의 절반은 확률의 0보다 작은 값을 반환 할 것입니다. 확률의 절반은 0보다 큰 값을 반환하여 생성 된 배열의 무작위성을 보장하고 동적 무작위 생성의 숫자 그리드의 기능을 실현합니다.
배열 끝에 빈 문자열을 삽입하여 고유 한 빈 그리드를 생성합니다.
스위치 블록 위치
<memplate> <div> <ul> <li : class = "{ 'puzzle': true, 'puzzle-empty':! puzzle}"v-for = "V-for ="퍼즐 "V-text ="puzzle " @click ="movefn ($ index) ""> </li> </ul> </div> </템플릿> {export default v. }, methods : {// render () {let puzzlearr = [], i = 1 // (i; i <16; i ++) {puzzlearr.push (i)} // 배열 pupzlearr = puzzlearr.sort (() => {return math.random () - 0.5}; // 페이지는 this.puzzles = puzzlearr this.puzzles.push ( '')}, // 블록 movefn (index) {// 클릭 위치와 그 값을 위아래로 가져오고 왼쪽 curnum = this.puzzles [index -puzzles [index this.puzzles [index.puzzles [index. -4], bottomnum = this.puzzles [index + 4] // 빈 위치로 값을 값으로 교환합니다 (leftnum === '') {this.puzzles. this.puzzles. $ set (index, '')} else if (rightnum === '') {index + 1, curnum. this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index -4, curnum) this.puzzles. puzzles. $ set (index, '')} else if (bottomnum === '') {this.puzzles. $ set (index + 4, curnum) re. }}, ready () {this.render ()}} </script>1. 여기서 먼저 클릭 이벤트 @click @click = "movefn ($ index)"을 각 그리드의 Li에 추가하고 $ index 매개 변수를 사용하여 배열에서 클릭 블록의 위치를 얻습니다.
2. 둘째, 배열에서 숫자의 인덱스 값을 인덱스 -4, index + 4, index -1, index + 1으로 배열에서 위쪽, 아래로, 왼쪽 및 오른쪽으로 가져옵니다.
3. 상단, 하단, 왼쪽 및 오른쪽에 비어있는 장소를 찾으면 빈 위치를 NULL 위치에서 현재 클릭 한 그리드 수에 할당하고 현재 클릭 된 위치를 비워 지도록 설정합니다.
참고 : 값을 직접 할당하는 대신 $ SET 메소드를 사용하는 이유는 무엇입니까? 여기에는 vue 응답 성의 원리에 대한 지식이 포함되어 있습니다.
// javaScript 제한으로 인해 vue.js는 다음 배열을 감지 할 수 없습니다. // 1. vm.items [0] = {}과 같은 인덱스와 직접 요소를 설정합니다. // 2. vm.items.length = 0. //와 같은 데이터의 길이를 수정합니다. // 문제를 해결하기 위해 (1), vue.js는 관찰 배열을 확장하고`example1.items [0] = ...와 동일하지만 $ set () 메소드를 추가합니다.테스트가 성공했는지 확인하십시오
<memplate> <div> <ul> <li : class = "{ 'puzzle': true, 'puzzle-empty':! puzzle}"v-for = "V-for ="퍼즐 "V-text ="puzzle " @click ="movefn ($ index) ""> </li> </ul> </div> </템플릿> {export default v. }, methods : {// render () {let puzzlearr = [], i = 1 // (i; i <16; i ++) {puzzlearr.push (i)} // 배열 pupzlearr = puzzlearr.sort (() => {return math.random () - 0.5}; // 페이지는 this.puzzles = puzzlearr this.puzzles.push ( '')}, // 블록 movefn (index) {// 클릭 위치와 그 값을 위아래로 가져오고 왼쪽 curnum = this.puzzles [index -puzzles [index this.puzzles [index.puzzles [index. -4], bottomnum = this.puzzles [index + 4] // 빈 위치로 값을 값으로 교환합니다 (leftnum === '') {this.puzzles. this.puzzles. $ set (index, '')} else if (rightnum === '') {index + 1, curnum. this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index -4, curnum) this.puzzles. puzzles. $ set (index, '')} else if (attamnum === '') {this.puzzles. $ set (index + 4, curnum). this.passfn ()}, // passfn () {if (this.puzzles [15] === '' ') {const newPuzzles = this.puzzles.slice (0, 15) const ispass = newPuzzles.every (E, i) => e === I + 1)을 전달하는지 확인하십시오. 레벨! ')}}}}}}, ready () {this.render ()}} </script> 우리는 moveFn 메소드에서 passFn 메소드를 호출하여 감지하고 passFn 메소드에는 두 가지 지식 지점이 포함됩니다.
(1) 슬라이스 방법
슬라이스 방법을 통해 배열의 첫 15 가지 요소를 가로 채어 새로운 배열을 생성합니다. 물론 배열의 다음 요소는 비어 있습니다.
(2) 모든 방법
모든 방법을 통해 가로 채는 배열의 각 요소가 인덱스+1 값과 동일 여부를 반복합니다. 모두 같으면 참으로 반환됩니다. 동일하지 않은 것이 있으면 거짓을 반환합니다.
당신이 레벨을 성공적으로 통과한다면, Ispass의 가치는 사실이며, "축하합니다. 성공적으로 수준을 통과합니다!" 프롬프트 창. 그렇지 않은 경우 프롬프트하지 않습니다.
게임을 재설정하십시오
게임 재설정은 실제로 매우 간단합니다. 재설정 버튼을 추가하고 render 메소드를 호출하십시오.
<emplate> <div> <ul> <li : class = "{ 'puzzle': true, 'puzzle-empty':! puzzle}"v-for = "V-for ="퍼즐 "v-rext ="puzzle " @click ="movefn ($ index) "> </li> </ul> <click ="scrat </div "</div plate> </emplate> </div plate> </div> </li> </li> </ul> <button> </li> </li> </ul> <button> () {return {퍼즐 : []}}, 메소드 : {// render render () {let puzzlearr = [], i = 1 // (i; i <16; i ++) {puzzlearr.push (i)} // rengrupt to array puzzlearr = puzzlear () (). - 0.5}); // 페이지는 this.puzzles = puzzlearr this.puzzles.push ( '')}, // 블록 movefn (index) {// 클릭 위치와 그 값을 위아래로 가져오고 왼쪽 curnum = this.puzzles [index -puzzles [index this.puzzles [index.puzzles [index. -4], bottomnum = this.puzzles [index + 4] // 빈 위치로 값을 값으로 교환합니다 (leftnum === '') {this.puzzles. this.puzzles. $ set (index, '')} else if (rightnum === '') {index + 1, curnum. this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. $ set (index -4, curnum) this.puzzles. puzzles. $ set (index, '')} else if (attamnum === '') {this.puzzles. $ set (index + 4, curnum). this.passfn ()}, // passfn () {if (this.puzzles [15] === '' ') {const newPuzzles = this.puzzles.slice (0, 15) const ispass = newPuzzles.every (E, i) => e === I + 1)을 전달하는지 확인하십시오. 레벨! ')}}}}}}, ready () {this.render ()}} </script> <tyle> @import url ('./ assets/css/bootstrap.min.css '; body {font-family : arial, "microsoft yahei"; } .box {너비 : 400px; 여백 : 50px auto 0;}. 퍼즐-랩 {너비 : 400px; 높이 : 400px; 마진 바닥 : 40px; 패딩 : 0; 배경 : #CCC; 목록 스타일 : 없음;}. 퍼즐 {float : 왼쪽; 너비 : 100px; 높이 : 100px; 글꼴 크기 : 20px; 배경 : #F90; 텍스트 정렬 : 센터; 라인 높이 : 100px; 국경 : 1px Solid #CCC; Box-Shadow : 1px 1px 4px; Text-Shadow : 1px 1px 1px #b9b4b4; 커서 : 포인터;}. 퍼즐에 대한 {배경 : #ccc; Box-Shadow : 삽입 2px 2px 18px;}.여기에 CSS 코드를 추가했습니다.
요약
위는이 기사에 관한 것입니다. 실제로이 게임의 코드 볼륨은별로 많지 않으며 기능 지점은 그리 복잡하지 않습니다. 그러나 VUE를 통해 그러한 게임을 작성하면 데이터가 구동하는 VUE의 반응 형 원칙을 이해하는 데 도움이됩니다. 코드 양을 단순화하면서도 코드의 가독성이 높아집니다. 이 기사가 모든 사람이 VUE를 배우는 데 도움이되기를 바랍니다.