Question

我正在构建pong来学习canvas的绘图API的一些基础知识。然而，我正在努力解决让球移动的一个更基本的因素。现在，我正在随机生成一组坐标，但是我不知道如何让它以我选择的速度实际移动到那里。

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

那么这样的事情怎么样？如何计算在X轴和Y轴上移动球的距离？

Answer 1

我在后面view it here稍后使用画布创建了一个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
}

这应该让你知道这一切是如何运作的。显然我不能在这里输入整个代码。但如果您前往该链接，您可以看到来源。它主要是评论：）

史蒂夫

Answer 2

你可以在某个地方存储它的速度，并增加它直到其他一些力作用于它来改变它的速度/方向（使球反弹的简单方法就是否定球进入的方向）。 / p>

要将元素移向某个元素，请将元素及其目标之间的距离计算为x和y delta。要移动它，请以您选择的任何速率减小这些值。

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

HTML Canvas以恒定速度向一个方向移动对象？

2 个答案: