検索
ホームページウェブフロントエンドH5 チュートリアル連聯館ミニゲームのフロントエンド実装サンプルコード

連聯館ミニゲームのフロントエンド実装サンプルコード

Jun 22, 2017 pm 03:15 PM
フロントエンド成し遂げるゲーム

ブロガーは長い間リアンリアン・カンをプレイしてきましたが、リアン・リアン・カンが最大2ターンしか持ちえないことを初めて知りました。 orz…

リアンリカンの接続アルゴリズム判定をネットで検索したのですが、あまりまとまったものは見つからず、自分なりに調べた結果、以下のような絵を描きました(ちょっと絵が汚いですが…)

1. 同じ場所にある 2 つのオブジェクト 直線上であれば直接接続できます (説明する必要はありません)

2. 2 つのオブジェクトが同じ直線上にあり、その中に障害物があります

[黄色の線をループし、点AとBなどの交差点を通過し、青い線上に障害物があるかどうかを判断し、そうでない場合は接続できます。存在する場合は、ループを続けて新しい点 A と B を見つけます。以下の図に示すように、それぞれの位置での y 軸の交点は A と B になります。 2 つの交点から 2 つのオブジェクトに直接障害物があるかどうかを判断してください。そうでない場合は接続できます。

IV. 2 つのオブジェクトは同じ直線上になく、接続は 2 です。

【同様です。2の原理は下図のようになります。交点AとBから物体まで障害物がなければ接続できます。点 A の座標は点 B の座標と同じです】

別のケースでは、A と B は 2 つのオブジェクトの x 軸と中央の y 軸の交点になります。 A と B の接続は次のようになります。

上記の 4 つの接続アルゴリズムの判断は、絵を描くときに、それぞれ x 軸のみを描画できます。同じ原理に従って y 軸を増加させます。接続判定のすべてをカバーできます~

接続判定のロジックについて話した後、ゲーム全体のフレームワークを書きます。ゲームは基本的にネイティブ JavaScript を使用し、createjs ゲーム エンジンを使用して開発されます。

コードのアイデア:

1. ゲームの絵を描き、それがモバイル側の小さなゲームであるため、最小画面サイズ (iPhone4 320*480) に合わせて決定します。 7*9 の宮殿の絵であると判断されます。

1. 特定の座標にオブジェクトがある場合は 1、そうでない場合は 0

2 を決定するだけで済みます。対応する 2 次元配列の値が 1 かどうか。1 の場合はオブジェクトがあり、そうでない場合はオブジェクトがありません。

線を引いたり同一オブジェクトを削除したりすることについては、接続ロジックを知っていれば間違いなく自分で線を引いたりオブジェクトを削除したりすることになるので、この記事では接続判定についてのみ説明します~

接続できるか このとき、次のような最も単純な方法で判断する必要があります

同じ直線を一直線に接続できるか--->一点を囲んでいれば接続できない--- ->2 つの点は直線上にあり、直線で接続できません。--->同じ直線上にありませんが、接続できます

getPath: function (p1, p2) {//开始搜索前对p1,p2排序,使p2尽可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;
                p1 = p2;
                p2 = t;
            }else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;
                    p1 = p2;
                    p2 = t;
                }
            }//2点在同一直线上,可以直线连通if (this.hasLine(p1, p2).status) {return true;
            }//如果两点中任何一个点被全包围,则不通。else if (this.isWrap(p1, p2)) {return false;
            }//两点在一条直线上,不能直线连接但是可以连通else if (this.LineLink(p1, p2)) {return true;
            }//不在同一直线但是可以连通else if (this.curveLink(p1, p2)) {return true;
            }    
}

//判断同一条线能否连通,x轴相同或者y轴相同hasLine: function (p1, p2) {this.path = [];//同一点if (p1.x == p2.x && p1.y == p2.y) {return {
                    status: false};
            }if (this.onlineY(p1, p2)) {var min = p1.y > p2.y ? p2.y : p1.y;
                min = min + 1;var max = p1.y > p2.y ? p1.y : p2.y;for (min; min  p2.x ? p2.x : p1.x;
                j = j + 1;var max = p1.x > p2.x ? p1.x : p2.x;for (j; j <div class="cnblogs_code">接続判定</div><p></p><div class="cnblogs_code"></div>

以上が連聯館ミニゲームのフロントエンド実装サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか?H5はHTML5と同じですか?Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか?H5の機能は何ですか?Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1)Webページにグラフィックとアニメーションを描画できる要素。 2)Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3)Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4)互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境