Jadi saya cuba mencipta permainan kad gores di mana pengguna perlu menconteng kad untuk mendedahkan apa yang ada di bawahnya. Saya ingin menyemak sama ada pengguna telah menconteng 70% daripada kanvas untuk mendedahkan semuanya. Saya cuba menggunakan phaser untuk melaksanakan fungsi ini, tetapi ia tidak berfungsi.

Saya cuba mengira data imej untuk mendapatkan tatasusunan piksel, tetapi ia mengembalikan tatasusunan semua sifar. Saya menggunakan fungsi calculateScratchRatio dalam kod di bawah.

import BaseScene daripada "./BaseScene"; const SKY_IMAGE = "langit"; const SKY_IMAGE_BLACK = "skyblack"; const BOARD = "papan"; const HEADER_ACT = "header_act"; const KEY_BRUSH = "berus"; const BGGAME = "bg-game"; eksport kelas lalai Scratch memanjangkan BaseScene { pembina(config) { super("Calar", { ...config }); this.config = konfigurasi; this.isDown = palsu; this.renderTexture = null; this.brush = null; this.erasedPixels = 0; this.screenCenter = [config.width / 2, config.height / 2]; } cipta() { super.create(); this.cover = this.make.image({ kunci: SKY_IMAGE_BLACK, tambah: palsu, }); this.board = this.make.image({ kunci: PAPAN, tambah: palsu, }); 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); biarkan helloWorld = ini.tambah .text(0, 0, "Hello World") .setFont("20px Arial") .setColor("#ffffff"); bekas const = this.add.container(headerinfo.x, headerinfo.y); container.add(helloWorld); } Menggaru() { ini.tambah .image(this.screenCenter[0] - 160, this.screenCenter[1], SKY_IMAGE) .setScale(0.7); this.cover.setOrigin(0, 0); lebar const = this.cover.width; tinggi const = this.cover.height; console.log(lebar, tinggi); const rt = this.add.renderTexture( this.screenCenter[0] - 160, this.screenCenter[1], lebar * 0.7, ketinggian * 0.71 ); this.isRenderTextureErased = palsu; this.erasureThreshold = 0.99; rt.setOrigin(0.5, 0.5); rt.draw(this.cover); //, lebar * 0.5, tinggi * 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 = palsu)); this.brush = this.make.image({ kunci: KEY_BRUSH, tambah: palsu, }); this.renderTexture = rt; } handlePointerDown(penunjuk) { this.isDown = benar; this.handlePointerMove(pointer); } handlePointerMove(penunjuk) { jika (!this.isDown) { kembali; } const x = pointer.x - this.renderTexture.x + this.renderTexture.width * 0.5; const 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("hasil", hasil); }hitungNisbah Gores(x, y) { tekstur const = this.textures.get(SKY_IMAGE_BLACK); console.log(tekstur); jika (!tekstur) { console.error(`Tekstur dengan kunci '${SKY_IMAGE_BLACK}' tidak ditemui.`); pulangan 0; } console.log(tekstur); const canvas = document.createElement("kanvas"); kanvas.lebar = tekstur.sumber[0].lebar; console.log("canvas.width", canvas.width); canvas.height = tekstur.sumber[0].tinggi; konteks const = canvas.getContext("2d"); context.drawImage(texture.source[0].image, 0, 0); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); piksel const = imageData.data; console.log(imageData, piksel); biarkan erasedCount = 0; untuk (biar i = 3; i < pixels.length; i += 4) { const alpha = piksel[i + 3]; jika (alfa < 128) { terpadamCount++; } } const totalPixels = canvas.width * canvas.height; const scratchNisbah = (terpadamCount / totalPixels) * 100; kembalikan Math.round(scratchNisbah); } }