javascript - 如何使球从 Canvas 两侧弹起？

Question

Here是迄今为止我的项目的链接。

我想让一个球(一个椭圆)围绕 Canvas 的所有四个壁弹跳，当发生这种情况时，我还想在每次弹跳后改变球的颜色和速度(当然是随机的)。 P.S 我希望球继续在四壁的 Canvas 上弹跳。感谢您的帮助!!

这是我尝试过的代码。它让球从上到下穿过 y 轴并继续前进，但我不知道如何让它从左侧和右侧反弹。我只是希望球以顺时针方向在所有四个侧面弹跳(左壁、顶部、右壁、底部等)

已编辑

// position of the ball
var y = 33;
// how far the ball moves every time
var speed = 2;

draw = function() {
background(127, 204, 255);

fill(66, 66, 66);
ellipse(200, y, 50, 50);

// move the ball
y = y + speed;

if (y > 371) 
    {
        speed = -5;
    }

if (y < 31) 
    {
        speed = 5;
    }
};

Answer 1

这是完成的项目。

noStroke();

// The Speed Of The Ball When It Starts
    var initialSpeedX = 5;
    var initialSpeedY = -3;

// The Current Speed Of The Ball
    var ballSpeedX = +initialSpeedX;
    var ballSpeedY = -initialSpeedY;

// The Current Location Of The Ball
    var ballX = 0;
    var ballY = 0;

// Check If The Ball Is Moving
    var ballMoving = false;

var draw = function() {
    background(120, 228, 255);

// Move The Ball
    if (ballMoving) {
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    }
    else {
    ballX = mouseX;
    ballY = 465;
    }

// Draw The Ball
    ellipse(ballX, ballY, 70, 70);

// Check If Ball Has Hit The Top
    if (ballY <= 35) {
    ballSpeedY = -ballSpeedY;
    fill(243, 255, 10);
    }

// Check If The Ball Has Hit The Left Wall
    if (ballX <= 35) {
    ballSpeedX = -ballSpeedX;
    fill(235, 135, 12);
    }

// Check If The Ball Has Hit The Right Wall
    if (ballX >= 465) {
    ballSpeedX = -ballSpeedX;
    fill(255, 0, 0);
    }

// Check If Ball Has Hit The Bottom
    if (ballY >= 465) {
    ballSpeedY = -ballSpeedY;
    fill(0, 255, 9);
    }
    };

// When The Mouse Is Clicked
    var mouseClicked = function() {
    if (!ballMoving) {

// Reset The Ball Speed
    ballSpeedX = initialSpeedX;
    ballSpeedY = initialSpeedY;
    ballMoving = true;
    }
};