下面是我的代碼，有比較多問題。例如，球到對角的時候會卡進障礙物。不知道怎么修改，。求大神們指點！~
<!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>上面是我的代碼，有比較多問題。例如，球到對角的時候會卡進障礙物。不知道怎么修改，。求大神們指點！~
JS實現小球碰撞檢測的問題，怎么修改?
Dummy
2017-08-11 15:31:29