vueを使った2048ミニゲームの実装手順を詳しく解説

今回は、vueを使用して2048ミニゲームを実装する手順について詳しく説明します。vueを使用して2048ミニゲームを実装する場合の注意事項を紹介します。

git clone
npm i
npm run dev

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

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

   を使用して別の

2. 4X4 正方形を構築するのが面倒です。保存してバインドする二次元配列 設定後は、この二次元配列だけを気にし、他のことは vue に任せます

3. キーボードを聞くイベント

4. 2048 のコア部分は移動およびマージのアルゴリズムです。これは 4X4 行列であるため、左シフト アルゴリズムを実装するだけで済みます。他の方向への移動には、行列の回転、移動とマージ、および元の回転、および dom のレンダリングのみが必要です。スタイルを異なる値でバインドします

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 次元配列でレンダリングされ、スタイルに動的にバインドされます

Shift left

主に次のケースで構成されます:

2 2 2 2 => 4 4 0 0

• 4 2 2 2 => 4 4 2 0

• 0 4 2 2=> 4 4 0 0

• 2 2 4 2 => 4 4 2 0

• たとえば、単一行のデータ、

単一行の配列を走査し、データがある場合はそれをセルとして記録し、セルが最も左に移動できる最も遠い空の位置を見つけます

1. 左かどうかを判断します最遠の辺が存在しない場合は、最遠に直接移動

2. 存在する場合は、最遠の値-1がセルと同じか判断

3. 同じ=>結合

4. ではない同じ =>最も遠い位置に移動します

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

6. 次のラウンド

7. 1ラウンドの移動で、数字は1回しかマージできないため、各グリッドにはマージされたパラメータは、マージされたかどうかを記録します。

メインコード:

_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回書けますが、間違いやすいので直接書きますマトリックスの回転 回転してから移動します。 行列を反時計回りに 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
  },

この時点で、ポイントの追加、再起動、その他の機能を改善する必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue プロジェクトでの VeeValidate フォーム検証ユースケースのコード分析

JavaScript DOM 要素を追加、削除、変更する手順の詳細な説明

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