WeChatアプレットに2048ミニゲームを実装する詳細なプロセス

WeChatアプレットに2048ミニゲームを実装する詳細なプロセス

レンダリング

サンプルコード

今日は、WeChat アプレットを使用して 2048 ゲームを実装します。効果図は上に示されています。ゲームのルールは非常に簡単です。すべてのブロックを同じ方向に動かすように制御する必要があります。同じ数字を持つ 2 つのブロックは、衝突すると合計にマージされます。各操作の後、2 または 4 がランダムに生成されます。最終的に「2048」ブロックを取得できれば勝ちです。

 // 空の行列を構築します [[null,..,size.length],[]]
    空: 関数() {
        var セル = [];

        (var x = 0; x < this.size; x++) の場合 {
            var row = cells[x] = [];

            (var y = 0; y < this.size; y++) の場合 {
                行をプッシュします(null);
            }
        }

        // [[{x:0,y:0},{x:0,y:1}],[]]
        セルを返します。
    },

まず最初に、ゲーム本体を 16 個のグリッドに分割する必要があります。 Grid を使用してこれらのグリッドを表すと、これらのグリッドには次の操作が実行されます。

   // 空のセルからランダムにセルを選択する randomAvailableCell: function() {
    
    // 入力可能なグリッド座標を取得する availableCells: function() {
    
    // 空のセルがあるか cellsAvailable: function() 
    
    /* 
     * セルの内容を取得します * @param {object} cell {x:0,y:0} セル座標 */
    セルコンテンツ: 関数(セル) {

上記の機能はすべて、その後の開発を容易にするために設計されており、直接操作することができます。

 // データを初期化する addStartTiles: function() {
        (var x = 0; x < this.startTiles; x++) {
            ランダムタイルを追加します。
        }
    },

    // ランダムにセルに2または4をランダムに入力します
    ランダムタイルを追加します: 関数() {

        (this.grid.cellsAvailable())の場合{
            var 値 = Math.random() < 0.9 ? 2 : 4;
            var セル = this.grid.randomAvailableCell();
            var tile = new Tile(セル、値);
            this.grid.insertTile(tile); // セルを挿入する}

    },

最初に、データは 90% の確率で 2 を生成し、10% の確率で 4 を生成するように初期化されます。

touchStart: 関数(イベント) {

        // 複数指操作 this.isMultiple = events.touches.length > 1;
        (これは複数です){
            戻る;
        }

        var touch = events.touches[0];

        this.touchStartClientX = touch.clientX;
        touchStartClientY を touch.clientY に設定します。

    },

    touchMove: 関数(イベント) {
        var touch = events.touches[0];
        this.touchEndClientX = touch.clientX;
        this.touchEndClientY = touch.clientY;
    },

    touchEnd: 関数(イベント) {
        (これは複数です){
            戻る;
        }

        var dx = this.touchEndClientX - this.touchStartClientX;
        var absDx = Math.abs(dx);
        var dy = this.touchEndClientY - this.touchStartClientY;
        var absDy = Math.abs(dy);

        (Math.max(absDx, absDy) > 10) の場合 {
            var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);

            var data = this.GameManager.move(方向) || {
                グリッド: this.data.grids、
                以上: this.data.over,
                勝った: this.data.won、
                スコア: this.data.score
            };

        }

ゲームジェスチャは動きの開始と終了を行います。上記のセクションでは主に指の動きの方向を決定します。最後に方向を決定し、移動のために this.GameManager.move(direction) に渡します。

ここでの難しさはデータ構造の構築にありますが、グリッドを理解していれば比較的簡単です。次に指のスライドの判断が行われますが、これは上記のコードに明確に示されています。

要約する

WeChatミニプログラムで2048ゲームを実装する方法についての記事はこれで終わりです。WeChatミニプログラムでの2048ゲームの詳細については、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • フリップカードゲームのWeChatミニプログラムバージョン
  • WeChatアプレットがパズルゲームを実装
  • WeChatアプレットでラッキーホイールゲームを実装する方法

<<:  MySQL の自動増分主キーが使い果たされた場合の対処方法

>>:  Dockerコンテナのネットワークポート設定プロセスの詳細な説明

推薦する

MySQLシリーズ15 MySQL共通設定とパフォーマンスストレステスト

1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...

CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ

標準 CSS3 を使用して要素の影の効果を実現するには、2 つの手順があります。1 つ目は一般的なb...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

Centos7 で yum を使用して Ceph 分散ストレージをインストールするチュートリアル

目次序文yumソース、epelソースを設定するCephソースの設定Cephとそのコンポーネントをイン...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)

目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...

HTML入力ファイルコントロールはアップロードされるファイルの種類を制限します

入力ファイルの HTML コントロールを Web ページに追加します。 <input id=&...

MySQL8の再帰メソッドの使い方を教える

以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...

MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...

要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

html+cssレイアウトの3つの方法(ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト)

1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....

CSS で中空効果を実装するサンプルコード

効果原理主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。クーポ...

CSS スタイルの優先順位はどれくらい複雑ですか?

昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...

最も完全なpackage.json分析

目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...