HTML画布和javascript脚本动画

我能够编写动画，我理解键盘输入，但我很难把所有的东西都放在一起。我基本上是在编写一个connect 4游戏，但我已经简化了我遇到的问题

当我按下空格键时，它将调用movePiece函数

function keyboardMove(e){
    switch(e.keyCode) {
    case 32:
        movePiece(0, 0, 1000);
        break;
    }

movePiece（）将从画布顶部向底部移动一个圆。我希望这种情况发生得很慢，所以我每25毫秒更新Y位置0.1次

function movingPiece(x, startY, endY){

var y = startY;

    while(y<endY)
    {
        setInterval(function(){
            b_ctx.globalCompositeOperation="destination-over";
            b_ctx.fillStyle = "yellow";
            b_ctx.beginPath();
            b_ctx.arc(x, startY, 45, 0, Math.PI*2, true);
            b_ctx.fill();
        }, 25);

        y+=0.1;
    }
}

功能移动件（x、startY、endY）{
var y=星形；
虽然（y键盘按下在这里是不相关的-它只是调用函数。
此代码有几个问题：

函数名输入错误
如果圆要移动，你必须通过y，而不是startY，因为只有y被改变
这里有嵌套的循环，因为setInterval本身就是循环。可以使用clearInterval（）停止它，所以不需要“while”
“目的地结束”可能不是这里的最佳选择

var c=document.querySelector（“#c”）
var b_ctx=c.getContext（'2d'）；
功能活动件（x、起始、结束）{
var y=星形；
var inter=setInterval（函数（）{
b_ctx.globalCompositeOperation=“复制”；
b_ctx.fillStyle=“黄色”；
b_ctx.beginPath（）；
b_ctx.弧（x，y，45，0，数学π*2，真）；
b_ctx.fill（）；
y+=0.1；
如果（y>endY）清除间隔（内部）
}, 25);
}
活动件（0，0，1000）；
在您的代码中，while循环快速连续地设置所有这些新间隔。25毫秒后，所有这些间隔第一次运行。25毫秒后第二次运行。依此类推。您可能正在寻找具有累积延迟的setTimeout。更干净的解决方案：使用requestAnimationFrame并根据时间更新位置在帧之间，请求新帧，直到动画完成。