Canvasで円を動かして、上下左右で跳ね返る

Canvas（JavaScript）の勉強をしています。

今回は、アニメーションを発展させてみました。
前回は、左右に言ったり来たりするだけでした。

今回は、上下も追加しました。

前回からほとんど変わっていないのですが、自分的には「やった！できた！」と喜んでました。

作ったのは1週間前くらいなのですが、今見たらそんな喜ぶほどではないなぁと思ってしまいました。。。

// clear
ctx.clearRect(0, 0, canvas.width, canvas.height);

// background
ctx.fillStyle = '#aaa';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// arc
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();

x = x + 5 * xd;
if (x < 0 || x > canvas.width) {
	xd = xd * -1;
}

y = y + 5 * yd;
if (y < 0 || y > canvas.height) {
	yd = yd * -1;
}

// animation
window.requestAnimationFrame(loop);

ブラウザで確認

ブラウザで見たい方は下のサイトにあります。私の個人サイト（素材置場）です。

canvas | notenonote