vue を使用して 2048 ミニゲームを実装する方法

今回はvueを使って2048ミニゲームを実装する方法を紹介します。vueを使って2048ミニゲームを実装する際の注意点を紹介します。

使用方法:

git clone
npm i
npm run dev

実装アイデアは次のとおりです:

1. vue-cli を使用してプロジェクトをビルドします。このプロジェクトは少し面倒かもしれませんが、別のプロジェクトをビルドするのは面倒です

2. 。

   4X4 グリッドには 2D を使用します。配列 が保存されます。バインディング後は、この 2 次元配列のみを考慮して、キーボード

   イベントを監視します

3. 。 2048 は移動とマージのアルゴリズムです。これは 4X4 マトリックスであるため、左シフト アルゴリズムが実装されている限り、他の方向への移動にはマトリックスの回転、動きのマージ、元の回転、およびバインディングのレンダリングだけが必要です。異なる値を持つスタイル

4. スコア計算とローカルストレージの使用最高スコアを保存するための鍵

5. は実装することです
DOM

<p class="box">
  <p class="row" v-for="row in list">
    <p class="col" :class="&#39;n-&#39;+col" v-for="col in row">{col}}</p>
  </p>
</p>

メインゲーム部分のDOMは非常に複雑ですシンプルで、2 次元配列でレンダリングされ、スタイルに動的にバインドされます左にシフト

主に次の状況によって発生します:

2 2 2 2 => 4 4 0 0

4 2 2 2 => 4 4 2 0

• 0 4 2 2=> 4 4 0 1 farthest

• の左側が存在するかどうかを決定します。最遠へ直接

• 存在する場合は、最遠の値 - 1 がセルと同じであるかどうかを判断します

• 同じ => ; マージ

同じではない =>最遠の位置に移動

1. 移動後、セルをクリアします

2. 次のラウンド

3. 移動のラウンドでは、数値は一度だけマージできるため、各グリッドにはマージされたかどうかを記録するマージされたパラメーターが必要です。
   メインコード:

_list.forEach(item => {
    let farthest = this.farthestPosition(list, item)
    let next = list[farthest - 1]
    if (next && next === item.value && !_list[farthest - 1].merged) {
      //合并
      list[farthest - 1] = next * 2
      list[item.x] = undefined
      item = {
        x: farthest - 1,
        merged: true,
        value: next * 2
      }
      this.score += next * 2
    } else {
      if (farthest != item.x) {
        list[farthest] = item.value
        list[item.x] = undefined
        item.x = farthest
      }
    }
  })

4. 行列回転

5. 実際は上下左右のシフトが同じなので4回書けますが、間違いやすいので直接書きますマトリックスの回転 回転してから移動します。
6. 行列を反時計回りに 1 回回転させると、動きが結合された後、行列が反時計回りに 4 ～ 1 回回転すると、上向きシフトが左シフトになります。の場合、行列は単純な上方シフトと同じになります。
   反時計回りの回転アルゴリズム:

rotate(arr, n) {
    n = n % 4
    if (n === 0) return arr
    let tmp = Array.from(Array(this.size)).map(() => Array(this.size).fill(undefined))
    for (let i = 0; i < this.size; i++) {
      for (let j = 0; j < this.size; j++) {
        tmp[this.size - 1 - i][j] = arr[j][i]
      }
    }
    if (n > 1) tmp = this.rotate(tmp, n - 1)
    return tmp
  },

7. この時点で、ポイントの追加、再起動、その他の機能を改善する必要があります。
   この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue で vee-validate を使用する方法

node を使用してドメイン間で Express+http-proxy-middleware を使用する詳細な手順

以上がvue を使用して 2048 ミニゲームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。