javascript

javascriptでハッシュ(“SHA-256”)の値を取得

やりたいことjavaScriptでハッシュ("SHA-256")の値を取得します。実装以下の関数でハッシュを取得できます。async function digestMessage(message) { const msgUint8 = new TextEncoder().encode(message); // (utf-8 の) Uint8Array にエンコード const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8); // メッセージのハッシュ値を取得 const hashArray = Array.from(n...

2024.09.29

JavaScript

JavaScriptで合成音声で読み上げを行う

やりたいことjavaScriptで合成音声で読み上げがきるようなので試してみます。実装以下のmozillaのページに例のコードがあるのですが、HTML部分がなかったのと気になる箇所があったので動作するように修正しました。修正したコードは以下の通りです。コメントも追加しています。<html><body> <form> <input type="text" name="text" class="txt" value="読み上げます" required><br><br> <select name="example"></select><br><br> <input type="range" id="...

2024.09.25

JavaScript

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

別のSceneの値を取得/更新する(Phaser3)

やりたいことPhaser3で異なるSceneの値の読み書きを行いたい。ここでは下のページで作成した二つのシーンを並べて表示するコードを例に行います。コードは以下の通りclass secondScene extends Phaser.Scene { create (data) { this.cameras.main.setSize(200,600); this.cameras.main.setPosition(data.x,data.y) this.add.rectangle(0, 0, 200, 600, 0x00ff00, 0.5).setOrigin(0); }}class mainSce...

2024.08.30

Phaser3

複数のSceneを並べて表示(Phaser3)

やりたいことPhaser3で複数のシーンを並べて表示します。以下の用にmainSceneとSecondSceneを並べて表示するようします。800ｘ600のmainSceneの表示領域を左側600ｘ600に限定し、右側に200x600のSecondSceneを表示します。実装準備mainSceneの作成MainSceneは以下の用に実装しました。サイズは800x600です。全体を半透明の赤の長方形で埋めています。(わかりやすくするために背景は灰色にしています) class mainScene extends Phaser.Scene { create () { this.add.rectang...

2024.08.29

Phaser3

Electronのメニューを消す

やりたいこと下の記事にてElectronを使ってWebページをWindowsの実行ファイルにビルドしてみました。しかし、下の用にメニューが表示されます(File, Edit…の部分)。基本的に不要(リリースするときはない方がいいDeveloperToolの表示もあります)ですので消したいと思います。実装先述のページのmain.js(Electronのエントリーポイント)は以下の通りです。const { app, BrowserWindow } = require('electron/main')const createWindow = () => { const win = new Brows...

2024.08.25

electron

Electronを使ってWebページからWindowsの実行ファイルを作る

やりたいこと下のElectronを使ってWindows向けのアプリケーションを作成します。electronとはelectronはJavaScript/HTML/CSSで作成したWebページから実行ファイルを作成します。Windows/MAC/Linux向けの実行ファイルが作成できますが、ここではWindows向けの実行ファイルを作成します。詳細は以下の公式ページ。プロジェクトの作成事前準備Node.jsが必要です。以下のリンクから環境にあったNode.jsをインストールします。プロジェクトの作成任意の作業フォルダを作成して以下のコマンドを実行します。npm init -yElectronでの実...

2024.08.24

electron

matterの物理エンジンで基本形状を使う(Phaser3)

やりたいこと下の記事では画像に複雑な形状の当たり判定を設定しましたが、ここでは画像を使用せずに基本形状(円、矩形、多角形)をmatterを使ってみます。実装円以下の実装で(300，30)に半径10で黒(0x000000)の円を描きます。2行目で同じ半径の当たり判定を作成した円に設定しています。 const circle = this.add.circle(300, 30, 10 ,0x000000); this.matter.add.gameObject(circle, { shape: { type: 'circle', radius: 10 } });矩形以下の実装で(100，200)に幅...

2024.08.18

Phaser3

matterの物理エンジンで複雑な形状を使ってみる(Phaser3)

やりたいことPhaser3で複雑な形状で物理エンジンを使用するためにmatterを使ってみます。データの用意画像の用意画像をPNGで用意します。今回は例として上の画像を作成しました。わかりにくいですが白い領域は透明です。名前をc.pngとしました。サイズは100x100です。実装画像のロードsceneのpreloadで上記の画像を読み込みます。 preload () { this.load.image('c', 'assets/c.png'); }画像の追加sceneのcreateで上記の画像を追加します。 create () { const poly = this.add.image(300...

2024.08.17

Phaser3