HTML画布以恒定的速度在一个方向上移动一个对象

HTML Canvas moving an object in a direction at a constant speed?

本文关键字：一个 方向 一个对象 移动 速度 HTML      更新时间：2023-09-26

我正在构建pong来学习画布绘制API的一些基础知识。然而，我在一个更基本的让球移动的元素上挣扎。现在，我随机生成一组坐标让它移动，但我不知道如何让它以我选择的恒定速度实际移动到那里。

球以基本速度开始，随着时间的推移变得更快。

那么像这样的东西是如何工作的呢?如何计算球在X轴和Y轴上移动的距离?

我使用canvas创建了一个版本的pong，然后在这里查看它的源代码。

为了制作球的动画，我使用了一个变量来表示x和y的速度，一些变量用于表示球的x和y坐标，还有一个动画函数使用setInterval()

进行循环

这是它的一个小样本(减去所有的绘图代码)

velX = 5;
velY = 2;
ballPosX = 100;
ballPosY = 50;
radius = 10;
// loop through 20fps
setInterval(animate,50);
function animate() {
    // draw ball at ballPosX, ballPosY coordinates
    ctx.arc(ballPosX,ballPosY, radius,0,Math.PI * 180, false)
    // fill in colours etc
    // move ball
    ballPosX += velX;
    ballPosY += velY;
    // do boundary detection for bounce
    if (ballPosX + radius > ctx.width || ballPosX - radius < 0) {
        // change velX to negative to bounce the ball the oposite X direction
        velX *= -1;
    }
    // do the same for velY
}

这应该能让你了解它是如何工作的。显然我不能在这里输入整个代码。但如果你去那个链接，你可以看到来源。大部分都被注释了:)

史蒂夫

你将有一个地方存储它的速度，并增加它，直到其他力作用于它来改变它的速度/方向(使球反弹的简单方法只是抵消球的运动方向)。

要将元素移动到某物，计算元素与目标之间的距离为x和y增量。要移动它，按您选择的速率减小这些值。

你应该使用一个单独的setTimeout()来绘制所有这些元素。

相关文章：