2017/10/17

Canvasに表示したオブジェクトに当たり判定(衝突判定)をつける方法

HTML5 Canvas APIをつかってゲームをつくろうとしている。もちろん自作ゲームエンジンで!
ということで前回Canvas上に表示したオブジェクトをキーボード操作で移動させる方法をまとめた。

今回はその続きで、移動させたオブジェクトが他の何らかのオブジェクトに当たったときの判定(当たり判定、衝突判定)を実装する。


2017/10/12

[Vue.js]imgタグのsrcをバインドして404NotFoundになったときの対処法

Atomic Designの原則を取り入れ開発しており、イメージ用コンポーネントを作っていた。そして親コンポーネントから子コンポーネントに画像ファイルのパスを渡し、動的に画像を表示させたかったのだが、imgタグのsrcに画像ファイルのパスをバインドすると「404 (NotFound)」というエラーになってしまった。

Vue.jsのGitHub上にあるIssueの内容も古く(Vue1.x系)対応できなかったが、いろいろ試したら解消できた。

そこで、対処法をまとめる。

2017/10/05

Canvasに表示したオブジェクトをキーボード操作で移動させる方法

Canvas+JavaScriptでゲームをつくろうとしている。もちろん自作ゲームエンジンで!
その第一歩として、Canvasに表示したオブジェクト(Player)をキーボード操作で移動させる方法をまとめる。



ゲームエンジンの基本は無限ループ


ゲームの基本は無限ループなので、以下のような流れで処理していく。
  1. Canvasをクリアする(白紙に戻す)
  2. キーボード操作などを受け付る
  3. オブジェクトの座標や画像を変更する
  4. Canvasに描画する
  5. 1に戻ってループする

このループをfps30なら1秒間に30回、fps60なら1秒間に60回繰り返す。
ループ内でキーボード操作(keydownkeypresskeyupなど)を取得し、オブジェクトの座標を変更することで、移動させることができる。