JS实现小球碰撞检测的问题，怎么修改?
下面是我的代码，有比较多问题。例如，球到对角的时候会卡进障碍物。不知道怎么修改，。求大神们指点！~
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>碰撞检车</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wp{
width: 600px;
height:500px;
border: 1px solid;
position: absolute;
}
.box{
width: 50px;
height: 50px;
background: red;
position: relative;
border-radius:50%;
}
.box2{
width:100px;
height: 100px;
background:orange;
position: absolute;
top:150px;
left: 300px;
}
</style>
</head>
<script type="text/javascript" src = "ht.js"></script>
<body>
<div id="wp">
<div id="box"></div>
<div id = "box2"></div>
</div>
</body>
<script type="text/javascript">
var wp =$("wp");
var box = $("box");
var box2=$("box2")
var bl=box.offsetLeft;
var bt=box.offsetTop;
var bv = 1;
var bv2=1;
var aa;
setInterval(function(){
bl+=bv;
bt+=bv2;
if( bl== (wp.clientWidth-box.offsetWidth) || bl<=0){
bv*=-1;
}
if(bt >= (wp.clientHeight-box.offsetHeight) || bt<=0){
bv2*=-1;
}
// 左侧
if(bl == (box2.offsetLeft-box.offsetWidth)&&bt>=(box2.offsetTop)&&bt<=(box2.offsetTop+box2.offsetHeight)){
bv*=-1;
}
// 上侧
if (bt ==(box2.offsetTop-box.offsetHeight) && bl>=box2.offsetLeft && bl<=box2.offsetLeft+box2.offsetWidth){
bv2*=-1
}
// 右侧
if(bl == (box2.offsetLeft+box2.offsetWidth)&&bt>=(box2.offsetTop)&&bt<=(box2.offsetTop+box2.offsetHeight)){
bv*=-1;
}
// 下侧
if (bt ==(box2.offsetTop+box2.offsetHeight) && bl>=box2.offsetLeft && bl<=box2.offsetLeft+box2.offsetWidth){
bv2*=-1
}
console.log(bl);
box.style.left = bl+"px";
box.style.top = bt+"px";
}, )
</script>
</html>
上面是我的代码，有比较多问题。例如，球到对角的时候会卡进障碍物。不知道怎么修改，。求大神们指点！~
Dummy浏览 2675回答 3
3回答
随时随地看视频慕课网APP
Html/CSS
JavaScript