小球在桌面上自由移动，要清楚的几个问题
1、小球在桌面移动的最大距离是多少
2、小球移动的步长是多少
3、当小球碰到屏幕边缘时怎么实现反弹
4、 如何实现多个小球
5、怎么实现小球的颜色及大小
关于第一步实现小球在桌面上移动的最大距离的思路
1、首先要获取桌面的宽度与高度，注意获取屏幕的宽度与高度需要封装一下，如下所示
宽：document.documentElement.clientWidth || document.body.clientWidth;
高：document.documentElement.clientHeight || document.body.clientHeight;
2、其次再获取小球的宽与高，
3、二者相减就是小球移动的最大距离
关于第二步实现小球移动的步长的思路
需要设置两个步长 ，一个水平方向的步长 ，一个垂直方向的步长 ，这样方便实现第6个问题的反弹
关于第三步实现当小球碰到屏幕边缘时需要反弹的思路
当小球碰到屏幕边缘时需要反弹， 我们知道在水平方向上移动元素时，向右是**+，向左是—** ， 垂直方向上向下是**+， 向上是—** ， 所以可以看出两个方向正好相反，利用将步长取反就可以实现
关于第四步实现多个小球的思路
可以肯定的是不能将小球写成具体的数字，要动态的添加小球，因为当要添加几十个的时候只需修改数字就好，方便更改，所以需要利用document.createElement(元素)和appendChild() 来实现，
关于第步实现颜色及大小的思路
1、 对于大小，需要创建一个数组，对于颜色，利用rgbq来取值，颜色与大小都是用随机数取值，
2、需要注意当小球的大小改变时，小球在窗口内可运动的最大距离也会改变，所以需要再更改窗口的最大距离
效果图 (视频加载，有点慢，可能需要等一下~ )
小球在桌面移动，碰到屏幕反弹
下面是代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>球移动</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.common{
position: absolute;
left:0;
top:0;
width: 60px;
height: 60px;
background-color: re;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="common"></div>
<script>
// 获取小球的div
var div = document.querySelector('div');
// 获取小球在桌面移动的最大距离
var width = document.documentElement.clientWidth || document.body.clientWidth;
var height = document.documentElement.clientHeight || document.body.clientHeight;
var newWidth = width - div.offsetWidth;
var newHeight = height - div.offsetHeight;
// 设置小球移动的步长
var step = [4,5,6,7,8,9,-4,-5,-6,-7,-8,-9];
var stepx = getStep();
var stepy = getStep();
// 设置小球的大小
var size = [30,40,50,60,70,80,90,100,110,120];
// 函数的调用实现移动
move(div,stepx,stepy,newWidth,newHeight);
createBall(20);
// 实现动态添加小球
function createBall(num){
var account = 0;
var timer = setInterval(function(){
// 动态创建创建一个div小球
var ball = document.createElement('div');
ball.className = 'common';
// 设置其样式 ,颜色与大小
var newSize = getSize();
console.log(newSize);
ball.style.width = newSize + 'px'; // 一定要加px
ball.style.height = newSize + 'px';
// 设置新创建的小球可运运的窗口范围
newWidth = width - newSize;
newHeight = height - newSize;
ball.style.backgroundColor = getColor();
// 将动态创建的小球添加窗口中
document.body.appendChild(ball);
// 获取步长
stepx = getStep();
stepy = getStep();
// 调用move使小球加入移动队列中
move(ball,stepx,stepy,newWidth,newHeight);
// 当计数器 == 设定的数量时，停止计时器
account++;
if(account == num)
clearInterval(timer);
},1000)
}
// 实现小球的移动
function move(obj,stepx, stepy,width,height){
clearInterval(obj.timer)
// 用来判断是否超出屏幕以及每次小球的距离
var disx; var disy ;
obj.timer = setInterval(function(){
disx = obj.offsetLeft + stepx;
disy = obj.offsetTop + stepy;
if(disx >= width){ // 水平方向上判断是否超出右边屏幕
disx = width;
stepx = -stepx;
obj.style.backgroundColor = getColor();
}
if(disx < 0){ // 水平方向上判断是否超出左边屏幕
disx = 0;
stepx = -stepx;
obj.style.backgroundColor = getColor();
}
if(disy >= height){ // 垂直方向上判断是否超出下边屏幕
disy = height;
stepy = -stepy;
obj.style.backgroundColor = getColor();
}
if(disy < 0){ // 垂直方向上判断是否超出上边屏幕
disy = 0;
stepy = -stepy;
obj.style.backgroundColor = getColor();
}
obj.style.left = disx + 'px';
obj.style.top = disy + 'px';
},50)
}
// 获取步长
function getStep(){
return step[Math.floor(Math.random() * step.length)];
}
// 获取颜色
function getColor(){
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 获取大小
function getSize(){
return size[Math.floor(Math.random() * size.length)];
}
</script>
</body>
</html>