作ってみたシリーズ！第3弾【ブロック崩し(Step1)】

こんにちは。

今回は「作ってみたシリーズ」の第3弾としてブロック崩しを製作しました。
いよいよTypeScriptを使ったブラウザゲームに手を伸ばしています。

30年前にゲームボーイやファミコンで遊んだゲームを、ブラウザ上で再現しました。
ChatGPTと相談しながら、最短で動く仕様から少しずつ演出やBGMなど順に仕上げています。

この記事では、作り方の道筋とハマリポイントをフェーズごとに紹介します。

仕様
初めまして。TypeScript
製作の流れ
フェーズ1～3：当たり判定→ブロック配置→スコア

仕様

いつものように仕様を考えていきます。

バーを操作してボールを跳ね返す/壁・ブロックに当たると反射
ブロックは命中で消える。全破壊でクリア。
全てのブロックを消せばクリア
スコアを表示する
ライフは未設定
最短で「遊べる」状態まで到達すること
基本挙動は一般的なブロック崩しに準拠

この内容をChatGPTに投げかけます。

今回のプロンプトは

#作業指示:
PCでブロック崩しゲームを作成する。
これまでHTML/JavaScript/CSSでゲームを作成してきた。ブロック崩しゲームの開発に適した効率的なプログラミング言語と、推奨される開発手順を提案せよ。
続けて具体的な手順と理由。提案内容が本課題に適合しているか短く検証すること。

こんな感じでGo!

初めまして。TypeScript

チャッピーからはTypeScript＋Phaser 3での制作を進めてくれました。

TypeScript（タイプスクリプト）とは”安全で分かりやすくしたJavaScript。プログラミングの「型」というルールを使うことで、間違いを減らし、大きなプログラムも効率的に作れます。”

一方Phaser 3(フェイザースリー)とは、”ウェブブラウザで動くゲームを作るための、「ゲーム開発用の道具箱」。キャラクターの動きや物理演算など、ゲームに必要な機能があらかじめ用意されている。”とされています。

UdemyやYouTubeなどでもTypeScriptについてはよくエンジニアの人たちが紹介しています。
とても開発効率が高い言語だそうです。

なぜTypeScript + Phaser 3 ?

ChatGPTがこの言語を候補にした理由は、

2Dゲームに必要な「シーン管理・スプライト・入力・当たり判定・タイマー・音」などを一通りそろっている。
型でバグを早期発見でき、保守性が高い。
HTML/CSS/JSの延長。実装までの距離が短い。

とのこと。

とりあえず、作りやすいってことで解釈しておきましょう。
ワクワクしますね。それでは制作を始めていきます。

製作の流れ

進め方ですが、下記のように段階に分けて製作していきます。

玉・パドル・壁＆当たり判定
ブロック配置とステージデータ化
スコア・ライフ追加
ヒットエフェクト/BGMなど演出追加
レベル拡張と難易度設計追加

フェーズ1～3：当たり判定→ブロック配置→スコア

完成イメージは

画面にボールが1個、パドルが1枚。矢印キーorマウスでパドル操作。
ボールは壁に当たると反射。パドルで跳ね返す。
ブロックは1列に配置。
ボールが当たると破壊されること。
ボールが当たると反射すること。
ブロック破壊でスコア加算すること。

これらのコードをChatGPTに生成してもらい、実行！

形はそれなりのものができました。
パドルなど、視認性が悪いのでCSSで少し修正していきます。

.paddle {
width: 120px;
height: 14px;
border-radius: 999px;
background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
box-shadow:

その他細かい調整

0 0 0 2px #ffffff, /* 外側の白縁：背景が暗くても埋もれない */
0 0 0 4px #0f172a, /* さらに外側の濃い縁：輪郭を強調 */
0 8px 14px rgba(0,0,0,.35), /* 落ち影：浮いて見える */
0 0 24px rgba(56,189,248,.65); /* シアン系の柔らかいグロー */
}

修正したものがこちら