vueを使った2048ミニゲームの実装手順を詳しく解説-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-22 14:51:45

オリジナル

2303 人が閲覧しました

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

git clone
npm i
npm run dev

ログイン後にコピー

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

vue-cli を使用してプロジェクトをビルドします。このプロジェクトでは少し面倒かもしれませんが、
を使用して別の
4X4 正方形を構築するのが面倒です。保存してバインドする二次元配列設定後は、この二次元配列だけを気にし、他のことは vue に任せます
キーボードを聞くイベント
2048 のコア部分は移動およびマージのアルゴリズムです。これは 4X4 行列であるため、左シフトアルゴリズムを実装するだけで済みます。他の方向への移動には、行列の回転、移動とマージ、および元の回転、および dom のレンダリングのみが必要です。スタイルを異なる値でバインドします
スコア計算、および最高スコアを保存するためにローカルストレージを使用します

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がセルと同じか判断
同じ=>結合
ではない同じ =>最も遠い位置に移動します
移動後、セルをクリアします
次のラウンド
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 サイトの他の関連記事を参照してください。