TypeScript関連の話題
TypeScript シンプルなAIアプリ３
シンプルなAIアプリ２の続きです。esbuild実行環境を整備する前回はesbuildをコマンドラインから起動していましたが、それには、esbuildをnpm installしなくてはなりません。Denoを使っているなら、build用スクリ...
TypeScript シンプルなAIアプリ２
シンプルなAIアプリの続きです。今回は、データの送受信処理を作成します。ブラウザとサーバー間の送受信ブラウザとサーバー間の送受信処理を作成していきます。送信、受信ともに、データはJSON形式でやり取りすることにします。ブラウザ → サーバー...
TypeScript シンプルなAIアプリ
Gemini APIを使ったシンプルなAIアプリを作っていきます。仕様を考える今回のアプリは、プロンプト： ブラウザ → Denoサーバー → Gemini API生成結果： Gemini API → Denoサーバー → ブラウザという感...
TypeScript Denoを試す３
これは「Denoを試す2」の続きです。Denoに挑戦したそもそもの目的は「Gemini AIを使う」ことでした。Denoを試すという話題の最後に、それに挑戦しましょう。Gemini API (Node.js版)Gemini APIは、様々な...
TypeScript Denoを試す２
「Denoを試す」の続きです。PreactでSSRサーバーサイドを動かすためにDenoを使ってみる気になったので、この機にSSR（サーバーサイドレンダリング）を試してみたいと思いました。普通ならここでReactの出番なのですが、私はPrea...
TypeScript Denoを試す
Denoを使ってみたくなったので、その時の体験記的な話を少し書いてみます。Denoの導入動機最近の私は、AIの自動生成に興味を持っています。GoogleのGeminiやMicroSoftのCopilotなどで気軽に、かつ、無料でテキスト生成...
TypeScript ブロックくずしを作る１０「ブロックを壊す」
ブロックと球の衝突判定ができるようになったので、球が当たったブロックを壊す処理を追加しましょう。ブロックを壊すための設計ブロックを壊すために、今回は次のような設計にします。ブロックに耐久力のパラメータを追加する。ブロックに弾が当たると耐久力...
TypeScript ブロックくずしを作る９「ブロックと球の衝突処理２」
ブロックに球との衝突判定を追加する衝突判定のアルゴリズムができたので、実際にコーディングしていきましょう。まずはブロック（Brickクラス）に追加するコードです。export class Brick implements IGameCanv...
TypeScript ブロックくずしを作る８「ブロックと球の衝突処理」
衝突時の動作仕様ブロックを配置できるようになったので、弾がブロックに当たった（衝突した）ときの処理を作っていきましょう。最初に、ブロックと弾が衝突したときの球やブロックがどのように変化するのか、動作仕様を決めます。ラケットと異なり、ブロック...
TypeScript 図形クラス３「距離」
２つの図形の距離図形クラス、図形クラス２でいくつかの図形クラスを作ってきたので、２つの図形の距離の出し方やそのプログラムについて考えましょう。２つ点の距離 (X2,Y2) (X1,Y1) distance 点\((X_1,Y_1)\)と点\...
TypeScript 図形クラス２「直線」
のつづきです。今回は直線関係を整備していきます。直線クラスはじめに直線クラスを整備する目的について説明します。目的の１つ目は、CANVASに直線を描画するためです。これはそれ以上の説明は不要でしょう。目的の２つ目は、もっと複雑な図形を扱うた...
TypeScript ブロックくずしを作る７「ブロックを配置する」
前回、ブロックの配置仕様や座標計算などを行ったので、それに基づいたコーディングをしていきましょう。ブロック座標へのアクセス機能を追加するブロックくずしをつくる５の最後に、「ブロックの座標をbrick.Rect.Xとbrick.Rect.Yで...
TypeScript ブロックくずしを作る６「ブロック配置の仕様」
ブロック配置の仕様を決める前回まででブロックを表示できるようなり、とりあえず横５個×縦３個を配置しました。今回はブロックをゲームエリア内のどこにどれだけ配置するのかを決めましょう。 上の図は、ゲームエリアとブロックの配置の例を示したものにな...
TypeScript ブロックくずしを作る５「ブロック」
ブロックを追加するブロックくずしの重要なゲーム部品である「ブロック」を追加しましょう。ブロックはキャンバスに描画し、球と衝突し、破壊されます。そのため、IGameCanvasPartを継承したクラスとして定義するべきでしょう。import ...
TypeScript 図形クラス
図形クラスを整備したいゲームを作る時、キャンバスに描画すする図形を扱ったり、複数の図形が接触しているか否かを判定したりなどの処理が必要になるはずです。しかし、TypeScriptには図形を取り扱うクラスやインターフェースがありません。そうい...