Mari kita lihat rendering terlebih dahulu:
Analisis fungsional
Tentu saja, ini semua tentang bermain. Sebagai penggemar Vue, kita harus masuk jauh ke dalam permainan dan mengeksplorasi implementasi kode. Selanjutnya, mari kita analisis fungsi apa yang terutama diperlukan untuk menyelesaikan permainan seperti itu. Di bawah ini saya akan langsung mencantumkan titik fungsional dari contoh ini:
1. Hasilkan kisi -kisi digit secara acak dari 1 hingga 15. Setiap angka harus muncul dan hanya muncul sekali.
2. Setelah mengklik kotak digital, jika ada satu tempat di atas, bawah, kiri dan kanan, dua posisi pertukaran
3. Setiap kali kisi bergerak, kita perlu memverifikasi apakah telah berhasil melewati level.
4. Setelah mengklik tombol Reset Game, Anda perlu memesan ulang teka -teki
Di atas adalah titik fungsional utama dari contoh ini. Dapat dilihat bahwa fungsi permainan tidak rumit. Kita hanya perlu memecahkannya satu per satu dan itu akan baik -baik saja. Selanjutnya, saya akan menunjukkan kode VUE dari setiap titik fungsional.
Membangun panel game
Sebagai kerangka kerja JS yang digerakkan oleh data, templat HTML VUE harus sering terikat pada data. Misalnya, kisi -kisi blok permainan seperti itu tidak boleh ditulis di sini. Kodenya adalah sebagai berikut:
<lemplate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-empty' :! puzzle}" v-for = "puzzle in puzzles" v-text = "puzzle"> </li> </ul> </div> </lemplate> <cript> Export Default {Data () {) {) {) {) {2, 4, 2, PUZZLE </Template> <skrip> puzzle {Data () {Data () {data 9, 10, 11, 12, 13, 14, 15]}}} </script>Saya telah menghilangkan bagian gaya CSS di sini, jadi Anda tidak perlu khawatir untuk saat ini. Dalam kode di atas, kami menulis angka dari 1 hingga 15 dalam array. Ini jelas tidak diurutkan secara acak, jadi kami akan menerapkan fungsi penyortiran acak.
Penyortiran angka acak
<lemplate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-empty' :! puzzle}" v-for = "puzzle in puzzles" v-text = "puzzle"> </li> </ul> </div> </lemplate> <cript> Export Default {Data () {) {{) {{] {{] {Data {) {Data {) ) {let puzzlearr = [], i = 1 // menghasilkan array 1 hingga 15 angka untuk (i; i <16; i ++) {puzzlearr.push (i)} // secara acak mengganggu array puzzlearr = puzzlearr.sort (() => {return math.random () - 0.1) () () => {return math.random (). // halaman menunjukkan this.puzzles = puzzlearr this.puzzles.push ('')},}, siap () {this.render ()}} Dalam kode di atas, kami menggunakan loop untuk menghasilkan array yang dipesan 1 ~ 15. Kemudian kami menggunakan metode Sort JS asli untuk mengganggu angka secara acak. Ini juga berisi titik pengetahuan, yang merupakan metode Math.random() .
Untuk menggunakan metode sort() untuk penyortiran khusus, kita perlu memberikan fungsi perbandingan, dan kemudian mengembalikan angka yang digunakan untuk menggambarkan urutan relatif dari kedua nilai ini, dan nilai pengembaliannya adalah sebagai berikut:
1. Mengembalikan nilai kurang dari 0, menunjukkan bahwa A kurang dari B
2. Kembali 0, menunjukkan bahwa A sama dengan B
3. Mengembalikan nilai lebih besar dari 0, menunjukkan bahwa A lebih besar dari B
Di sini, Math.random() digunakan untuk menghasilkan angka acak antara 0 dan 1, dan kemudian kurangi 0,5. Dengan cara ini, setengah dari probabilitas akan mengembalikan nilai kurang dari 0 dan setengah dari probabilitas akan mengembalikan nilai lebih besar dari 0, yang memastikan keacakan array yang dihasilkan dan menyadari fungsi generasi acak dinamis dari kisi numerik.
Perlu dicatat bahwa kita juga memasukkan string kosong di ujung array untuk menghasilkan kisi kosong yang unik.
Sakelar posisi blok
<template> <div> <ul> <li :class="{'puzzle': true, 'puzzle-empty': !puzzle}" v-for="puzzle in puzzles" v-text="puzzle" @click="moveFn($index)" ></li> </ul> </div></template><script>export default { data () { return { puzzles: [] } }, Metode: {// Reset render () {let puzzlearr = [], i = 1 // menghasilkan array 1 hingga 15 angka untuk (i; i <16; i ++) {puzzlearr.push (i)} // acak untuk mengganggu array puzzlearr = puzzlearr.sort); // Halaman ini menunjukkan this.puzzles = puzzlearr this.puzzles.push ('')}, // klik blok movefn (index) {// Dapatkan posisi klik dan nilainya naik dan turun dan kiri let curnum = this.puzzles [index], leftnum = this.puzzle [index - 1], rightnum = leftnum = this.puzzles [index - 1], rightnum = rightnum = leftnum = this.puzzles [index - 1], rightnum = leftNum. this.puzzles [indeks - 4], bottomnum = this.puzzles [index + 4] // menukar nilai dengan posisi kosong jika (leftnum === '') {this.puzzles. $ set (indeks - 1, curnum) ini. this.puzzles. $ set (index, '')} lain if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} lain jika (bottomnum === ') {this.puzzle. }}, ready () {this.render ()}} </script>1. Di sini pertama -tama kita menambahkan acara klik @click = "MOVEFN ($ index)" ke LI dari setiap kisi, dan menggunakan parameter $ indeks untuk mendapatkan posisi blok klik di array.
2. Kedua, dapatkan nilai indeks dari angka naik, turun, kiri dan kanan dalam array, sebagai indeks - 4, indeks + 4, indeks - 1, indeks + 1
3. Ketika kami menemukan tempat yang kosong di bagian atas, bawah, kiri dan kanan, kami menetapkan posisi kosong ke jumlah kisi -kisi yang saat ini diklik pada posisi nol dan mengatur posisi yang diklik saat ini untuk mengosongkan
Catatan: Mengapa kita menggunakan metode $ set alih -alih langsung menetapkan nilai? Ini berisi poin pengetahuan tentang prinsip responsif vue.
// Karena batasan JavaScript, vue.js tidak dapat mendeteksi perubahan array berikut: // 1. Setel elemen langsung dengan indeks, seperti vm.items [0] = {}; // 2. Ubah panjang data, seperti vm.items.length = 0. // Untuk menyelesaikan masalah (1), vue.js memperluas array pengamatan dan menambahkan metode $ set () ke dalamnya: // Sama seperti `example1.items [0] = ...`, tetapi dapat memicu tampilan pembaruan contoh1.items. $ (0] = {``, tetapi dapat memicu tampilan pembaruan contoh1.item. $ (0Periksa apakah tes berhasil
<template> <div> <ul> <li :class="{'puzzle': true, 'puzzle-empty': !puzzle}" v-for="puzzle in puzzles" v-text="puzzle" @click="moveFn($index)" ></li> </ul> </div></template><script>export default { data () { return { puzzles: [] } }, Metode: {// Reset render () {let puzzlearr = [], i = 1 // menghasilkan array 1 hingga 15 angka untuk (i; i <16; i ++) {puzzlearr.push (i)} // acak untuk mengganggu array puzzlearr = puzzlearr.sort); // Halaman ini menunjukkan this.puzzles = puzzlearr this.puzzles.push ('')}, // klik blok movefn (index) {// Dapatkan posisi klik dan nilainya naik dan turun dan kiri let curnum = this.puzzles [index], leftnum = this.puzzle [index - 1], rightnum = leftnum = this.puzzles [index - 1], rightnum = rightnum = leftnum = this.puzzles [index - 1], rightnum = leftNum. this.puzzles [indeks - 4], bottomnum = this.puzzles [index + 4] // menukar nilai dengan posisi kosong jika (leftnum === '') {this.puzzles. $ set (indeks - 1, curnum) ini. this.puzzles. $ set (index, '')} lain if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} lain jika (bottomnum === ') {this.puzzle. this.passfn ()}, // Verifikasi apakah itu melewati passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const ispass = newpuzzles.every ((e, i) => e ==== I ifics = newpuzzles.every ((e, i) => e ==== I ifics = newpuzzles.every (e, i) => e === i ixss = newpuzzles.every ((e, i) = e === i ixss = newpuzzles.every ((e, i) => e === i ixss = newpuzzles.every (e, i) => e === Level! ')}}}}}}, siap () {this.render ()}} </script> Kami menyebut metode passFn dalam metode moveFn untuk mendeteksi, dan metode passFn melibatkan dua titik pengetahuan:
(1) metode irisan
Melalui metode SLICE, kami mencegat 15 elemen pertama dari array untuk menghasilkan array baru, tentu saja, elemen array berikut kosong.
(2) Setiap metode
Melalui setiap metode, kami mengulangi apakah setiap elemen dari array yang dicegat sama dengan nilai indeks+1. Jika semuanya sama, itu kembali benar. Jika ada satu yang tidak sama, ia mengembalikan salah.
Jika Anda berhasil lulus level, maka nilai ISPASS benar, dan Anda akan mengingatkan "Selamat, Anda berhasil lulus level!" jendela yang cepat. Jika tidak, Anda tidak akan meminta.
Setel ulang game
Mengatur ulang permainan sebenarnya sangat sederhana, cukup tambahkan tombol reset dan hubungi metode render di atasnya:
<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: []}}, Metode: {// Reset render () {let puzzlearr = [], i = 1 // menghasilkan array yang berisi 1 hingga 15 angka untuk (i; i <16; i ++) {puzzlearr.push (i)} // acak (random> {puzzlearr.push (i)} // acak (random) {puzzlearr.push (i)} // acak (random) {puzzlearr.push (i)} / / acak untuk disrupsi array. Math.random () - 0.5}); // Halaman ini menunjukkan this.puzzles = puzzlearr this.puzzles.push ('')}, // klik blok movefn (index) {// Dapatkan posisi klik dan nilainya naik dan turun dan kiri let curnum = this.puzzles [index], leftnum = this.puzzle [index - 1], rightnum = leftnum = this.puzzles [index - 1], rightnum = rightnum = leftnum = this.puzzles [index - 1], rightnum = leftNum. this.puzzles [indeks - 4], bottomnum = this.puzzles [index + 4] // menukar nilai dengan posisi kosong jika (leftnum === '') {this.puzzles. $ set (indeks - 1, curnum) ini. this.puzzles. $ set (index, '')} lain if (topnum === '') {this.puzzles. $ set (index - 4, curnum) this.puzzles. $ set (index, '')} lain jika (bottomnum === ') {this.puzzle. this.passfn ()}, // Verifikasi apakah itu melewati passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.slice (0, 15) const ispass = newpuzzles.every ((e, i) => e ==== I ifics = newpuzzles.every ((e, i) => e ==== I ifics = newpuzzles.every (e, i) => e === i ixss = newpuzzles.every ((e, i) = e === i ixss = newpuzzles.every ((e, i) => e === i ixss = newpuzzles.every (e, i) => e === level! ')}}}}}}, siap () {this.render ()}} </script> <yyty> @import url (' ./ aset/css/bootstrap.min.min.css '); body {font-family: arial, "microsoft yahei"; } .box {width: 400px; margin: 50px auto 0;}. puzzle-wrap {width: 400px; Tinggi: 400px; margin-bottom: 40px; Padding: 0; Latar Belakang: #CCC; List-style: none;}. Puzzle {float: left; Lebar: 100px; Tinggi: 100px; font-size: 20px; Latar Belakang: #F90; Teks-Align: tengah; Line-Height: 100px; Perbatasan: 1px solid #ccc; Kotak-Shadow: 1px 1px 4px; Text-Shadow: 1px 1px 1px #B9B4B4; kursor: pointer;}. puzzle-mempty {latar belakang: #ccc; Kotak-Shadow: Inset 2px 2px 18px;}. Btn-Reset {box-shadow: Inset 2px 2px 18px;} </style>Di sini saya menambahkan kode CSS.
Meringkaskan
Di atas adalah semua tentang artikel ini. Bahkan, volume kode dari game ini tidak banyak, dan poin fungsinya tidak terlalu rumit. Namun, menulis permainan seperti itu melalui Vue akan membantu kita memahami prinsip responsif Vue yang didorong oleh data. Saat menyederhanakan jumlah kode, itu juga meningkatkan keterbacaan kode. Saya harap artikel ini akan membantu semua orang untuk mempelajari beberapa vue.