レンダリングサンプルコード今日は、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を応援してください。 以下もご興味があるかもしれません:
|
<<: MySQL の自動増分主キーが使い果たされた場合の対処方法
>>: Dockerコンテナのネットワークポート設定プロセスの詳細な説明
環境: VMware VCSA 6.7 (VMware-VCSA-all-6.7.0-8169922...
nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...
序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...
序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...
前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...
自宅のルーターが300Mの帯域幅を80Mに強制的に減らしたため、3205Uソフトルーターを購入しまし...
1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...
1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...
弊社のプロジェクトは Java で開発され、ミドルウェアは Tomcat でした。運用中に、Tomc...
この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。 以下...
1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...
マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...
この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します...
1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...
この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...