337
ボールで遊ぼう 3
ボールを跳ね返そう
<canvas width="450" height="300"></canvas>
canvas { background: #eee; width: 100%; }
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext("2d"); let ballRadius = 10; // ボールの半径 let x = 225; // ボール位置 x座標 let y = 250; // ボール位置 y座標 let dx = 2; // ボールの速さ x方向 let dy = -2; // ボールの速さ y方向 function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } x += dx; y += dy; requestAnimationFrame(update); } update();
目次
ボールで遊ぼう 3
ボールを跳ね返そう
HTML
CSS
Javascript0
Javascript1
Javascript2
Javascript3