ブロックくずしを作る１「最初のひな型を作る」

2022.10.12

はじめに
HTMLの準備
TypeScriptの準備

はじめに

MDNにJavaScriptを使ったWEBゲーム制作のチュートリアルとして、以下のページがあります。

https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

そのページでは簡単なブロックくずしゲームを作る形でWEBゲームの作り方が紹介されています。これを参考に同様のゲームをTypeScriptで作っていきたいと思います。

HTMLの準備

最初に、HTMLのひな型を作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブロック崩し</title>
    <script src="main.js"></script>
    <style>
        #gameContainer {
            display: block;
            background-color: black;
            padding: 4px;
            width: max-content;
            font-size: 12pt;
        }

        #gameScore {
            border: 2px solid yellow;
            border-radius: 8px;
            padding: 10px;
            color: yellow;
        }

        #message {
            border: 2px solid gray;
            border-radius: 8px;
            min-height: 50px;
            padding: 10px;
            color: white;
        }
    </style>
</head>

<body>
    <div id="gameContainer">
        <div id="gameScore">SCORE:10000</span></div>
        <canvas id="gameCanvas" width="320" height="320"></canvas>
        <div id="message">メッセージ</div>
    </div>
</body>

</html>

TypeScriptでゲームプログラムのときとまったく変わらないのも面白くないので、点数表示のために専用<div>を用意しました。

HTMLだけだとわかりにくいので、実際の例を下に示します。

SCORE:10000

メッセージ

TypeScriptの準備

ゲームプログラムのメイン処理を行うTypeScriptをコーディングしていきましょう。

まずは核となるGameMngクラスは、とりあえずのひな型として以下のように記述します。

import { GameLoop } from './game/GameLoop';

export class GamemMng extends GameLoop {
    constructor() {
        super();
    }
}

クラスGameLoopは、「TypeScriptでゲームプログラム」からの流用です。（リンク先に全コードがあります。）

今回からは基本的に「１クラス１ファイル」で記載しているので、GameLoopをimportしています。（複数ファイルで構成されるので、最終的なjavascriptはwebpackを使って作成します。）

上のコードだけではGameMngクラスを宣言しただけなので、newした後、Start()するコードをmain.tsに記述します。

import { GameMng } from './GameMng';
const Game = new GamemMng();
Game.Start();