<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{width: 500px;height: 350px;border:1px solid #ccc;margin: 20px auto 0;position: relative;}
#ball{width: 50px;height: 50px;background: red;position: absolute;top:0;left: 0;}
#btn{width: 50px;height: 50px;cursor: pointer;background: green;}
</style>
</head>
<body>
<div id="box">
<div id="ball">
</div>
</div>
<div id="btn">
</div>
</body>
</html>
<script type="text/javascript">
var box=document.getElementById("box");
var ball=document.getElementById("ball");
var btn=document.getElementById("btn");
var speedX=10;//横向的移动速度
var speedY=10;//横向的移动速度
//点击更改ball的速度
btn.onclick=function(){
speedX=parseInt(Math.random()*4+1)+2;
speedY=parseInt(Math.random()*4+1)+2;
}
setInterval(function(){
ball.style.left=ball.offsetLeft+speedX+"px";
ball.style.top=ball.offsetTop+speedY+"px";
//判断ball的位置 触壁speed取反
if(ball.offsetLeft>=box.clientWidth-ball.offsetWidth||ball.offsetLeft<=0){
speedX*=-1;
}
if(ball.offsetTop>=box.clientHeight-ball.offsetHeight||ball.offsetTop<=0){
speedY*=-1;
}
},30)
</script>
主要运用的知识点:原生的js碰撞检测