ホームページ > ウェブフロントエンド > jsチュートリアル > vueを使った2048ミニゲームの実装手順を詳しく解説

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

php中世界最好的语言
リリース: 2018-05-22 14:51:45
オリジナル
2306 人が閲覧しました

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

git clone
npm i
npm run dev
ログイン後にコピー

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

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

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

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

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

  5. スコア計算、および最高スコアを保存するためにローカルストレージを使用します

  6. 実装の鍵

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回しかマージできないため、各グリッドにはマージされたパラメータは、マージされたかどうかを記録します。

  8. メインコード:
_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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート