event

マウスで動作するJavaScriptのコードがペンタブレットで動作しない

やりたいことマウスで動作するJavaScriptのコードがペンタブレットで動作しませんでした。この記事では著者の修正した箇所をまとめておきます。修正したアプリはCanvasに絵を描くアプリです。アプリをペンタブレットに対応するにあたって修正した箇所のみの紹介です。（ペンタブレット/マウス両方で動作するように修正します。）スマホ/タブレット対応に関してスマホ/タブレット対応は基本的にペンタブレットの対応と同様のはずですが、動作確認を行っていません。問題点と修正マウス関係のイベントが来ないペンタブレットで操作した場合にmousedown、mousemove、mouseupのイベントが来ませんでした...

2025.06.05

JavaScript

[TypeScript]カスタムイベントを使用する

やりたいことTypeScriptでカスタムイベントを発火して、イベントをトリガにして処理を行います。実装イベントの送信以下のコードでイベントを送信させます。const event = new CustomEvent("event_name", { detail: { val1: "value 1", val2: "value 2" } });dispatchEvent(event);"event_name"は任意の好きな名前に変更します。detail objectの中身は自由に変更可能です。イベントの受信イベントの受信は以下の通りです。addEventListener("event_name"...

2025.03.11

TypeScriptUncategorized

イベントトリガで一回だけ実行する(JavaScript)

やりたいことJavaScriptでイベントをトリガにして処理を行う場合、addEventListenerを使用しますが、１度だけしか実行したくないときがあります。（準備が終わったイベントで初期化とか） removeEventListenerを使用すればいいのですが、全く同じlistenerを設定しなければならず厄介です。（メンテでしくったり）この記事ではremoveEventListenerを使用せずに１回のみ処理を行う方法を紹介します。実装通常addEventListenerは以下のように記述すると思います。element.addEventListener(event, callback);...

2025.03.11

JavaScript

上下スペースキーの押下時にページスクロールしないようにする(Phaser3)

やりたいことPhaser3でゲームを作成した際に、上下スペースキーをキーを押下したときにページが意図せずにスクロールしてしまうことがあります。（ローカル環境でフィットするようにスケールするように設定していると気が付きにくいのですが、サーバ上にアップロードした際に広告などの影響で顕在化することがあります。）ここでは意図したスクロールを止めます。実装以下のコードを上下スペースキーを押下する必要のあるシーンに追加します。create()で呼べば問題ありません。this.input.keyboard.on('keydown-DOWN', event => { event.preventDefault(...

2024.11.09

Phaser3

GameObjectに対するマウスイベント一覧(Phaser3)

やりたいことPhaser3でGameObjectに対するマウスイベントをまとめます。イベントの受け方まずゲームオブジェクトにマウス操作を許可しますGameObject.setInteractive();ドラッグを行う場合は以下のオプションが必要です。GameObject.setInteractive({ draggable: true });イベント時に処理は以下の用に紐づけます。GameObject.on(イベント名, function)); 例： const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000); rect.setI...

2024.08.31

Phaser3

ドラッグでオブジェクトを移動する(Phaser3)

やりたいことPhaser3でオブジェクトをドラッグで移動します。実装準備シーンにドラッグで動かすオブジェクトを追加します。ここではRectangle(長方形)を追加しました。 create () { const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000); }以下のように表示されます。(シーン全体は800ｘ600なのでシーンの中心に表示されています。)ドラッグの実装まずはrect.setInteractive({ draggable: true })を呼び、作成したRectにドラッグ操作を許可します。 create () { ...

2024.08.30

Phaser3