javascript - P5js：为什么我的 bg 帧率没有正确刷新？

问题描述

我在这里有两套代码。一种是简单的反弹代码。另一个是函数。我试图让它成为一个功能，但它似乎不能正常工作。

在显示一串球而不是球弹跳和动画的意义上，bg 帧速率并不清楚。
if(this.y_pos > 400)即使在绘图函数中绘制它时，这种情况似乎也不起作用。

        var sketch = function (p) {
          with(p) {

            p.setup = function() {
              createCanvas(800, 600);
                
              //    x_pos = 799;
              //    y_pos = 100;
           
              //    spdx = -random(5,10);
              //    spdy = random(12,17);
            };
        
            p.draw = function() {
              background(0);
              
              //    fill(255);
              //    ellipse(x_pos,y_pos,50);
              //    x_pos += spdx;
              //    y_pos += spdy;
                 
              //    if(y_pos > 400)
              //    {
              //        spdy *= -1;
              //    }
              
              // for( var i = 0; i < 10; i++)
              
              avalance(799, 100, random(5,10), random(12,17));
            };

            function avalance(x, y, spdx, spdy)
            {
                this.x_pos = x;
                this.y_pos = y;
                this.spdx = spdx;
                this.spdy = spdy;
                
                this.x_pos = 799;
                this.y_pos = 100;
                
                this.spdx = 1;
                this.spdy = 1;
                
                this.movement = function()
                {
                    this.x_pos += -spdx;
                    this.y_pos += spdy;
                    
                    if(this.y_pos > 400)
                    {
                        this.spdy *= -1;
                    }
                }
                
                this.draw = function()
                {
                    this.movement();
                    this.drawnRox();
                }
                
                this.drawnRox = function()
                {
                    fill(255);
                    ellipse(this.x_pos,this.y_pos,50);
                }
                
            }


            
          }
        };
        
        let node = document.createElement('div');
        window.document.getElementById('p5-container').appendChild(node);
        new p5(sketch, node);

    body {
      background-color:#efefef;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <div id="p5-container"></div>

标签： javascriptp5.js

解决方案

让我们解决这两个问题：

draw()每个新帧都会调用该函数，并在其中调用avalance它会创建一个新球。要解决这个问题，您需要

let ball;从and 中创建一个全局变量setup()，draw()以便您以后可以重用它；
在设置中创建一个新球并将其分配给您的ball变量：ball = new avalance(799, 100, random(5,10), random(12,17));
在draw()您想要更新球时，这就是它自己的draw()功能所做的（例如，我建议重命名它update()，以避免与 p5 特定draw()功能混淆）。因此，您只需调用ball.draw().draw()

这会创建一个移动但仍然不遵守 400 像素限制的球。

问题是在movement()你添加spdx和spdy到位置但是当球越过你更新的限制时this.spdy，所以你需要使用以下代码更新函数：

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

你应该很好！这是一个待处理的代码，您的代码可以按您的意愿工作。

另外作为奖励建议：您可能希望使用一些p5.Vector对象来存储位置、速度和加速度，它确实使您的代码更易于阅读和使用。您还可以重命名您的函数Avalance（大写A），以表明您实际上使用了一个类，并且不应在没有的情况下调用此函数new。

javascript - P5js：为什么我的 bg 帧率没有正确刷新？

问题描述

解决方案

推荐阅读