Space Defender - プロジェクトのセットアップの一部

前の投稿では、Vite と TypeScript を使用して PixiJS プロジェクトをセットアップする方法を説明しました。この投稿では、その設定に基づいて構築されるシンプルなスペース ディフェンダー ゲームを作成します。

このプロジェクトでは、TypeScript/JavaScript でプログラムする方法についての基本的な知識があることを前提としています。また、私たちは PixiJS に焦点を当てているため、HTML/CSS 側にはあまり焦点を当てません。

最終的なソース コードは私の GitHub リポジトリにあります。ゲームをプレイしたい場合は、ここで見つけることができます。

プロジェクトのセットアップ

Vite と TypeScript を使用して PixiJS プロジェクトをまだセットアップしていない場合は、セットアップ方法と実行方法を説明した前回の投稿を最初に読むことをお勧めします。

このプロジェクトに必要なコンテンツを含むindex.htmlファイルを簡単にセットアップしましょう。

の内容を置き換えます。以下の要素:

<div id="app">
    <div id="gameHud">
        <div>
            Lives: <span id="gameLives"></span>
        </div>
        <div>
            Level: <span id="gameLevel"></span>
        </div>
        <div>
            Score: <span id="gameScore"></span>
        </div>
    </div>
    <div id="game">

    </div>
</div>

これがゲームの構造になります。プレイヤーのライフ、レベル、スコアを表示する HUD (ヘッドアップ ディスプレイ) があります。そして、ゲームをレンダリングするゲームコンテナー。パート 4 では、これを利用し始めます。

次に、画面上に適切に表示されるように、これに CSS を適用する必要があります。 src フォルダー内のstyles.cssというスタイルシートに移動し、次のコンテンツを追加します:

body {
    margin: 0;
    background-color: darkgrey;
}

#app {
    height: 100vh;
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameHud {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;

    > div {
        flex: 1;
    }
}

ゲーム画面の準備

すごいですね！基本的な構造が整ったので、ゲーム画面を作成してみましょう。ゲームが DOM 内のゲーム キャンバスを挿入する場所を認識できるように、ゲーム コンテナー要素を保持する変数が必要です。

(async () => {
    let gameContainer = document.getElementById("app");

    // ....
});

その後、必要なゲーム サイズに合わせてアプリのサイズを更新する必要があります。この場合、幅 480、高さ 720 のゲームが必要です。したがって、そのサイズに一致するように app.init 呼び出しを更新する必要があります。

await app.init({
    width: 480,
    height: 720,
});

そして交換

document.body.appendChild(app.canvas);

と

gameContainer.appendChild(app.canvas);

これで、サイズ 480x720 ピクセルのゲーム画面が画面の中央に表示されます。

次のパートでは、プレイヤーの船の作成を開始し、それを動かしたり撃ったりします。

---

Vite と TypeScript を使用した PixiJS セットアップ

さん。リンクセド・4月20日

#webdev #javascript #初心者 ＃チュートリアル

「Cult of Done」でさらに多くのことを達成しましょう

さん。リンクセド・2月18日

#生産性 #初心者 ＃話し合う ＃モチベーション

---

これらと同様のチュートリアルについていち早く知るには、ニュースレターに登録することを忘れないでください。

以上がSpace Defender - プロジェクトのセットアップの一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。