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

到目前为止，Here是我项目的链接。

我想使一个球（椭圆形）在画布的所有四个壁上反弹，并且在这种情况下，我还想在每次反弹后更改球的颜色和速度（当然是随机的）。附言：我希望球继续从所有四壁的帆布周围弹起。谢谢您的帮助！！

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

最佳答案

您的代码有一些问题。如果在错误的位置键入了第一个花括号，则将其关闭。要使球反弹，只需将速度乘以-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>