検索
ホームページウェブフロントエンドH5 チュートリアルHTML5ベースのスーパーマリオゲームデモのサンプルコードを詳しく紹介

機能の説明:

HTML5 に基づいたスーパー マリオ ゲームのデモです。矢印キーで左右の移動を制御し、矢印キーでジャンプを制御します。このゲームは私が開発した HTML5 ゲーム フレームワーク cnGameJS に基づいています。

最新バージョンのブラウザでご覧ください。

エフェクト表示:

HTML5ベースのスーパーマリオゲームデモのサンプルコードを詳しく紹介

コード実装:

このゲームデモの主な要素は、リソースの読み込み、外部入力、衝突検出、アニメーション、ゲームループ、シーンです。ステップごとに分析して説明します。

1. リソースの読み込み:

最初にレベルを表すゲームオブジェクトが必要です。このオブジェクトには、初期化、更新、描画という 3 つのメソッドがあります。それぞれの機能は、初期化、すべてのゲーム要素の更新、すべてのゲーム要素の描画です。ゲームを開始する前に、最初にすべての画像リソースをロードする必要があります。その後、ゲーム ループが開始され、ゲーム オブジェクトの初期化パラメータが呼び出されます:


 srcObj={
    startSrc:"images/gamestart.png",
    backgroundSrc:"images/background.png",
    enemySrc:"images/enemy.png",
    playerSrc:"images/player.png",
    stoneSrc:"images/stone.png",
    stoneSrc2:"images/stone2.png",
    pillarSrc:"images/pillar.png",
    bulletSrc:"images/bullet.png"
}

cnGame.init('gameCanvas',{width:500,height:400});
 maryGame={
    initialize:(){
    },
    update:(){

    },
    draw:(){
    }
}
    cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);

2. 外部入力:

キーボードの矢印以来Mary の Move を生成するにはキーが必要なので、キーボードの方向キーが押されたかどうかを検出する必要があります。cnGameJS の isPressed(keyName) を使用してキーボード入力を検出できます。​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​:​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​:


3. 衝突検出:

cnGameJS は長方形と長方形の衝突検出をカプセル化しているので、ここでの衝突検出の複雑な点は、メアリーと敵をそれぞれ検出することです。岩が衝突し、その状況に応じてメアリーの速度と加速度が変化します。

1:メアリーが敵と衝突し、メアリーのY方向の速度に基づいて敵が死ぬかメアリーが死ぬかを判定する。

2: メアリーが石に衝突し、メアリーの Y 方向の速度が 0、Y 方向の加速度が 0 になります。

3: メアリーが石から離れる: 重力加速度が元に戻ります。

4. アニメーション:

ここでのアニメーションは、主にメアリーが動くときの足のアニメーションを指します。メアリーが停止するときに画像を使用し、移動するときにアニメーションを使用します。いわゆるアニメーションは、実際には大きな画像内のフレームアニメーションです。たとえば、次のような画像を準備します。その後、毎回異なる位置にメアリーを表示するだけでアニメーションが完成します。プレビュー

5. ゲームループ

ゲームループは、ユーザーが渡したfpsを受け取り、ループ間隔を計算してフレームを更新するループです。 、ゲームアニメーションを生成します:

        (cnGame.input.isPressed("up")){
.jump();

        }
 (cnGame.input.isPressed("right")){
.moveRight();    
        }
 (cnGame.input.isPressed("left")){
.moveLeft();
        }
{
.stopMove();
        }

6. シーン:

いわゆるシーンは、メアリーが動くとき、メアリーはキャンバスの中央に留まり、背景は反対方向に動くオブジェクトです。 。シーン オブジェクトは背景を移動するだけでなく、プレイヤーの速度に応じて非プレイヤー ゲーム オブジェクトを逆方向に移動します: エフェクト プレビュー


                    (cg.loop&&!cg.loop.stop){                        cg.loop.end();
                    }
                    cg.loop= cg.GameLoop(self.gameObj);                    cg.loop.start();

以上がHTML5ベースのスーパーマリオゲームデモのサンプルコードを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5:標準とWeb開発への影響HTML5:標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例:実用的なアプリケーションとチュートリアルH5コードの例:実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続:類似性と相違点H5とHTML5の接続:類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素:キー要素とその目的H5コードの構成要素:キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5:一般的な使用法の理解HTML5およびH5:一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5:現代のウェブのビルディングブロック(H5)HTML5:現代のウェブのビルディングブロック(H5)Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード:クリーンで効率的なHTML5の書き込みH5コード:クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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