原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹 - CSDN文库

167 浏览量更新于2023-05-04 收藏 105KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

原生原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹

小球在桌面上自由移动，要清楚的几个问题

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、需要注意当小球的大小改变时，小球在窗口内可运动的最大距离也会改变，所以需要再更改窗口的最大距离

效果图 (正在制做.jpg格式 )

下面是代码展示

*{

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%;

}

// 获取小球的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();

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38651929

粉丝: 4
资源: 908

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