js实现小球碰撞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#wrap{
width: 100%;
height: 100%;
background: linear-gradient(to left,skyblue,rgb(226, 211, 126),pink);
}
.boll{
position: absolute;
}
</style>
<body>
<div id="wrap">
</div>
<script>
window.onload=function(){
// 仿照jq建一个工厂符
let $=e=>{return document.querySelector(e)};
// 建一个自定义随机数函数
function randFn(min,max){
return parseInt(Math.random()*(max-min)+min);
}
let wrap=$('#wrap');
// 这里写函数内部球的一些样式随机
function Boll(wh){
var wh=randFn(20,50);
// 宽度随机20-50之间
this.width=wh;
// 高度随机20-50之间
this.height=wh;
// 距离顶部随机0-页面最大高度减去自身高度值，加上单位px
this.top=randFn(0,document.body.offsetHeight -wh)+'px';
// 距离左部随机0-页面最大宽度减去自身宽度值，加上单位px
this.left=randFn(0,document.body.offsetWidth-wh)+'px';
// 随机一个0-自身高度的边框圆润
this.borderR=randFn(0,this.height);
// 边框影音随机
this.border=`0 0 ${randFn(1,10)}px ${randFn(1,20)}px rbg(${randFn(0,255)},${randFn(0,255)},${randFn(0,255)})`
// 背景色随机
this.color='rgba('+randFn(0,255)+','+randFn(0,255)+','+randFn(0,255)+','+Math.random()+')';
// 移动速度X轴随机
this.speedX=randFn(-10,10);
// 移动速度Y轴随机
this.speedY=randFn(-10,10);
// 给函数div创造一个html中的div
this.div=document.createElement('div');
}
Boll.prototype.draw=function(){
// 给div加上类名
this.div.className = 'boll';
// 加上随机宽度值
this.div.style.width=this.width+'px';
// 加上随机高度值
this.div.style.height=this.height+'px';
console.log(this.border)
// 加上随机阴影值
this.div.style.boxShadow=this.border;
// 加上随机top值
this.div.style.top=this.top;
// 加上随机left值
this.div.style.left=this.left;
console.log(this.borderR)
// 加上随机圆角值
this.div.style['border-radius']=this.borderR+'px';
console.log(this.color)
// 加上随机背景色值
this.div.style['background']=this.color;
// 将当前创造的div添加到wrap当中去
wrap.appendChild(this.div);
}
Boll.prototype.run=function(){
// 因为此时的在setInterval中的this指向window所以要把this缓存起来，赋一个值
var self=this;
setInterval(function(){
var tag=self.div;
// boll的左边距+boll宽度值>wrap的宽度值或者boll的左边距值<0的时候 boll的速度开始倒退
if(tag.offsetLeft + tag.offsetWidth > wrap.offsetWidth || tag.offsetLeft < 0){
self.speedX*=-1;
}
if(tag.offsetTop + tag.offsetHeight > wrap.offsetHeight || tag.offsetTop < 0){
self.speedY*=-1;
}
// boll的left值=自身宽度值+刚刚的判断值+‘px’;
tag.style.left = tag.offsetLeft + self.speedX + 'px';
tag.style.top = tag.offsetTop + self.speedY + 'px';
},10)
}
// 循环遍历div个数
for(let i=1;i<=10;i++){
// 用‘new关键字创建实例’来访问prototype属性中对应的属性和方法
var f=new Boll();
f.draw();
f.run()
}
// f.run()
}
</script>
</body>
</html>
——————————————————————写的不好，仅供参考
