在 p5.js 内在屏幕上移动一个球

Question

我想使用 if 语句在屏幕上移动椭圆我只让它左右移动但我无法向上移动它所以它完成了一个完整的循环这是我的代码：

var x;
var y;
var r=33;
var speed=4;

function setup() {
    createCanvas(660, 500);
    x=width;
    y=0;
}

function draw() {
    background("black");
    ellipse(x,y,r)

    if(x<=width&&x>=0)
    {
      if(y<=0)
          x-=12;
      else if(y>=height)
          x+=21;

    }
    if(y>=0&&y<=height)
    {
        if(x>=width)
          y-=21;
        else if(x<=0)
          y+=21
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

Answer 1

问题是，球没有恰好停在 window 的边界处。它稍微超出了。使用 min() and max()，将球保持在界内。

例如：

x = max(r, x - speed_x);

y = min(height-r, y + speed_y);

查看示例

var x, y, r=25, speed_x = 12, speed_y = 12;

function setup() {
    createCanvas(500, 200);
    x=width-r;
    y=r;
}

function draw() {
    background("black");
    ellipse(x,y, r*2)

    // move left
    if (y == r && x > r)
        x = max(r, x - speed_x);

    // move down
    if (x == r && y < height-r)
        y = min(height-r, y + speed_y);

    // move right
    if (y == height-r && x < width-r)
        x = min(width-r, x + speed_x);

    // move up
    if (x == width-r && y > r)
        y = max(r, y - speed_y);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

在 p5.js 内在屏幕上移动一个球

Moving a ball around the screen in p5.js

javascript

processing

p5.js