そこで、ユーザーがカードをスクラッチして下にあるものを明らかにする必要があるスクラッチ カード ゲームを作成しようとしています。ユーザーがキャンバスの 70% をスクラッチしてすべてを表示したかどうかを確認したいと考えています。フェイザーを使用してこの機能を実装しようとしていますが、機能しません。

ピクセルの配列を取得するために画像データを計算しようとしましたが、すべて 0 の配列が返されました。以下のコードでは、calculateScratchRatio 関数を使用しています。

「./BaseScene」から BaseScene をインポートします。 const SKY_IMAGE = "空"; const SKY_IMAGE_BLACK = "スカイブラック"; const BOARD = "ボード"; const HEADER_ACT = "ヘッダー_act"; const KEY_BRUSH = "ブラシ"; const BGGAME = "BGM ゲーム"; デフォルト クラス Scratch をエクスポートして BaseScene を拡張 { コンストラクター(構成) { super("スクラッチ", { ...config }); this.config = 構成; this.isDown = false; this.renderTexture = null; this.brush = null; this.erasedPixels = 0; this.screenCenter = [config.width / 2, config.height / 2]; } 作成する（） { super.create(); this.cover = this.make.image({ キー: SKY_IMAGE_BLACK、 追加: false、 }); this.board = this.make.image({ キー: ボード、 追加: false、 }); this.ScratchOff(); this.add.image(...this.screenCenter, BOARD).setScale(0.7); console.log(this.board.getBounds()); const headerinfo = this.add .image(this.screenCenter[0] - 160, 130, "header_act") .setScale(0.7); helloWorld = this.add にしましょう .text(0, 0, "ハローワールド") .setFont("20px Arial") .setColor("#ffffff"); const コンテナ = this.add.container(headerinfo.x, headerinfo.y); コンテナ.add(helloWorld); } 掻き毟ります（） { this.add .image(this.screenCenter[0] - 160, this.screenCenter[1], SKY_IMAGE) .setScale(0.7); this.cover.setOrigin(0, 0); const width = this.cover.width; const height = this.cover.height; console.log(幅, 高さ); const rt = this.add.renderTexture( this.screenCenter[0] - 160、 this.screenCenter[1]、 幅 * 0.7、 高さ * 0.71 ); this.isRenderTextureErased = false; this.erasureThreshold = 0.99; rt.setOrigin(0.5, 0.5); rt.draw(this.cover); //、幅 * 0.5、高さ * 0.5) rt.setInteractive(); rt.on(Phaser.Input.Events.POINTER_DOWN, this.handlePointerDown, this); rt.on(Phaser.Input.Events.POINTER_MOVE, this.handlePointerMove, this); rt.on(Phaser.Input.Events.POINTER_UP, () => (this.isDown = false)); this.brush = this.make.image({ キー: KEY_BRUSH、 追加: false、 }); this.renderTexture = rt; } handlePointerDown(ポインタ) { this.isDown = true; this.handlePointerMove(ポインタ); } handlePointerMove(ポインタ) { if (!this.isDown) { 戻る; } const x = pointer.x - this.renderTexture.x this.renderTexture.width * 0.5; 定数y = pointer.y - this.renderTexture.y this.renderTexture.height * 0.5; this.renderTexture.erase(this.brush, x, y); const result = this.calculateScratchRatio(x, y); console.log("結果", 結果); }CalculateScratchRatio(x, y) { const texture = this.textures.get(SKY_IMAGE_BLACK); コンソール.ログ(テクスチャ); if (!テクスチャ) { console.error(`キー '${SKY_IMAGE_BLACK}' のテクスチャが見つかりません。`); 0を返します。 } コンソール.ログ(テクスチャ); const Canvas = document.createElement("canvas"); Canvas.width = テクスチャ.ソース[0].width; console.log("canvas.width", Canvas.width); Canvas.height = テクスチャ.ソース[0].height; const context = Canvas.getContext("2d"); context.drawImage(texture.source[0].image, 0, 0); const imageData = context.getImageData(0, 0, Canvas.width, Canvas.height); const ピクセル = imageData.data; console.log(画像データ, ピクセル); 消去済みカウント = 0 にします。 for (let i = 3; i < ピクセル.長さ; i = 4) { const alpha = ピクセル[i 3]; if (アルファ < 128) { 消去数 ; } } const totalPixels = キャンバスの幅 * キャンバスの高さ; constScratchRatio = (erasedCount / totalPixels) * 100; Math.round(scratchRatio) を返します。 } }