TypeScript ブロックくずしを作る７「ブロックを配置する」
前回、ブロックの配置仕様や座標計算などを行ったので、それに基づいたコーディングをしていきましょう。ブロック座標へのアクセス機能を追加するブロックくずしをつくる５の最後に、「ブロックの座標をbrick.Rect.Xとbrick.Rect.Yで...
パープル
TypeScript TypeScript ブロックくずしを作る６「ブロック配置の仕様」
ブロック配置の仕様を決める前回まででブロックを表示できるようなり、とりあえず横５個×縦３個を配置しました。今回はブロックをゲームエリア内のどこにどれだけ配置するのかを決めましょう。 上の図は、ゲームエリアとブロックの配置の例を示したものにな...
TypeScript ブロックくずしを作る５「ブロック」
ブロックを追加するブロックくずしの重要なゲーム部品である「ブロック」を追加しましょう。ブロックはキャンバスに描画し、球と衝突し、破壊されます。そのため、IGameCanvasPartを継承したクラスとして定義するべきでしょう。import ...
TypeScript 図形クラス
図形クラスを整備したいゲームを作る時、キャンバスに描画すする図形を扱ったり、複数の図形が接触しているか否かを判定したりなどの処理が必要になるはずです。しかし、TypeScriptには図形を取り扱うクラスやインターフェースがありません。そうい...
TypeScript ブロックくずしを作る４「ラケットと球」
ラケットを追加するゲームエリアができたので、ラケットを追加しましょう。ラケットは、「TypeScriptでゲームプログラム」のRacketクラスを流用します。import { IGameCanvasPart } from './game/G...
TypeScript ブロックくずしを作る３「ゲームエリア」
ゲームエリアキャンバス管理クラスができたので、まずはプレイヤーキャラであるラケットを追加…したいところなのですが、その前にラケットや球が移動可能な範囲（ゲームエリア）を設定しましょう。「TypeScriptでゲームプログラム」では、ゲームエ...
TypeScript ブロックくずしを作る２「キャンバスの管理クラス」
CANVASの管理クラスを追加まずはCANVASを管理するためのクラスを追加しましょう。関連するTypeScriptのコードは「TypeScriptでゲームプログラム」から少し変更を加えいます。ElementControlクラス/** * ...
TypeScript ブロックくずしを作る１「最初のひな型を作る」
はじめにMDNにJavaScriptを使ったWEBゲーム制作のチュートリアルとして、以下のページがあります。そのページでは簡単なブロックくずしゲームを作る形でWEBゲームの作り方が紹介されています。これを参考に同様のゲームをTypeScri...
TypeScript エラー（Uncaught ReferenceError: Cannot access 'class'）
クラス継承で実行時エラークラス継承で、Uncaught ReferenceError: Cannot access 'class' が発生してはまったので、記録として残しておこう。背景では、RectやCircleなどの図形クラスを作った。今...
TypeScript TypeScriptでゲームプログラム１５「バージョン２完成：全ソースコード」
ひとまず完成まだまだ整理したいところがあるけれど、終わりが見えてきません。前回までのコード整理でひとまずの完成とします。実際の実行例を以下に示します。 全コードここまで作ってきた全コードを以下に示します。/** * 四角形を表すクラス */...
TypeScript TypeScriptでゲームプログラム１４「コードからGame.XXXを消す」
予想できなかった問題発生これまでのコード整理で、グローバル変数や関数はすべて消え、以下のようにGameMngのインスタンスを生成し、初期化、開始するだけになりました。const Game = new GameMng();// ゲーム状態の初...
TypeScript TypeScriptでゲームプログラム１３「グローバル変数を減らす」
グローバル変数の見直しBall1、Rakect1、GameStatusなど、これまで多くのグローバル変数を使ってきました。グローバル変数がバラバラとあるプログラムは管理しにくくなるので、管理しやすくするために、いくつかのグループにまとめ、減...
WordPress WordPressのバックアップ自動化
自動バックアップがおかしいWordPressの投稿データを定期的にバックアップするようにしています。BackWPupプラグインを使っています。頻度は１週間に１回。あまり回数が多くてもバックアップデータが多くなるので、この回数としました。自動...
TypeScript TypeScriptでゲームプログラム１２「イベントハンドラをクラスに移動する」
ボタン１のクリック処理ボタン１を押すことでゲームを開始したり、中断したりしている部分のコードは、これまでのコード整理の対象にはなっていません。初期のコードのまま下のようになっています。document.addEventListener("D...
TypeScript CANVASの座標とマウス座標
マウスはどこにいるのか？下記の投稿では、mousemoveイベントを使ってマウスの座標を取得していた。しかし、この投稿で使っていたコードは、マウスの座標を正確には得ることができない。座標のいろいろmousemove(およびほかのマウス関連の...