TypeScript TypeScriptでゲームプログラム１０「ゲームループ処理をクラス化する」
ゲームループの管理クラス「多くのゲームでは、一定時間ごとにゲームの状況が更新され、それをCANVASに再描画することを繰り返している。」という話はプログラムを作り始める一番最初に書きました。そしてこれまで、window.requestAni...
プログラム
TypeScript TypeScript TypeScriptでゲームプログラム９「クラス化でメッセージを管理する」
メッセージ管理クラスの追加<div id="message">（以後これをメッセージボックスと呼ぶことにする）には、現在の得点やゲームオーバーのメッセージなど表示しています。しかし、メッセージボックスの変更は複数の場所で行っています。現在は...
TypeScript TypeScriptでゲームプログラム８「球のクラス化と処理改善」
球をクラス化するラケットをクラス化したときにRectクラスを使ったように、球をクラス化するにはCircleクラスを使います。/** * 球を表すクラス */class Ball { /** * 球本体の円 */ private _body:...
TypeScript TypeScriptでゲームプログラム７「クラス化でコード整理」
コードを整理する前回は、ひとまず完成したということで、全ソースコードを載せました。しかし、このコードは正直綺麗なものではないと思います。そこで、コードを整理していきましょう。ひとまずは、球やラケット、Areaなどをクラス化して、コードを整理...
TypeScript TypeScriptでゲームプログラム６「バージョン１完成：全ソースコード」
最終的なソースコードこれまで作ってきたゲームのソースコードは以下の通りです。/** * FPS（Frame per second） */const FPS = 20;/** * フレームカウンタ（ゲーム内の時刻カウンタ） * GameLoo...
TypeScript TypeScriptでゲームプログラム５「複雑な要素を追加する」
追加要素落ちてくる球をずっと打ち返すだけではやや物足りません。そこで次の要素を足してみましょう。得点難易度調整得点ゲームには「繰り返して遊ぶことによって、ゲームの操作やルールに慣れ、上達していると感じられる」ことが重要です。得点（スコア）は...
TypeScript TypeScriptでゲームプログラム４「ラケットに球を跳ね返させる」
球の移動を変更するここまでのプログラムでは球はCANVAS内で勝手に跳ね返っているだけの状態です。そこで、球はラケットに触れた時だけ上に跳ね返り、ラケットがない場所に落ちたときは跳ね返らないように変更します。（CANVAの上・左・右の壁で跳...
TypeScript TypeScriptでゲームプログラム３「STARTボタンを追加」
START処理ここまで作ってきたプログラムではブラウザで開いた瞬間に球が動き出してしまいます。しかし一般的なゲームはオープニング（タイトルの表示やデモプレイなど）やゲームモードの選択があり、START処理を行うことでゲームが始まります。この...
TypeScript TypeScriptでゲームプログラム２「操作キャラを追加」
ゲームらしさCANVAS内を球が弾んでいるだけではとてもゲームとは言えません。ゲームらしさとは何か？それは「プレイヤーが操作することで、状態が変化する。」ことです。例えば、一般的なシューティングゲームではプレイヤーキャラ（自機）を移動させる...
TypeScript TypeScriptでゲームプログラム１「基本の構造」
Webゲームのプログラム構造TypeScript(というかJavaScript）でWebゲームを作る場合の基本的なプログラムの構造は以下のようになります。CANVAS要素を用意する。ゲームの状況に応じてCANVASを描画する。ゲームの状況は...