TypeScript TypeScriptでゲームプログラム７「クラス化でコード整理」
コードを整理する前回は、ひとまず完成したということで、全ソースコードを載せました。しかし、このコードは正直綺麗なものではないと思います。そこで、コードを整理していきましょう。ひとまずは、球やラケット、Areaなどをクラス化して、コードを整理...
ゲームプログラム
TypeScript 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を描画する。ゲームの状況は...