TypeScript ブロックくずしを作る７「ブロックを配置する」
前回、ブロックの配置仕様や座標計算などを行ったので、それに基づいたコーディングをしていきましょう。ブロック座標へのアクセス機能を追加するブロックくずしをつくる５の最後に、「ブロックの座標をbrick.Rect.Xとbrick.Rect.Yで...
ゲームプログラム
TypeScript 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...
TypeScript TypeScriptでゲームプログラム１５「バージョン２完成：全ソースコード」
ひとまず完成まだまだ整理したいところがあるけれど、終わりが見えてきません。前回までのコード整理でひとまずの完成とします。実際の実行例を以下に示します。 全コードここまで作ってきた全コードを以下に示します。/** * 四角形を表すクラス */...
TypeScript TypeScriptでゲームプログラム１４「コードからGame.XXXを消す」
予想できなかった問題発生これまでのコード整理で、グローバル変数や関数はすべて消え、以下のようにGameMngのインスタンスを生成し、初期化、開始するだけになりました。const Game = new GameMng();// ゲーム状態の初...
TypeScript TypeScriptでゲームプログラム１３「グローバル変数を減らす」
グローバル変数の見直しBall1、Rakect1、GameStatusなど、これまで多くのグローバル変数を使ってきました。グローバル変数がバラバラとあるプログラムは管理しにくくなるので、管理しやすくするために、いくつかのグループにまとめ、減...
TypeScript TypeScriptでゲームプログラム１２「イベントハンドラをクラスに移動する」
ボタン１のクリック処理ボタン１を押すことでゲームを開始したり、中断したりしている部分のコードは、これまでのコード整理の対象にはなっていません。初期のコードのまま下のようになっています。document.addEventListener("D...
TypeScript TypeScriptでゲームプログラム１１「キャンバス関連処理もクラス化する」
キャンバス管理クラスの追加UpdateGameSItuation()とDrawGameCanvas()をGameLoop内で実行させるためにとりあえず無名クラスを使いましたが、ここを正式なクラス化していきましょう。UpdateGameSIt...
TypeScript TypeScriptでゲームプログラム１０「ゲームループ処理をクラス化する」
ゲームループの管理クラス「多くのゲームでは、一定時間ごとにゲームの状況が更新され、それをCANVASに再描画することを繰り返している。」という話はプログラムを作り始める一番最初に書きました。そしてこれまで、window.requestAni...
TypeScript TypeScriptでゲームプログラム９「クラス化でメッセージを管理する」
メッセージ管理クラスの追加<div id="message">（以後これをメッセージボックスと呼ぶことにする）には、現在の得点やゲームオーバーのメッセージなど表示しています。しかし、メッセージボックスの変更は複数の場所で行っています。現在は...
TypeScript TypeScriptでゲームプログラム８「球のクラス化と処理改善」
球をクラス化するラケットをクラス化したときにRectクラスを使ったように、球をクラス化するにはCircleクラスを使います。/** * 球を表すクラス */class Ball { /** * 球本体の円 */ private _body:...