为了账号安全,请及时绑定邮箱和手机立即绑定

JS实现小球碰撞检测的问题,怎么修改?

JS实现小球碰撞检测的问题,怎么修改?

Dummy 2017-08-11 15:31:29
下面是我的代码,有比较多问题。例如,球到对角的时候会卡进障碍物。不知道怎么修改,。求大神们指点!~ <!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>上面是我的代码,有比较多问题。例如,球到对角的时候会卡进障碍物。不知道怎么修改,。求大神们指点!~
查看完整描述

3 回答

  • 3 回答
  • 0 关注
  • 2637 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信