正文
JS-小球碰撞反弹
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
类似于屏保的一种动画，当小球碰到边框时，发生反弹，并且变化颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>碰壁反弹</title>
<style type="text/css">
#wrap{
width: 400px;height: 500px;
border: 1px solid green;
margin: 100px auto 0px;
position: relative;
}
#ball{
width: 50px;height: 50px;
background: black;
border-radius: 50%;
position: absolute;
left: 0;top: 0;
}
#pall{
width: 50px;height: 50px;
background: blue;
border-radius: 50%;
position: absolute;
right: 0;top: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="ball"></div>
<div id="pall"></div>
</div>
<script type="text/javascript">
var ball = document.getElementById('ball');
var color = ['red','blue','green','orange','black','pink']
var i = 0;
var j = 0;
var x = 1.5;
var y = 4;
setInterval(function(){
ball.style.left = i + 'px';
i += x;
if (i >= 350) {
x *= -1;
col();
}else if (i < 0) {
x *= -1;
col();
};
ball.style.top = j + 'px';
j += y;
if (j >= 450 ) {
y *= -1;
col();
}else if(j < 0){
y *= -1;
col();
}
pall.style.right = i + 'px';
i += x;
if (i >= 350) {
x *= -1;
col1();
}else if (i < 0) {
x *= -1;
col1();
};
pall.style.top = j + 'px';
j += y;
if (j >= 450 ) {
y *= -1;
col1();
}else if(j < 0){
y *= -1;
col1();
}
},20)
function col(){
var col = Math.floor(Math.random()*6);
ball.style.background = color[col];
}
function col1(){
var col1 = Math.floor(Math.random()*6);
pall.style.background = color[col1];
}
</script>
</body>
</html>
