TypeScript ブロックくずしを作る１０「ブロックを壊す」
ブロックと球の衝突判定ができるようになったので、球が当たったブロックを壊す処理を追加しましょう。ブロックを壊すための設計ブロックを壊すために、今回は次のような設計にします。ブロックに耐久力のパラメータを追加する。ブロックに弾が当たると耐久力...
ブロックくずし
TypeScript TypeScript ブロックくずしを作る９「ブロックと球の衝突処理２」
ブロックに球との衝突判定を追加する衝突判定のアルゴリズムができたので、実際にコーディングしていきましょう。まずはブロック（Brickクラス）に追加するコードです。export class Brick implements IGameCanv...
TypeScript ブロックくずしを作る７「ブロックを配置する」
前回、ブロックの配置仕様や座標計算などを行ったので、それに基づいたコーディングをしていきましょう。ブロック座標へのアクセス機能を追加するブロックくずしをつくる５の最後に、「ブロックの座標をbrick.Rect.Xとbrick.Rect.Yで...
TypeScript ブロックくずしを作る６「ブロック配置の仕様」
ブロック配置の仕様を決める前回まででブロックを表示できるようなり、とりあえず横５個×縦３個を配置しました。今回はブロックをゲームエリア内のどこにどれだけ配置するのかを決めましょう。 上の図は、ゲームエリアとブロックの配置の例を示したものにな...
TypeScript ブロックくずしを作る５「ブロック」
ブロックを追加するブロックくずしの重要なゲーム部品である「ブロック」を追加しましょう。ブロックはキャンバスに描画し、球と衝突し、破壊されます。そのため、IGameCanvasPartを継承したクラスとして定義するべきでしょう。import ...
TypeScript ブロックくずしを作る４「ラケットと球」
ラケットを追加するゲームエリアができたので、ラケットを追加しましょう。ラケットは、「TypeScriptでゲームプログラム」のRacketクラスを流用します。import { IGameCanvasPart } from './game/G...
TypeScript ブロックくずしを作る３「ゲームエリア」
ゲームエリアキャンバス管理クラスができたので、まずはプレイヤーキャラであるラケットを追加…したいところなのですが、その前にラケットや球が移動可能な範囲（ゲームエリア）を設定しましょう。「TypeScriptでゲームプログラム」では、ゲームエ...
TypeScript ブロックくずしを作る２「キャンバスの管理クラス」
CANVASの管理クラスを追加まずはCANVASを管理するためのクラスを追加しましょう。関連するTypeScriptのコードは「TypeScriptでゲームプログラム」から少し変更を加えいます。ElementControlクラス/** * ...
TypeScript ブロックくずしを作る１「最初のひな型を作る」
はじめにMDNにJavaScriptを使ったWEBゲーム制作のチュートリアルとして、以下のページがあります。そのページでは簡単なブロックくずしゲームを作る形でWEBゲームの作り方が紹介されています。これを参考に同様のゲームをTypeScri...