我正在构建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()
来绘制所有这些元素。