clearRect让我的方块消失了

每个人 我刚开始学习 HTML CANVAS 上周,我现在面临一个挑战。我有几个方形盒子和一个我称之为射手的播放器,如果射手碰到任何一个方形盒子,盒子就会从屏幕上消失。

我现在面临的主要挑战是,由于我设置了 animate 具有 ctx.clearRect(0, 0, canvas.width, canvas.height) 但如果我改变了 使有生气 作用于 ctx.clearRect(0, 160, canvas.width, canvas.height); 方形框将开始显示,但我的代码将无法正常工作。

请问我该如何正确设置,以便 Square and Shooter 除非我告诉他们,否则他们不会互相干涉吗?

let canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;
ctx.fillStyle = "red";

const gravity = 1;
class Square {
  constructor({ x, y, width, height }) {
    this.position = {
      x,
      y,
    };
    this.width = width;
    this.height = height;
  }

  draw() {
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}

class Shooter {
   constructor(width, height) {
     (this.position = {
       x: 300,
       y: 520,
     }),
     (this.velocity = {
       x: 10,
       y: 10,
     }),
     (this.width = width),
     (this.height = height);
   }

   drawTwo() {
     ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
   }

  update() {
    this.drawTwo();
  }
}

const shooter = new Shooter(50, 50);

squares = [
   new Square({ x: 40, y: 50, width: 50, height: 50 }),
   new Square({ x: 300, y: 50, width: 50, height: 50 }),
   new Square({ x: 400, y: 50, width: 50, height: 50 }),
];

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  shooter.update();
}

animate();

squares.forEach((square) => {
  square.draw();

  document.addEventListener("keydown", ({ keyCode }) => {
  switch (keyCode) {
    case 87:
      shooter.position.y -= shooter.velocity.y;
      if (
        shooter.position.x < square.position.x + square.width &&
        shooter.position.x + shooter.width > square.position.x &&
        shooter.position.y < square.position.y + square.height &&
        shooter.position.y + shooter.height > square.position.y
      ) {
        console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 87"
      );

      ctx.clearRect(
        square.position.x,
        square.position.y,
        square.width,
        square.height
      );
     }

    break;
  case 68:
    shooter.position.x += shooter.velocity.x;
    if (
      shooter.position.x < square.position.x + square.width &&
      shooter.position.x + shooter.width > square.position.x &&
      shooter.position.y < square.position.y + square.height &&
      shooter.position.y + shooter.height > square.position.y
    ) {
      console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 65"
      );
      ctx.clearRect(
        square.position.x,
        square.position.y,
        canvas.width,
        canvas.height
      );
    }

    break;
  case 83:
    shooter.position.y += shooter.velocity.y;
    if (
      shooter.position.x < square.position.x + square.width &&
      shooter.position.x + shooter.width > square.position.x &&
      shooter.position.y < square.position.y + square.height &&
      shooter.position.y + shooter.height > square.position.y
    ) {
      console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 83"
      );
      ctx.clearRect(
        square.position.x,
        square.position.y,
        canvas.width,
        canvas.height
      );
    }

    break;
  case 65:
    shooter.position.x -= shooter.velocity.x;
    if (
      shooter.position.x < square.position.x + square.width &&
      shooter.position.x + shooter.width > square.position.x &&
      shooter.position.y < square.position.y + square.height &&
      shooter.position.y + shooter.height > square.position.y
    ) {
      console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 65"
      );
      ctx.clearRect(
        square.position.x,
        square.position.y,
        canvas.width,
        canvas.height
      );
    }

    break;
   }
  });
});

链接到小提琴 https://jsfiddle.net/kingsley_chukwuma/jfs06g7e/6/