资讯专栏INFORMATION COLUMN

JS写的不咋地的碰撞检测

gotham / 2407人阅读

摘要:最近在学习碰撞检测相关的知识,但说实话,写的不咋地。因为真本来是正方形所以检测的不是很准确。下面来批评一下这个的代码。碰撞检测的代码因为碰撞可以分为这四个角度。因为使用了几乎一直在重排,所以性能不是最好的,但效果基本上实现了。

最近在学习碰撞检测相关的知识,但说实话,写的不咋地。但是因为鄙人学识浅薄,所以觉得基本上还行,但是挺追求我完美的,所以想拿出来让大神们批评批评。

先来看一下效果


感觉哇,真卡,真难受。因为真本来是正方形所以检测的不是很准确。

下面来批评一下这个的代码。

碰撞检测的代码

</>复制代码

  1. if((mover.offsetLeft + mover.offsetWidth >= target.offsetLeft)
  2. && (mover.offsetTop + mover.offsetHeight >= target.offsetTop)
  3. && (target.offsetLeft + target.offsetWidth >= mover.offsetLeft)
  4. && (target.offsetTop + target.offsetHeight >= mover.offsetTop)
  5. )

因为碰撞可以分为这四个角度。

1.左上角

2.右上角

3.左下角

4.右下角

5.整体图示

只要在那个区域之内就行。

碰撞区域边缘的代码

</>复制代码

  1. setInterval(function move(e) {
  2. boll.style.left = boll.offsetLeft + (this.N * 10) + "px"; //改变小球的位置
  3. boll.style.top = boll.offsetTop + (this.T * 10) + "px";
  4. if(boll.offsetLeft >= sq.offsetWidth - boll.offsetWidth || boll.offsetLeft <= 0 ){ //碰撞左右两边
  5. this.N *= -1; //改变方向(依自己喜好定义)
  6. }
  7. if(boll.offsetTop >= sq.offsetHeight - boll.offsetHeight || boll.offsetTop <= 0 ){ //碰撞上下两边
  8. this.T *= -1; //改变方向(依自己喜好定义)
  9. }
  10. }.bind(this), 50);

检测每一个小球与其他小球是否碰撞

</>复制代码

  1. bollArr = [], //存放小球DOM元素,改变方向用
  2. boll = []; //存放小球,检测是否碰撞用

</>复制代码

  1. setInterval(function move(e) {
  2. for (var i = 0; i < bollArr.length; i ++) {
  3. for (var j = i + 1; j < bollArr.length; j ++) {
  4. collisionDetection(bollArr[i], bollArr[j], fes[i], fes[j]);
  5. }
  6. }
  7. }, 50);

小球构造函数

</>复制代码

  1. function Boll() {
  2. this.backgroundColor = "rgba(35, 215, 65, .3)"; //小球颜色
  3. this.left = getRandom(400); //小球位置
  4. this.top = getRandom(400);
  5. this.N = 1; //改变小球方向的数(自己可以精确定义,我就随便定义了)
  6. this.T = 1;
  7. boll.push(this);
  8. }

整体代码

