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

機能の説明:

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

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

エフェクト表示:

コード実装:

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

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 サイトの他の関連記事を参照してください。