パープルの雑記

ボタン１のクリック処理ボタン１を押すことでゲームを開始したり、中断したりしている部分のコードは、これまでのコード整理の対象にはなっていません。初期のコードのまま下のようになっています。document.addEventListener("D...

キャンバス管理クラスの追加UpdateGameSItuation()とDrawGameCanvas()をGameLoop内で実行させるためにとりあえず無名クラスを使いましたが、ここを正式なクラス化していきましょう。UpdateGameSIt...

ゲームループの管理クラス「多くのゲームでは、一定時間ごとにゲームの状況が更新され、それをCANVASに再描画することを繰り返している。」という話はプログラムを作り始める一番最初に書きました。そしてこれまで、window.requestAni...

メッセージ管理クラスの追加<div id="message">（以後これをメッセージボックスと呼ぶことにする）には、現在の得点やゲームオーバーのメッセージなど表示しています。しかし、メッセージボックスの変更は複数の場所で行っています。現在は...

球をクラス化するラケットをクラス化したときにRectクラスを使ったように、球をクラス化するにはCircleクラスを使います。/** * 球を表すクラス */class Ball { /** * 球本体の円 */ private _body:...

コードを整理する前回は、ひとまず完成したということで、全ソースコードを載せました。しかし、このコードは正直綺麗なものではないと思います。そこで、コードを整理していきましょう。ひとまずは、球やラケット、Areaなどをクラス化して、コードを整理...

最終的なソースコードこれまで作ってきたゲームのソースコードは以下の通りです。/** * FPS（Frame per second） */const FPS = 20;/** * フレームカウンタ（ゲーム内の時刻カウンタ） * GameLoo...

追加要素落ちてくる球をずっと打ち返すだけではやや物足りません。そこで次の要素を足してみましょう。得点難易度調整得点ゲームには「繰り返して遊ぶことによって、ゲームの操作やルールに慣れ、上達していると感じられる」ことが重要です。得点（スコア）は...

球の移動を変更するここまでのプログラムでは球はCANVAS内で勝手に跳ね返っているだけの状態です。そこで、球はラケットに触れた時だけ上に跳ね返り、ラケットがない場所に落ちたときは跳ね返らないように変更します。（CANVAの上・左・右の壁で跳...

START処理ここまで作ってきたプログラムではブラウザで開いた瞬間に球が動き出してしまいます。しかし一般的なゲームはオープニング（タイトルの表示やデモプレイなど）やゲームモードの選択があり、START処理を行うことでゲームが始まります。この...

ゲームらしさCANVAS内を球が弾んでいるだけではとてもゲームとは言えません。ゲームらしさとは何か？それは「プレイヤーが操作することで、状態が変化する。」ことです。例えば、一般的なシューティングゲームではプレイヤーキャラ（自機）を移動させる...

Webゲームのプログラム構造TypeScript(というかJavaScript）でWebゲームを作る場合の基本的なプログラムの構造は以下のようになります。CANVAS要素を用意する。ゲームの状況に応じてCANVASを描画する。ゲームの状況は...