</>复制代码

  1. let sq = document.getElementById("square"), //获取最外面的框
  2. bollArr = [], //小球DOM元素集合
  3. boll = []; //小球实例集合
  4. function Boll() { //构造函数
  5. this.backgroundColor = "rgba(35, 215, 65, .3)";
  6. this.left = getRandom(400);
  7. this.top = getRandom(400);
  8. this.N = 1;
  9. this.T = 1;
  10. boll.push(this);
  11. }
  12. let boll0 = new Boll(),
  13. boll1 = new Boll(),
  14. boll2 = new Boll();
  15. Boll.prototype.createBoll = function() { //创建小球
  16. let boll = document.createElement("div");
  17. boll.style.display = "none";
  18. boll.style.width = "60px";
  19. boll.style.height = "60px";
  20. boll.style.backgroundColor = this.backgroundColor;
  21. boll.style.borderRadius = "50%";
  22. boll.style.position = "absolute";
  23. boll.style.left = this.left + "px";
  24. boll.style.top = this.top + "px";
  25. boll.style.display = "block";
  26. sq.appendChild(boll);
  27. bollArr.push(boll);
  28. setInterval(function move(e) { //检测是否和外面的框碰撞
  29. boll.style.left = boll.offsetLeft + (this.N * 10) + "px";
  30. boll.style.top = boll.offsetTop + (this.T * 10) + "px";
  31. if(boll.offsetLeft >= sq.offsetWidth - boll.offsetWidth || boll.offsetLeft <= 0 ){
  32. this.N *= -1;
  33. }
  34. if(boll.offsetTop >= sq.offsetHeight - boll.offsetHeight || boll.offsetTop <= 0 ){
  35. this.T *= -1;
  36. }
  37. }.bind(this), 50);
  38. }
  39. // 碰撞检测
  40. function collisionDetection(mover, target, boll, boll2) {
  41. if((mover.offsetLeft + mover.offsetWidth >= target.offsetLeft)
  42. && (mover.offsetTop + mover.offsetHeight >= target.offsetTop)
  43. && (target.offsetLeft + target.offsetWidth >= mover.offsetLeft)
  44. && (target.offsetTop + target.offsetHeight >= mover.offsetTop)
  45. ){
  46. boll.N *= -1;
  47. boll.T *= -1;
  48. boll2.N *= -1;
  49. boll2.T *= -1;
  50. }
  51. }
  52. boll0.createBoll();
  53. boll1.createBoll();
  54. boll2.createBoll();
  55. // 为每两个小球检测是否碰撞
  56. setInterval(function move(e) {
  57. for (var i = 0; i < bollArr.length; i ++) {
  58. for (var j = i + 1; j < bollArr.length; j ++) {
  59. collisionDetection(bollArr[i], bollArr[j], boll[i], boll[j]);
  60. }
  61. }
  62. }, 50);

上面其实有很多不好和bug,希望看到的大神能批评几句。
因为使用了offset...几乎一直在重排,所以性能不是最好的,但效果基本上实现了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101008.html

相关文章

  • vue 百度地图api进行地理解析(解决跨域问题)

    摘要:我采用了插件原生百度地图的二次封装,但是插件里的红点标记需要用到经纬度值。 先扯一会儿 首先非常感谢大家的阅读(感谢已加粗),这是我人生中第一次写技术文章(以前打字都费劲),本人小white一个(秀一下英语词汇量),技术不咋地,就是爱分享,动不动还来个原创,你说气人不~ 闲话少说,进入主题!!! 重点部分 最近在做一个基于vue的设备管理系统,其中有一个需求:需要把设备所在地的...

    Freeman 评论0 收藏0
  • 最底层程序员的一点思考

    摘要:作为一名在最底层工作了年的程序员,大的风浪没见过,游泳池的水倒是喝过几口。为什么总有人能比你做的更好善于沟通让你轻松跨域障碍很大比例的程序员不擅长沟通,埋头写自己的代码,出了问题自己默不作声,死憋一天。 作为一名在最底层工作了7年的程序员,大的风浪没见过,游泳池的水倒是喝过几口。一路走过来支撑着我继续前行的是爱好、工作、还是钱?还是钱??还是??? 写好代码是你的工作 作为程序员,你的...

    邱勇 评论0 收藏0
  • uniapp table 组件

    摘要:最近在捣鼓项目,恰好用到组件,之前写了个,后面一直都想写一个像样的,可以分享给别人用的组件。自己的水平一般,开发出来的组件可能代码不咋地,还望路过大神斧正。 uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具,支持ios android wap,小程序,除了android有点卡外,其他暂时没有发现什么瑕疵。 最近在捣鼓uniapp项目,恰好用到table组件,之前...

    Vultr 评论0 收藏0
  • 听说你懂个J?——前端发展闲聊

    摘要:移动端迅猛发展的前期,和这样的终端开发才是这个社会的主流,前端开发受限于网络速度和没有统一的标准,还是不受重视。同时,网络的普及,也让前端也正式迈入了移动端的开发。在可预见的将来,前端受益于灵活的部署和安装,在移动端开发中比例会逐渐加重。 刚好周末和朋友聊起前端从受鄙视到变得重要这个话题,感慨前端这四年来的发展,遂有本文。 1. 前情提要 毋庸讳言,在我刚工作的时候,前端是还是一个不受...

    DrizzleX 评论0 收藏0

发表评论

0条评论

gotham

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<