DOM 练习 自由移动小球

效果

1. 实现小球在视口的移动
2. 小球可以反弹
3. 小球可以变色
4. 视口改变,小球移动不超过视口

记录必要数据

1. 确定安全边界,不会超出视口 MaxLeft MaxTop
2. 确定移动方向 disX:1 disY:1
3. 移动方向: XY:++右下, XY:+-右上, XY:--左下, XY:-+左上

移动

使用 setInterval() 实现小球的移动, 计算偏移量,计算小球偏移量 判断安全区域范围,重范围给移动方向取反 确定小球位置

更改背景色

每次触发安全区域判定, 触发更改背景色

视口改变,小球移动适配

1. 更新视口宽高
2. 更新安全区域范围