Javascript Jquery中的加速度setInterval

我试图创建一个反弹球（在画布上）。我希望球在上下移动时能加速。不知道如何使用setInterval执行此操作。这是我的密码：

setInterval(function animate() {
    ctx.clearRect( 0, 0, canvas.width, canvas.height);

    if (movement1 === true) {
        dotHeight += 1;
        if (dotHeight >= 100) movement1 = false;
    } else {
        dotHeight -= 1;
        if (dotHeight <= 0) movement1 = true;
    }
        ctx.beginPath();
        ctx.arc(canvas.width / 2, (canvas.height / 2) + dotHeight, dotSize, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
    }, 4);

setInterval（函数animate（）{
clearRect（0，0，canvas.width，canvas.height）；
if（movement1==true）{
点高度+=1；
如果（点高度>=100）movement1=false；
}否则{
点高-=1；
如果（点高度，您可以使用
速度
变量而不是常量
1
来确定球移动的“距离”，如下所示：

var speed = 1;

setInterval(function animate() {
    ctx.clearRect( 0, 0, canvas.width, canvas.height);

    if (movement1 === true) {
        dotHeight += speed;
        if (dotHeight >= 100) movement1 = false;

        // make it faster
        speed += 1;
    } else {
        dotHeight -= speed;
        if (dotHeight <= 0) movement1 = true;

        // slow down
        speed -= 1;
    }
        ctx.beginPath();
        ctx.arc(canvas.width / 2, (canvas.height / 2) + dotHeight, dotSize, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
    }, 4);

var速度=1；
setInterval（函数animate（）{
clearRect（0，0，canvas.width，canvas.height）；
if（movement1==true）{
圆点高度+=速度；
如果（点高度>=100）movement1=false；
//快一点
速度+=1；
}否则{
圆点高度-=速度；
如果（点高度，您可以使用
速度
变量而不是常量
1
来确定球移动的“距离”，如下所示：

var speed = 1;

setInterval(function animate() {
    ctx.clearRect( 0, 0, canvas.width, canvas.height);

    if (movement1 === true) {
        dotHeight += speed;
        if (dotHeight >= 100) movement1 = false;

        // make it faster
        speed += 1;
    } else {
        dotHeight -= speed;
        if (dotHeight <= 0) movement1 = true;

        // slow down
        speed -= 1;
    }
        ctx.beginPath();
        ctx.arc(canvas.width / 2, (canvas.height / 2) + dotHeight, dotSize, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
    }, 4);

var速度=1；
setInterval（函数animate（）{
clearRect（0，0，canvas.width，canvas.height）；
if（movement1==true）{
圆点高度+=速度；
如果（点高度>=100）movement1=false；
//快一点
速度+=1；
}否则{
圆点高度-=速度；
如果（dotHeight基本原理是使用一个速度变量，而不是一个恒定的高度增量。因此，与
dotHeight+=1
或
dotHeight-=1
不同，您可以使用
dotHeight+=dotVelocity
，定义dotVelocity，并在球在空中时用一个恒定值（重力）减去它

var dotHeight = 0;
var dotVelocity = 3; // start out moving up, like in your example
var gravity = .1; // you can adjust this constant for stronger/weaker gravity

setInterval(function animate() {
ctx.clearRect( 0, 0, canvas.width, canvas.height);

if (dotHeight > 0) { // if it hit the ground, stop movement
     dotVelocity -= gravity;
     dotHeight += dotVelocity;   
}
    ctx.beginPath();
    ctx.arc(canvas.width / 2, (canvas.height / 2) + dotHeight, dotSize, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}, 4);

基本原理是使用速度变量，而不是恒定高度增量。因此，与
dotweath+=1
或
dotweath-=1
不同，您可以使用
dotweath+=dotweartime
，定义dotweartime，并在球悬空时用常量（重力）减去它

var dotHeight = 0;
var dotVelocity = 3; // start out moving up, like in your example
var gravity = .1; // you can adjust this constant for stronger/weaker gravity

setInterval(function animate() {
ctx.clearRect( 0, 0, canvas.width, canvas.height);

if (dotHeight > 0) { // if it hit the ground, stop movement
     dotVelocity -= gravity;
     dotHeight += dotVelocity;   
}
    ctx.beginPath();
    ctx.arc(canvas.width / 2, (canvas.height / 2) + dotHeight, dotSize, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}, 4);

您应该同时具有
速度
和
重力
（或
加速度
）变量：


speed
告诉您在当前更新中对象将移动多少单位（此处为像素）
gravity
告诉您在每次更新时
speed
增加多少单位


您需要一个恒定的
重力
，以便
速度
在每次更新时增加相同数量的像素。这将为您提供一个可变的
速度
，以便您的对象（此处的点）在每次更新时移动的距离更长或更短，具体取决于它移动的方向

要使圆点反弹，只要在它到达地面后改变其
速度的方向即可。您只需将其乘以
-1
，或者，您可以将其乘以
反弹因子（
-1
），这样每次反弹时它都会损失能量：


在这里，您可以看到一个工作示例：


var canvas=document.getElementById（“canvas”）；
canvas.width=canvas.offsetWidth；
canvas.height=canvas.offsetHeight；
var ctx=canvas.getContext（“2d”）；
var frames=0；//帧计数器只是为了确保在编辑代码时不会使浏览器崩溃！
//网络内容：
var-dotSize=20；
var dotMinY=0+dotSize；//开始位置
var dotMaxY=canvas.height-dotSize；//地板
var dotY=dotMinY；
var-dotSpeed=0；
var dotLastBounceSpeed=0；//您可以使用它来确定球是否仍然反弹到用户可以看到的程度。
var center=canvas.width/2；//尝试从animate函数中执行所有可以执行的操作。
var pi2=2*Math.PI；
//世界材料：
var重力=.5；
var bounceFactor=.8；//如果<1，反弹会吸收能量，所以球不会像以前那样高。
//主动画循环：
函数animate（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
弧（中心，圆点，圆点大小，0，pi2）；
ctx.fillStyle=“红色”；
ctx.fill（）；
//首先，计算dotSpeed+=重力，并返回dotSpeed的新值
//然后，新的价值被添加到dotY中。
dotY+=dotSpeed+=重力；
if（dotY>=dotMaxY）{
dotY=dotMaxY；
dotSpeed*=-bounceFactor；
}
var dotCurrentBounceSpeed=Math.round（dotSpeed*100）；//采用两位十进制数字。
如果（帧+++<5000&&dotLastBounceSpeed！=dotCurrentBounceSpeed）{
dotLastBounceSpeed=dotCurrentBounceSpeed；
setTimeout（动画，16）；//1000/60=16.6666。。。
}
else警报（“动画结束。拍摄“+帧+”帧。”）；
}
动画（）；
html，主体，#画布{
位置：相对位置；
宽度：100%；
身高：100%；
保证金：0；
溢出：隐藏；
}
您应该同时具有
速度
和
重力
（或
加速度
）变量：


speed
告诉您在当前更新中对象将移动多少单位（此处为像素）
gravity
告诉您在每次更新时
speed
增加多少单位


您需要一个恒定的
重力
，以便
速度
在每次更新时增加相同数量的像素。这将为您提供一个可变的
速度
，以便您的对象（此处的点）在每次更新时移动的距离更长或更短，具体取决于它移动的方向

要使圆点反弹，只要在它到达地面后改变其
速度的方向即可。您只需将其乘以
-1
，或者，您可以将其乘以
反弹因子（
-1
），这样每次反弹时它都会损失能量：


在这里，您可以看到一个工作示例：


var canvas=document.getElementB