单个小球移动

三 ，小球移动速度随机 ：（移动位置=本身所在的位置+移动的速度（数））
3.1 声明x，y的移动速度随机范围
四.设置定时器 使小球移动
4.1 x+=speedx y+=speedy
4.2 小球在画板上所移动的范围
4.3 移动的时间 在一台 60Hz 显示器上，一个优化良好的应用每秒可以更新画面（绘制帧）60 次。
所以，为了达到最佳的 60 帧帧率，主循环有 1 / 60 = 16.667 毫秒的时间做完一次循环的工作。
settimeout setintervarl：指定时间之后继续执行代码
或requestanimationframe（）：向这个函数传递一个回调，它会在浏览器下次准备执行渲染时执行这个回调
*/
function draw(x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath()
ctx.fillStyle = “#ff6600”
ctx.arc(x, y, 50, 0, Math.PI * 2)
ctx.fill()
}
function random(x, y) {
return Math.floor(Math.random() * (y - x + 1)) + x
}
let x = random(50, canvas.width - 50)
let y = random(50, canvas.height - 50)
let speedx = random(1, 5)
let speedy = random(1, 5)
speedx = random(0, 1) ? -speedx : speedx//如果生成随机数在（0,1）范围内 向反方向移动 否则正
speedy = random(0, 1) ? -speedy : speedy
setInterval(function () {
x += speedx//移动的位置=移动速度+本身移动的位置
y += speedy
x >= canvas.width + 50 ? x = arguments - 50 : null
if (x >= canvas.width + 50) {
x = -50//移动的位置大于画板的位置-本身的半径 向反向移动 x=0-50
}
if (x < -50) {
x = canvas.width + 50
}
if (y >= canvas.height + 50) {
y = -50
}
if (y < -50) {
y = canvas.height - 50
}
draw(x, y)
}, 16.667)