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


Posted in Javascript onDecember 13, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun 测试上述代码运行结果如下:

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

github地址:https://github.com/krapnikkk/JS-gameMathematics

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

Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
jquery.validate使用详解
Jun 02 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 #Javascript
Element UI框架中巧用树选择器的实现
Dec 12 #Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 #Javascript
新版小程序登录授权的方法
Dec 12 #Javascript
加快Vue项目的开发速度的方法
Dec 12 #Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 #Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 #Javascript
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
PHP注释实例技巧
2008/10/03 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript 数组操作详解
2015/01/29 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python制作动态字符图的实例
2019/01/27 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python实现LRU热点缓存及原理
2019/10/29 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Java的五个基础面试题
2016/02/26 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
师德建设实施方案
2014/03/21 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python