思路：1. 先创建一个画布
2. 在js创建一个var x = 0，y=0 代表 小球的x轴和y轴
3. 封装一个小球 方便随时可以调用 小球的x y轴 需要加上创建的x y轴 相当于加上一个随时可以变化的x y轴。
4. 创建一个开关 var speedX = 1,seppdY=2
5. 计时器，进入计时器的时候清除小球,不然会生成很多个小球。随便将speedx,y赋值给创建好的x和y。
6.临界值判断.向右移动,画布的总宽度减去小球的宽度就是小球可以移动的距离。当小球到达临界值的时候让小球往回走，seppdx取反
7.临界值判断.向左移动,当移动到小球的宽度的时候。当小球到达临界值的时候让小球往回走，seppdx再次取反。seppedx就为正数小球向左移动，
8. 上下和左右临界值判断一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
background-color: hotpink;
}
</style>
</head>
<body>
<canvas id="box" width="800" height="400"></canvas>
<script>
var oBox = document.querySelector("#box");
var ctx = oBox.getContext("2d")
//先创建一个x y = 0 代表小球到坐标轴
var x = 0,y=0;
//开关
var speedX=1 ,seppdY=2;
//封装一个函数 随时可以调用小球
function boll() {
ctx.beginPath()
//小球+X 和+Y 等进入计时器等时候改变小球等坐标达到运动效果
ctx.arc(100+x,100+y,50,0,2*Math.PI,false)
ctx.stroke()
ctx.closePath()
}
boll()
setInterval(function () {
//进计时器先清除小球 不然会有很多个小球
ctx.clearRect(0,0,oBox.width,oBox.height)
//将开关赋值给x和y 等到达临界点时让sppend变为负值
x+=speedX;
y+=seppdY;
//当小球移动坐标移动到距离画布的总宽度减去自身宽度让小球反弹，到临界点让开关为负值以达到往回走到效果
if (100+x>oBox.width-50){
speedX=-speedX
//当小球回到原点自身宽度到时候，开关取反变为正值，继续往右走
} else if (100+x<50){
speedX=-speedX
}
//当小球移动坐标移动到距离画布的总高度减去自身高度让小球反弹，到临界点让开关为负值以达到往回走到效果
if (100+y>oBox.height-50){
seppdY=-seppdY
//当小球回到原点自身高度到时候，开关取反变为正值，
} else if (100+y<50){
seppdY=-seppdY
}
console.log(speedX);
console.log(seppdY);
boll();
},10)
</script>
</body>
</html>
网友评论