鸟撞到柱子后很快掉下来

Question

使用此代码，我希望鸟在与柱子碰撞时以最小速度掉落，但鸟在眨眼之间掉落 - 它太快了。有什么办法可以解决这个问题吗？

console.log("welcome to flappygame.js 2023");
let canvas = document.getElementById("board");
let boardwidth = 700;
let boardheight = 640;
let speed = 0.6;
let score = 0;
let velocityX = -4;
let gravity = 0.4;
gameover = false;
let startgame = false;
let txt = 'press arrowup key or spacebar to start..'

canvas.width = boardwidth;
canvas.height = boardheight;
let context = canvas.getContext("2d");
let lastpainted = 0;
let pipearry = [];
let keypressed = false;
let hit = false;
let pipe;

let bird = {
  X: boardwidth / 8,
  Y: boardheight / 2,
  width: 48,
  height: 40,
};

//load images
img_bird = new Image();
img_bird.src = "./flappybird.png";
img_bird.onload = function() {
  context.drawImage(img_bird, bird.X, bird.Y, 50, 40);
};

img_top = new Image();
img_top.src = "./toppipe.png";

img_btm = new Image();
img_btm.src = "./bottompipe.png";
let velocityY = 0;
//clear the canvas per interval to draw
function refresh() {
  window.requestAnimationFrame(refresh);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(img_bird, bird.X, bird.Y, 50, 40);

  //logic for bird on colliding with pillar
  if (gameover == true) {
    while (bird.Y < canvas.height / 1.2) {
      console.log(bird.Y)
      bird.Y += gravity;
    }

    pipearry.forEach((e) => {
      context.drawImage(e.img, e.X, e.Y, e.width, e.height);
    })
    context.fillText(score, 5, 45);
    return;
  }
  for (let i = 0; i < pipearry.length; i++) {
    pipe = pipearry[i];
    context.drawImage(pipe.img, pipe.X, pipe.Y, pipe.width, pipe.height);
    pipe.X += velocityX;

    if (pipe.passed == false && bird.X > pipe.X + pipe.width) {
      score += 1;
      pipe.passed = true;
    }

    if (detectcollision(bird, pipe)) {
      gameover = true;
    };
  }
  if (bird.Y > boardheight / 1.23) gameover = true;

  velocityY += gravity;
  if (keypressed == true) {
    bird.Y += velocityY;
  } else {
    bird.Y += velocityY;
  }

  context.fillstyle = "white";
  context.font = "45px sans-serif";
  context.fillText(score, 5, 45);
}

function animate(ctx) {
  window.requestAnimationFrame(animate);
  let painted = (ctx - lastpainted) / 1000;
  if (painted < 1 / speed) return;
  lastpainted = ctx;
  create_pipe();
}

//The initial torque to start the game
let data = setInterval(start_game, 500);

function start_game() {
  if (startgame == true) {
    window.requestAnimationFrame(refresh);
    window.requestAnimationFrame(animate);
    clearInterval(data);
  } else {
    context.fillstyle = "black";
    context.font = "20px sans-serif";
    context.fillText(txt, boardwidth / 9, boardheight / 2.5);
  }
}

function create_pipe() {
  let randomY = 0 - 512 / 2 - (Math.random() * 512) / 4;
  let gap = 110;
  let tpipe = {
    img: img_top,
    X: 700,
    Y: randomY,
    width: 64,
    height: 512,
    passed: false,
  };

  let bpipe = {
    img: img_btm,
    X: 700,
    Y: randomY + 512 + gap,
    width: 64,
    height: 512,
  };
  pipearry.push(tpipe, bpipe);
}

window.addEventListener("keydown", (e) => {
  if (e.code == "Space" || e.code == "ArrowUp") velocityY = -6;
  keypressed = true;
  startgame = true;
});

window.addEventListener("keyup", keyup)

function keyup() {
  keypressed = false;
};

window.addEventListener("touchstart", () => {
  keypressed = true;
});

window.addEventListener("touchend", () => {
  keypressed = false;
});

function detectcollision(b, p) {
  return b.X < p.X + p.width &&
    b.X + b.width > p.X &&
    b.Y < p.Y + p.height &&
    b.Y + b.height > p.Y;
}