Перемещение мяча вокруг экрана в p5. js - PullRequest
Новая
       3

Перемещение мяча вокруг экрана в p5. js

1 голос
/ 09 февраля 2020

Я хотел переместить эллипс по экрану с помощью оператора 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>

1 Ответ

2 голосов
/ 09 февраля 2020

Проблема в том, что мяч не останавливается точно на границах окна. Это немного выходит за рамки. Используйте 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>
...