<canvas id="canvas" width="600" height="400"></canvas>

//定義球的位置和速度
var x = 300;
var y = 200;
var vx = 5;
var vy = 5;
var radius = 20;

//繪制球體
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
//繪制障礙物
ctx.beginPath();
ctx.rect(250, 150, 100, 30);
ctx.fillStyle = 'gray';
ctx.fill();
ctx.closePath();

//檢測碰撞
if((x + vx >canvas.width - radius) || (x + vx< radius)) {
vx = -vx;
}
if((y + vy >canvas.height - radius) || (y + vy< radius)) {
vy = -vy;
}
if((y + vy >150 - radius) && (x >250) && (x< 350)) {
vy = -vy;
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//繪制元素
// ......
//更新球的位置
x += vx;
y += vy;
requestAnimationFrame(draw);
}
draw();