TypeScript CANVASの座標とマウス座標
マウスはどこにいるのか？下記の投稿では、mousemoveイベントを使ってマウスの座標を取得していた。しかし、この投稿で使っていたコードは、マウスの座標を正確には得ることができない。座標のいろいろmousemove(およびほかのマウス関連の...
パープル
TypeScript 
TypeScript TypeScriptでゲームプログラム１１「キャンバス関連処理もクラス化する」
キャンバス管理クラスの追加UpdateGameSItuation()とDrawGameCanvas()をGameLoop内で実行させるためにとりあえず無名クラスを使いましたが、ここを正式なクラス化していきましょう。UpdateGameSIt...
TypeScript TypeScriptでゲームプログラム１０「ゲームループ処理をクラス化する」
ゲームループの管理クラス「多くのゲームでは、一定時間ごとにゲームの状況が更新され、それをCANVASに再描画することを繰り返している。」という話はプログラムを作り始める一番最初に書きました。そしてこれまで、window.requestAni...
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を描画する。ゲームの状況は...
HTML HTMLの折りたたみ機能2
HTMLの折りたたみ機能の、CSS別バージョン。 details { border: 2px solid black; border-radius: 8px; padding: 0 .5em; width: 300px; height: f...
HTML HTMLの折りたたみ機能
HTMLの折りたたみ機能について、自分で忘れないためのメモです。マウスでクリックすることで、開いたり、閉じたりするようなことがしたい場合があります。下のような感じ。 summary { padding: .5em 1em; backgrou...
WordPress Highlighting Code Blockプラグインをインストールしてみた
ソースコードを表示するの方法を検索してみると、「Highlighting Code Block」プラグインを勧めるページが多かった。インストールしたので、早速使ってみよう。まずは、Cで”Hello, World”。#include <std...