ボールをキャンバスの両面から跳ね返すにはどうすればよいですか？

Question

Hereは私のプロジェクトへのリンクです。

私はキャンバスの4つの壁のすべてにボール（楕円）を跳ね返したいと思うので、ボールの色を変えたいと思います。 P.S私はボールが4つの壁のすべてから離れてキャンバスの周りをバウンスし続けたいと思っています。助けてくれてありがとう！！

これは私が試したコードです。それは上から下に向かってy軸を横切ってボールを獲得し続けますが、それを左右に跳ね返す方法はわかりません。私はあなたが持ついくつかの問題を持って時計回りの方向にすべての4つの側面にバウンスするだけでボールたいと思います（左側壁、上、右壁、下、などなど）

EDITED

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

Answer 2

あなたのコード。最初の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) { 
 
    \t 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(){ 
 
\t 
 
    context.clearRect(0, 0, width, height); 
 
    context.strokeRect(0, 0, width, height); 
 
    
 
    ball.move(); 
 
    
 
    // right 
 
    if (ball.x + ball.radius >= width) { 
 
    \t ball.x = width - ball.radius; 
 
     ball.xSpeed = -ball.xSpeed; 
 
    } 
 
    
 
    // left 
 
    if (ball.x - ball.radius <= 0) { 
 
    \t ball.x = ball.radius; 
 
     ball.xSpeed = -ball.xSpeed; 
 
    } 
 
    
 
    // down 
 
    if (ball.y + ball.radius >= height) { 
 
    \t ball.y = height - ball.radius; 
 
     ball.ySpeed = -ball.ySpeed; 
 
    } 
 
    
 
    // up 
 
    if (ball.y - ball.radius <= 0) { 
 
    \t 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) { 
 
    \t 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(){ 
 
\t 
 
    context.clearRect(0, 0, width, height); 
 
    context.strokeRect(0, 0, width, height); 
 
    
 
    ball.move(); 
 
    
 
    // right 
 
    if (ball.x + ball.radius >= width) { 
 
    \t ball.x = width - ball.radius; 
 
     ball.xSpeed = -ball.xSpeed * ball.elasticity; 
 
    } 
 
    
 
    // left 
 
    if (ball.x - ball.radius <= 0) { 
 
    \t ball.x = ball.radius; 
 
     ball.xSpeed = -ball.xSpeed * ball.elasticity; 
 
    } 
 
    
 
    // down 
 
    if (ball.y + ball.radius >= height) { 
 
    \t ball.y = height - ball.radius; 
 
     ball.ySpeed = -ball.ySpeed * ball.elasticity; 
 
    } 
 
    
 
    // up 
 
    if (ball.y - ball.radius <= 0) { 
 
    \t 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>