时间戳

首页 > 解决方案 > 在 p5.js 中在屏幕上移动一个球

javascript - 在 p5.js 中在屏幕上移动一个球

问题描述

我想使用 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>

标签： javascriptprocessingp5.js

解决方案

问题是，球并没有完全停在窗口的边缘。它略微移动。使用min(),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>

推荐阅读