Javascript 为什么我的bg帧速率没有正确刷新？

我这里有两套代码。一个是简单的跳出代码。另一个是函数。我试着让它成为一个函数，但它似乎不能正常工作

bg帧速率不清楚的意思是，显示的是一串球，而不是一个正在反弹和设置动画的球

如果（this.y_pos>400）

即使在绘图功能中绘制时，该条件也不起作用

var sketch=函数（p）{
与（p）{
p、 设置=函数（）{
createCanvas（800600）；
//x_pos=799；
//y_pos=100；
//spdx=-随机（5,10）；
//spdy=随机（12,17）；
};
p、 draw=函数（）{
背景（0）；
//填充（255）；
//椭圆（x位置，y位置，50）；
//x_pos+=spdx；
//y_pos+=spdy；
//如果（y_位置>400）
//    {
//spdy*=-1；
//    }
//对于（变量i=0；i<10；i++）
雪崩（799100，随机（5,10），随机（12,17））；
};
函数雪崩（x，y，spdx，spdy）
{
这个x_pos=x；
这是y_pos=y；
这个.spdx=spdx；
this.spdy=spdy；
这个x_pos=799；
此点y_pos=100；
这是spdx=1；
这是spdy=1；
this.movement=函数（）
{
这个.x_pos+=-spdx；
this.y_pos+=spdy；
如果（该位置大于400）
{
这是spdy*=-1；
}
}
this.draw=函数（）
{
这个动作（）；
这个.drawnRox（）；
}
this.drawnRox=函数（）
{
填充（255）；
椭圆（这个.x_位置，这个.y_位置，50）；
}
}
}
};
让节点=document.createElement（'div'）；
window.document.getElementById（'p5-container'）.appendChild（节点）；
新p5（草图、节点）
正文{
背景色：#EFEF；
}
让我们来解决这两个问题：

为每个新帧调用
draw（）
函数，并在其中调用创建新球的
avalance
。要解决这个问题，您需要

创建一个全局变量
let ball从
setup（）
和
draw（）
中取出，以便以后可以重用
在设置中创建一个新球并将其分配给您的
ball
变量：
ball=newavalance（799100，random（5,10），random（12,17））

在
draw（）
中，您希望更新球，这就是它自己的
draw（）
函数所做的（例如，我建议将其重命名为
update（）
，以避免与p5特定的
draw（）
函数混淆）。所以您只需要在
draw（）
中调用
ball.draw（）

这将创建一个移动但仍不遵守400px限制的球

问题是，在
movement（）
中，您将
spdx
和
spdy
添加到位置，但当球越过限制时，您将更新
this.spdy
，因此您需要使用此代码更新函数：

this.x_pos+=-this.spdx；
this.y_pos+=this.spdy


你应该表现得很好！代码挂起，代码按预期工作

另外，作为一个额外的建议：您可能想使用一些对象来存储位置、速度和加速度，这确实使您的代码更易于阅读和使用。您还可以重命名您的函数
Avalance
（大写
A
），以表明您实际使用了一个类，并且如果没有
new
，就不能调用此函数，正如@statox建议的那样，在
设置（）中执行
newavalance（799100，random（5,10），random（12,17））
section并在
draw（）
部分中调用
draw
球的

您可以通过单击“运行代码段”来测试下面的代码


var sketch=函数（p）{
与（p）{
var球；
p、 设置=函数（）{
createCanvas（800600）；
球=新的雪崩（799100，随机（5,10），随机（12,17））；
};
p、 draw=函数（）{
背景（0）；
ball.draw（）；
};
函数雪崩（x，y，spdx，spdy）
{
功能运动（）
{
x+=-spdx；
y+=spdy；
如果（y>高度| | y<0）
{
spdy*=-1；
}
如果（x>宽度| | x<0）
{
spdx*=-1；
}
}
this.draw=函数（）
{
运动（）；
drawnRox（）；
}
函数drawnRox（）
{
填充（255）；
椭圆（x，y，50）；
}
}
}
};
让节点=document.createElement（'div'）；
window.document.getElemen