最初にレンダリングを見てみましょう：
機能分析
もちろん、それはすべてプレイすることです。 Vue愛好家として、私たちはゲームの奥深くに進み、コードの実装を探求する必要があります。次に、そのようなゲームを完了するために主に必要な関数を分析しましょう。以下に、この例の機能ポイントを直接リストします。
1. 1〜15の数字グリッドをランダムに生成します。各数値が表示され、1回のみ表示する必要があります。
2。デジタル広場をクリックした後、上、下、左、右に1つの場所がある場合、2つの交換位置
3。グリッドが動くたびに、レベルを正常に通過したかどうかを確認する必要があります。
4。リセットゲームボタンをクリックした後、パズルを再注文する必要があります
上記は、この例の主な機能ポイントです。ゲーム機能が複雑ではないことがわかります。私たちはそれらを1つずつ壊す必要があり、それは大丈夫です。次に、各機能ポイントのVUEコードを表示します。
ゲームパネルを構築します
データ駆動型のJSフレームワークとして、VueのHTMLテンプレートはしばしばデータに拘束される必要があります。たとえば、このようなゲームのブロックグリッドをここに記述してはなりません。コードは次のとおりです。
<テンプレート> <div> <ul> <li：class = "{'puzzle'：true、 'puzzle-empty'：！puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle"> </li> </ul> </div> </template> <scrition {returt {utort {{1 x {1、5、5、5、5、5、5、5、5、5、5、5、5、5、5、5、5、5、5、 7、8、9、10、11、12、13、14、15]}} </script>ここでCSSスタイルの部分を省略したので、今のところ心配する必要はありません。上記のコードでは、アレイに1〜15の数字を書きました。これは明らかにランダムにソートされていないため、ランダムソートの機能を実装します。
数字のランダムソート
<テンプレート> <div> <ul> <li：class = "{'puzzle'：true、 'puzzle-empty'：！puzzle}" v-for = "Puzzle in Puzzles" v-text = "Puzzle"> </li> </ul> </div> </template> <script> export {{} {] {} {w-datuls：} {putript> < reset render（）{let puzzlearr = []、i = 1 //（i; i <16; i ++）{puzzlearr.push（i）}の1から15の数値の配列を生成する//配列をランダムに破壊しますpuzzlearr.sort（（）=> {math.random（）-0.5}）; //ページはthis.puzzles = puzzlearr this.puzzles.push（ ''）}、}、ready（）{this.render（）}}を表示します。上記のコードでは、forループを使用して、1〜15の順序付けられた配列を生成します。次に、ネイティブJSソートメソッドを使用して、数値をランダムに破壊します。これには、 Math.random()メソッドである知識ポイントも含まれています。
カスタムソートにsort()メソッドを使用するには、比較関数を提供し、これらの2つの値の相対順序を説明するために使用される数値を返す必要があります。また、その返品値は次のとおりです。
1。aがb未満であることを示す値を0未満に返します
2。aがbに等しいことを示す0を返します
3。AがBより大きいことを示します。
ここでは、 Math.random()を使用して0〜1の乱数を生成し、0.5を差し引きます。このようにして、確率の半分は、確率の0未満の値を返す値を0より大きい値に返し、生成された配列のランダム性を保証し、数値グリッドの動的ランダム生成の関数を実現します。
また、アレイの端に空の文字列を挿入して、一意のブランクグリッドを生成することにも注意してください。
スイッチブロック位置
<テンプレート> <div> <ul> <li：class = "{'puzzle'：true、 'puzzle-empty'：！puzzle}" v-for = "パズルのパズル" v-text = "puzzle" @click = "movefn（$ index）"> </li> </ul> </div> </divz> <div> }}、methods：{// reset render（）{let puzzlearr = []、i = 1 //（i; i <16; i ++）{puzzlearr.push（i）} //アレイを破壊するための1〜15の数字の配列を生成します。 //ページにはthis.puzzles = puzzlearr this.puzzles.push（ ''）}、//ブロックmovefn（index）{//クリック位置とその値を上下にクリックします。 -4]、bottomnum = this.puzzles [index + 4] //空の位置で値を交換するif（leftnum === ''）{this.puzzles。$ set（index -1、curnum）this.puzzles。 this.puzzles。$ set（index、 ''）} else if（topnum === ''）{this.puzzles。$ set（index -4、curnum）this.puzzles。$ set（index、 ''）} }}、ready（）{this.render（）}} </script>1.ここで、最初にクリックイベント @click = "MoveFn（$ index）"を各グリッドのLiに追加し、$ indexパラメーターを使用して、配列のクリックブロックの位置を取得します。
2。次に、アレイの数字のインデックス値をアレイ内の左と右、インデックス-4、インデックス + 4、インデックス-1、インデックス + 1として取得します
3.上、下、左、右側に空の場所を見つけたら、null位置で現在クリックされているグリッドの数に空の位置を割り当て、現在のクリック位置を空にするように設定します
注：値を直接割り当てる代わりに、$ setメソッドを使用するのはなぜですか？これには、VUE応答性の原則に関する知識ポイントが含まれています。
// javaScriptの制限により、vue.jsは次の配列の変更を検出できません。 //2。vm.items.length= 0。//などのデータの長さを変更します。
テストが成功したかどうかを確認してください
<テンプレート> <div> <ul> <li：class = "{'puzzle'：true、 'puzzle-empty'：！puzzle}" v-for = "パズルのパズル" v-text = "puzzle" @click = "movefn（$ index）"> </li> </ul> </div> </divz> <div> }}、methods：{// reset render（）{let puzzlearr = []、i = 1 //（i; i <16; i ++）{puzzlearr.push（i）} //アレイを破壊するための1〜15の数字の配列を生成します。 //ページにはthis.puzzles = puzzlearr this.puzzles.push（ ''）}、//ブロックmovefn（index）{//クリック位置とその値を上下にクリックします。 -4]、bottomnum = this.puzzles [index + 4] //空の位置で値を交換するif（leftnum === ''）{this.puzzles。$ set（index -1、curnum）this.puzzles。 this.puzzles。$ set（index、 ''）} else if（topnum === ''）{this.puzzles。$ set（index -4、curnum）this.puzzles。$ set（index、 ''）} this.passfn（）}、// passfn（）{if（this.puzzles [15] === ''）{const newpuzzles = this.puzzles.slice（0、15）const ispass = newpuzzles.Every（（e、i）=> e === = = = = = = I + 1）if（ 'a + 1）if（' a + 1）const ispass = newpuzzles.Every（（e、i）= const ispass = newpuzzles. level！ '）}}}}}}、ready（）{this.render（）}} </script> moveFnメソッドのpassFnメソッドを検出するために呼び出します。PASSFN passFnには、2つの知識ポイントが含まれます。
（1）スライス方法
スライス法を介して、配列の最初の15の要素を傍受して新しい配列を生成します。もちろん、アレイの次の要素は空です。
（2）すべての方法
すべてのメソッドを通して、傍受された配列の各要素がインデックス+1値に等しいかどうかをループします。すべてが等しい場合、それは真実に戻ります。等しくないものがある場合、それはfalseを返します。
レベルを正常に渡すと、ISPassの価値が真実であり、「おめでとうございます、レベルを正常に通過してください！」と警告します。プロンプトウィンドウ。そうでない場合は、促しません。
ゲームをリセットします
ゲームのリセットは実際には非常にシンプルです。リセットボタンを追加して、 renderメソッドを呼び出すだけです。
<テンプレート> <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：[]}}、method：{// reset render（）{let puzzlearr = []、i = 1 //（i; i <16; i ++）{pusl.pur.pur.push e） puzzlearr.sort（（）=> {return math.random（） - 0.5}）; //ページにはthis.puzzles = puzzlearr this.puzzles.push（ ''）}、//ブロックmovefn（index）{//クリック位置とその値を上下にクリックします。 -4]、bottomnum = this.puzzles [index + 4] //空の位置で値を交換するif（leftnum === ''）{this.puzzles。$ set（index -1、curnum）this.puzzles。 this.puzzles。$ set（index、 ''）} else if（topnum === ''）{this.puzzles。$ set（index -4、curnum）this.puzzles。$ set（index、 ''）} this.passfn（）}、// passfn（）{if（this.puzzles [15] === ''）{const newpuzzles = this.puzzles.slice（0、15）const ispass = newpuzzles.Every（（e、i）=> e === = = = = = = I + 1）if（ 'a + 1）if（' a + 1）const ispass = newpuzzles.Every（（e、i）= const ispass = newpuzzles. level！ '）}}}}}}}}}}}}}}}} {this.render（）}} </script> <style> @import url（' ./ assets/css/bootstrap.min.css '）; body {font-family：arial、 "microsoft yahei"; } .box {width：400px;マージン：50px auto 0;}。パズルラップ{width：400px;高さ：400px;マージンボトム：40px;パディング：0;背景：#ccc;リストスタイル：なし;}。パズル{float：left;幅：100px;高さ：100px;フォントサイズ：20px;背景：＃f90;テキストアライグ：センター;ラインハイト：100px;ボーダー：1pxソリッド#ccc; Box-Shadow：1px 1px 4px; Text-Shadow：1PX 1PX 1PX＃B9B4B4;カーソル：ポインター;}。パズル - エンプレー{背景：#ccc; Box-Shadow：Inset 2PX 2PX 18PX;}。BTN-RESET {box-shadow：Inset 2px 2px 18px;} </style>ここでは、CSSコードを追加しました。
要約します
上記はこの記事に関するすべてです。実際、このゲームのコードボリュームはそれほど大きくなく、関数ポイントはそれほど複雑ではありません。ただし、Vueを通じてそのようなゲームを書くことは、データによって駆動されるVUEの応答的な原則を理解するのに役立ちます。コードの量を簡素化しますが、コードの読みやすさも向上します。この記事が誰にとってもvueを学ぶのに役立つことを願っています。