JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】

程序员文章站 2022-03-13 17:05:29

本文实例讲述了js/html5游戏常用算法之碰撞检测包围盒检测算法。分享给大家供大家参考，具体如下：检测物体碰撞实际上是需要检测物体是否相交，而实际应用中物体的形状大...

本文实例讲述了js/html5游戏常用算法之碰撞检测包围盒检测算法。分享给大家供大家参考，具体如下：

检测物体碰撞实际上是需要检测物体是否相交，而实际应用中物体的形状大小各异，如果直接对物体的边缘进行碰撞检测，实际计算过程的代价非常高昂。如果物体的数量太多，比如像网络游戏中，通常少则几千用户，多则上万、几十万用户同时在线，而这些碰撞都要通过服务器检测，这样计算的消耗，即使是大型服务器也会崩溃，所以通常不需要十分精确的碰撞检测情况下，使用包围盒算法，即把物体放在一个多边形中，这个多边形就是包围盒。

基于这样一个概念，通常情况下我们就使用了最简单的几种多边形，比如圆形、矩形等。

先来看看如何使用圆形包围盒算法，圆形包围盒算法就是使用圆形作为包围盒将物体包围起来，检测的时候只需要检测两个圆形是否碰撞即可。检测圆形的碰撞比较容易，假设圆 a 的坐标(x1, y1)，半径是 r1，圆 b 的坐标(x2, y2)，半径是 r2，则如果满足不等式(y2−y1)2+(x2−x1)2≤(r1+r2)2则表示两个圆发生了碰撞，其实就是圆心之间的距离小于两个圆的半径之和即可，由于计算距离需要用到开方运算，效率较低，所以直接比较距离的平方。

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】

关键代码：

  function hittest( source, target ) {
   /* 源物体和目标物体都包含 x, y 以及 width, height */
   return !(
    math.pow((source.x - target.x),2) + math.pow((source.y - target.y),2) > math.pow((source.r + target.r),2)
   );
  }

完整示例代码：

<!doctype html>
<html lang="en">
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta charset="utf-8">
 <title>盒包围碰撞算法-圆形</title>
 <style>
  #stage {
   border: 1px solid lightgray;
  }
 </style>
</head>
<body>
<h1>是否碰撞：<span class="hittest">否</span></h1>
<canvas id="stage"></canvas>
</body>
<script>
 window.onload = function () {
  var stage = document.queryselector('#stage'),
   ctx = stage.getcontext('2d');
  stage.width = 400;
  stage.height = 400;
  document.onkeydown = function (event) {
   var e = event || window.event || arguments.callee.caller.arguments[0];
   //根据地图数组碰撞将测
   switch (e.keycode) {
    case 37:
     console.log("left");
     if (balls[0].x > 0) {
      balls[0].x -= 2;
     }
     break;
    case 38:
     console.log("top");
     if (balls[0].y > 0) {
      balls[0].y -= 2;
     }
     break;
    case 39:
     console.log("right");
     if (balls[0].x < stage.width) {
      balls[0].x += 2;
     }
     break;
    case 40:
     console.log("bottom");
     if (balls[0].y < stage.height) {
      balls[0].y += 2;
     }
     break;
    default:
     return false;
   }
  };
  stage.addeventlistener('click', function (event) {
   var x = event.clientx - stage.getboundingclientrect().left;
   var y = event.clienty - stage.getboundingclientrect().top;
   balls[0].x = x - balls[0].r/2;
   balls[0].y = y - balls[0].r/2;
  });
  var player = {
   x: stage.width / 2 - 20,
   y: stage.height / 2 - 20,
   r: 40,
   c: "red"
  },balls = [];
  balls.push(player);
  for (var i = 0; i < 10; i++) {
   var ball = {
    x: 60 * i,
    y: 60 * i,
    r: 40,
    c: "blue"
   };
   balls.push(ball);
  }
  function createball(x, y, r, c) {
   ctx.beginpath();
   ctx.fillstyle = c;
   ctx.arc(x, y, r, 0, math.pi*2);
   ctx.fill();
  }
  function hittest( source, target ) {
   /* 源物体和目标物体都包含 x, y 以及 width, height */
   return !(
    math.pow((source.x - target.x),2) + math.pow((source.y - target.y),2) > math.pow((source.r + target.r),2)
   );
  }
  function update() {
   ctx.globalalpha=1;
   ctx.clearrect(0, 0, 400, 400);
   document.queryselector('.hittest').innerhtml = "否";
   for (var i = 1, len = balls.length; i < len; i++) {
    createball(balls[i].x, balls[i].y, balls[i].r, balls[i].c);
    var flag = hittest(balls[0],balls[i]);
    if(flag){
     document.queryselector('.hittest').innerhtml = "是";
     ctx.globalalpha=0.5;
    }
   }
   createball(balls[0].x, balls[0].y, balls[0].r, balls[0].c);
   requestanimationframe(update);
  }
  update();
 };
</script>
</html>

这里使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun 测试上述代码运行结果如下：

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】

github地址：https://github.com/krapnikkk/js-gamemathematics

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。

上一篇： JS/HTML5游戏常用算法之路径搜索算法随机迷宫算法详解【普里姆算法】

下一篇： JavaScript文本特效实例小结【3个示例】

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【圆形情况】

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【凹多边形的分离轴检测算法】

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【矩形情况】