如何为不占用 object 的全宽的图像更改 Javascript 命中框

Question

我对 HTML canvas 很陌生，我正在尝试制作一个蓬松的鸟克隆。 我在屏幕上有鸟和管道，但图像没有占据我为屏幕上的对象分配的区域的整个宽度，因为有不可见的像素。 这是因为我必须删除背景并使其透明。 有谁知道如何使管道的碰撞箱占用与管道图像相同的空间，即使有不可见的像素？ 谢谢你。

 const canvas = document.getElementById("canvas"); const c = canvas.getContext("2d"); const backgroundImage = document.getElementById("image") const flappyBirdImage = document.getElementById("flappy-bird-image"); const topPipeImage = document.getElementById("top-pipe-image"); const bottomPipeImage = document.getElementById("bottom-pipe-image") let controlsKeyDown = {up: false, right: false, down: false, left: false}; let dx = 2; let dy = 2; canvas.width = innerWidth; canvas.height = innerHeight; class Bird { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; } draw() { c.beginPath(); c.fillStyle = 'blue'; c.strokeStyle = 'lightBlue'; c.drawImage(flappyBirdImage, this.x, this.y, this.width, this.height) c.fill() c.stroke(); c.closePath(); } } class Pipe { constructor(x, y, height, width, color, image) { this.x = x; this.y = y; this.height = height; this.width = width; this.color = color; this.image = image; } draw() { c.beginPath(); c.drawImage(bottomPipeImage, this.x, this.y, this.width, this.height) c.fill(); } drawtop() { c.beginPath(); c.drawImage(topPipeImage, this.x, this.y, this.width, this.height); c.closePath() } } const topPipe = new Pipe(400, 200, 100, 200, 'black') const bottomPipe = new Pipe(500, 200, 100, 200, 'black') const myBird = new Bird(200, 200, 40, 40) function birdControlsKeyDown(Event) { if(Event.key === 'ArrowUp') { controlsKeyDown.up = true; } if(Event.key === 'ArrowRight') { controlsKeyDown.right = true; } if(Event.key === 'ArrowLeft') { controlsKeyDown.left = true; } if(Event.key === "ArrowDown") { controlsKeyDown.down = true; } } function birdControlsKeyUp(Event) { if(Event.key === 'ArrowUp') { controlsKeyDown.up = false; } if(Event.key === 'ArrowRight') { controlsKeyDown.right = false; } if(Event.key === 'ArrowLeft') { controlsKeyDown.left = false; } if(Event.key === 'ArrowDown') { controlsKeyDown.down = false; } } //Bird With Edge Collision Detection function birdCollisionDetection() { // Bird Hits Bottom Of Screen if(myBird.y + myBird.height >= canvas.height){ myBird.y -= dy; } // Bird Hits Top Of Screen if(myBird.y <= 0) { myBird.y += dy; } // Bird Hits Left Of Screen if(myBird.x<= 0) { myBird.x += dx; } // Bird Hits Right Of Screen if(myBird.x + myBird.height >= canvas.width) { myBird.x -= dx; } // Bird With Pipe Collision Detection } function birdWithPipeCollisionDetection(a,b) { if(ax + a.width >= bx && ax <= bx + b.width && ay <= by + b.height && ay + a.height >= by){ console.log('test'); ax -= dx; } } function draw() { c.drawImage(backgroundImage, 0,0,canvas.width,canvas.height) myBird.draw() topPipe.drawtop() bottomPipe.draw() // Bird Controls addEventListener('keydown', birdControlsKeyDown) addEventListener('keyup', birdControlsKeyUp) if(controlsKeyDown.up) { myBird.y -= dy; } if(controlsKeyDown.right) { myBird.x += dx; } if(controlsKeyDown.left) { myBird.x -= dx; } if(controlsKeyDown.down) { myBird.y += dy; } birdCollisionDetection(); birdWithPipeCollisionDetection(myBird, topPipe); birdWithPipeCollisionDetection(myBird, bottomPipe); requestAnimationFrame(draw) } console.log(myBird) draw()

 html { margin: 0; padding: 0; } body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } canvas { overflow: hidden; } image { background: transparent; }

 <.DOCTYPE html> <html lang="en"> <head> <link rel="icon" type="image/png" href="./Flappy Bird Pictures and Animations/Flappy Bird Icon.png" type="icon"> <script src="Flappy Bird.js" defer></script> <link rel="stylesheet" href="Flappy Bird,css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Flappy Bird</title> </head> <body> <canvas id="canvas"></canvas> <img src="./Flappy Bird Pictures and Animations/background image.png" id="image"> <img src="./Flappy Bird Pictures and Animations/The Flappy Bird.png" id="flappy-bird-image"> <img src="./Flappy Bird Pictures and Animations/Bottom Pipe.png" id="bottom-pipe-image"> <img src="./Flappy Bird Pictures and Animations/Top Pipe.png" id="top-pipe-image"> </body> </html>