如何让球从画布的两侧反弹？

Question

Here 是我目前项目的链接。

我想让一个球（一个椭圆）在画布的所有四个壁上弹跳，发生这种情况时，我还想在每次弹跳后更改球的颜色和速度（当然是随机的）。 P.S 我希望球继续在所有四面墙上的画布上弹跳。感谢您的帮助！

这是我尝试过的代码。它让球从上到下穿过 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

您的代码存在一些问题。关闭第一个 if 的花括号输入错误。要使球反弹，只需将您的速度乘以 -1。看看：

// The position of the ball
var x = 25;

// How far the ball moves every time
var speed = 3;

var draw = function() {

    background(47, 222, 126);

    // The ball
    fill(48, 46, 48);
    ellipse(x, 200, 50, 50);

    // Moves the ball
    x = x + speed;

    if (x > 375) {
        speed = -speed;
    } else if (x < 214) {
        speed = -speed;
    }

};

这是一个更完整的例子：

var canvas = document.getElementById( "myCanvas" );
var context = canvas.getContext( "2d" );
var width = 400;
var height = 200;

var ball = {
    x: 100,
    y: 100,
    radius: 25,
    xSpeed: 3,
    ySpeed: 3,
    draw: function( ctx ) {
    	ctx.beginPath();
        ctx.arc( this.x, this.y, this.radius, 0, 2*Math.PI );
        ctx.fill();
    },
    move: function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }
}

setInterval( function(){
	
    context.clearRect( 0, 0, width, height );
    context.strokeRect( 0, 0, width, height );
    
    ball.move();
    
    // right 
    if ( ball.x + ball.radius >= width ) {
    	ball.x = width - ball.radius;
        ball.xSpeed = -ball.xSpeed;
    }
    
    // left
    if ( ball.x - ball.radius <= 0 ) {
    	ball.x = ball.radius;
        ball.xSpeed = -ball.xSpeed;
    }
    
    // down
    if ( ball.y + ball.radius >= height ) {
    	ball.y = height - ball.radius;
        ball.ySpeed = -ball.ySpeed;
    }
    
    // up
    if ( ball.y - ball.radius <= 0 ) {
    	ball.y = ball.radius;
        ball.ySpeed = -ball.ySpeed;
    }
    
    ball.draw( context );
    
}, 10 );

<canvas id="myCanvas" width="400" height="200"></canvas>

这有一些物理模拟...

var canvas = document.getElementById( "myCanvas" );
var context = canvas.getContext( "2d" );
var width = 400;
var height = 200;
var gravity = 1;

var ball = {
    x: 100,
    y: 100,
    radius: 25,
    xSpeed: 1,
    ySpeed: 1,
    friction: 0.99,
    elasticity: 0.9,
    draw: function( ctx ) {
    	ctx.beginPath();
        ctx.arc( this.x, this.y, this.radius, 0, 2*Math.PI );
        ctx.fill();
    },
    move: function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }
}

setInterval( function(){
	
    context.clearRect( 0, 0, width, height );
    context.strokeRect( 0, 0, width, height );
    
    ball.move();
    
    // right 
    if ( ball.x + ball.radius >= width ) {
    	ball.x = width - ball.radius;
        ball.xSpeed = -ball.xSpeed * ball.elasticity;
    }
    
    // left
    if ( ball.x - ball.radius <= 0 ) {
    	ball.x = ball.radius;
        ball.xSpeed = -ball.xSpeed * ball.elasticity;
    }
    
    // down
    if ( ball.y + ball.radius >= height ) {
    	ball.y = height - ball.radius;
        ball.ySpeed = -ball.ySpeed * ball.elasticity;
    }
    
    // up
    if ( ball.y - ball.radius <= 0 ) {
    	ball.y = ball.radius;
        ball.ySpeed = -ball.ySpeed * ball.elasticity;
    }
    
    ball.xSpeed = ball.friction;
    ball.ySpeed = ball.ySpeed + ball.friction + gravity;
    
    ball.draw( context );
    
}, 10 );

<canvas id="myCanvas" width="400" height="200"></canvas>

Answer 2

这是完成的项目。

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;
    }
};