HTML5美高梅娱乐场网站 OO实践

发布时间:2019-04-23  栏目:计算机教程  评论:0 Comments

“等一下,我碰!”——常见的2D碰撞检测

2017/02/22 · HTML5 · 1
评论
·
碰撞检测

原文出处:
凹凸实验室   

美高梅娱乐场网站 1

“碰乜鬼嘢啊,碰走晒我滴靓牌”。想到“碰”就自然联想到了“麻将”这一伟大发明。当然除了“碰”,洗牌的时候也充满了各种『碰撞』。

好了,不废话。直入主题——碰撞检测。

在 2D 环境下,常见的碰撞检测方法如下:

  • 外接图形判别法
    • 轴对称包围盒(Axis-Aligned Bounding Box),即无旋转矩形。
    • 圆形碰撞
  • 光线投射法
  • 分离轴定理
  • 其他
    • 地图格子划分
    • 像素检测

下文将由易到难的顺序介绍上述各种碰撞检测方法:外接图形判别法 > 其他
> 光线投射法 > 分离轴定理。

另外,有一些场景只要我们约定好限定条件,也能实现我们想要的碰撞,如下面的碰壁反弹:

当球碰到边框就反弹(如x/y轴方向速度取反)。

JavaScript

if(ball.left < 0 || ball.right > rect.width) ball.velocityX =
-ball.velocityX if(ball.top < 0 || ball.bottom > rect.height)
ball.velocityY = -ball.velocityY

1
2
if(ball.left < 0 || ball.right > rect.width) ball.velocityX = -ball.velocityX
if(ball.top < 0 || ball.bottom > rect.height) ball.velocityY = -ball.velocityY

再例如当一个人走到 100px 位置时不进行跳跃,就会碰到石头等等。

因此,某些场景只需通过设定到适当的参数即可。

简介

人工智能(Artificial Intelligence)
,英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴,但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令(智商),本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。

外接图形判别法

基础类

二维向量(2D
vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现,用(x,
y)表示。 Vector2亦用来表示空间中的点(point),而不另建类。先看代码:

 1  (function(window) {

 2     var Vector2 = function(x, y) {
 3         this.x = x || 0;
 4         this.y = y || 0;
 5     };
 6     Vector2.prototype = {
 7         set: function(x, y) {
 8             this.x = x;
 9             this.y = y;
10             return this;
11         },
12         sub: function(v) {
13             return new Vector2(this.x – v.x, this.y – v.y);
14         },
15         multiplyScalar: function(s) {
16             this.x *= s;
17             this.y *= s;
18             return this;
19         },
20         divideScalar: function(s) {
21             if (s) {
22                 this.x /= s;
23                 this.y /= s;
24             } else {
25                 this.set(0, 0);
26             }
27             return this;
28         },
29         length: function() {
30             return Math.sqrt(this.lengthSq());
31         },
32         normalize: function() {
33             return this.divideScalar(this.length());
34         },
35         lengthSq: function() {
36             return this.x * this.x + this.y * this.y;
37         },
38         distanceToSquared: function(v) {
39             var dx = this.x – v.x,
40             dy = this.y – v.y;
41             return dx * dx + dy * dy;
42         },
43         distanceTo: function(v) {
44             return Math.sqrt(this.distanceToSquared(v));
45         },
46         setLength: function(l) {
47             return this.normalize().multiplyScalar(l);
48         }
49     };
50     window.Vector2 = Vector2;
51 } (window));

使用该类需要特别注意和区分的地方是:

它什么时候代表点、什么时候代表向量。

当其代表向量的时候,它的几何意义是什么?

不能把其当成一个黑盒来调用,需要知其然并知其所以然。

在下面的使用的过程当中,我会特别标注其代表点还是向量;代表向量时,其几何意义是什么?

给小球赋予智商,顾名思义需要小球类:

(function(window) {
    var Ball = function(r, v, p, cp) {
        this.radius = r;
        this.velocity = v;
        this.position = p;
        this.collectionPosition = cp
    }
    Ball.prototype = {
        collection: function(v) {
            this.velocity = this.collectionPosition.sub(this.position).setLength(v)
        },
        disband: function() {
            this.velocity = new Vector2(MathHelp.getRandomNumber( – 230, 230), MathHelp.getRandomNumber( – 230, 230))
        }
    }
    window.Ball = Ball
} (window)); 

其中

小球拥有4个属性,分别是:radius半径、velocity速度(Vector2)、position位置(Vector2)、collectionPosition集合点/小球的家(Vector2)。

小球拥有2个方法,分别是:collection集合、disband解散。

小球的集合方法所传递的参数为集合的速度,因为小球都有一个集合点的属性,所以这里不用再传入集合点/家给小球。

这里详细分析一下collection方法,这也是整个demo的关键代码。

collection: function (v) {
 this.velocity =this.collectionPosition.sub(this.position).setLength(v);
}, 

因为setLength设置向量的长度:

setLength: function (l) {
 return this.normalize().multiplyScalar(l);

 } 

所以collection可以改成:

  this.velocity = this.collectionPosition.sub(this.position).normalize().multiplyScalar(v);

normalize是获取单位向量,也可以改成:

this.collectionPosition.sub(this.position).divideScalar(this.length()).multiplyScalar(v);
  

整个Vector2黑盒就全部展现出来,其整个过程都是向量的运算,代表含义如下所示:

this.collectionPosition

                          .sub(this.position)               
获取小球所在位置指向小球集合位置的向量;

                          .divideScalar(this.length())
得到该向量的单位向量;
                           .multiplyScalar(v);              
改变该向量的长度。

最后把所得到的向量赋给小球的速度。
上面我们还是用到了解散方法,其过程是帮小球生成一个随机速度,用到了MathHelp类的一个静态方法:

(function (window) {
 var MathHelp = {};
 MathHelp.getRandomNumber = function (min, max) {
 return (min + Math.floor(Math.random() * (max – min + 1)));
 }
 window.MathHelp = MathHelp;

} (window)); 

轴对称包围盒(Axis-Aligned Bounding Box)

概念:判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞。

算法:

JavaScript

rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x
&& rect1.y < rect2.y + rect2.height && rect1.height + rect1.y >
rect2.y

1
2
3
4
rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.height + rect1.y > rect2.y

两矩形间碰撞的各种情况:
美高梅娱乐场网站 2

在线运行示例(先点击运行示例以获取焦点,下同):

缺点:

  • 相对局限:两物体必须是矩形,且均不允许旋转(即关于水平和垂直方向上对称)。
  • 对于包含着图案(非填满整个矩形)的矩形进行碰撞检测,可能存在精度不足的问题。
  • 物体运动速度过快时,可能会在相邻两动画帧之间快速穿越,导致忽略了本应碰撞的事件发生。

适用案例:

  • (类)矩形物体间的碰撞。

粒子生成

写了Vector2、Ball、MathHeper三个类之后,终于可以开始实现一点东西出来!

 1 var ps = [],
 2 balls = [];
 3 function init(tex) {
 4     balls.length = 0;
 5     ps.length = 0;
 6     cxt.clearRect(0, 0, canvas.width, canvas.height);
 7     cxt.fillStyle = “rgba(0,0,0,1)”;
 8     cxt.fillRect(0, 0, canvas.width, canvas.height);
 9     cxt.fillStyle = “rgba(255,255,255,1)”;
10     cxt.font = “bolder 160px 宋体”;
11     cxt.textBaseline = ‘top’;
12     cxt.fillText(tex, 20, 20);
13 
14     //收集所有像素
15     for (y = 1; y < canvas.height; y += 7) {
16         for (x = 1; x < canvas.width; x += 7) {
17             imageData = cxt.getImageData(20 + x, 20 + y, 1, 1);
18             if (imageData.data[0] > 170) {
19                 ps.push({
20                     px: 20 + x,
21                     py: 20 + y
22                 })
23             }
24         }
25     };
26     cxt.fillStyle = “rgba(0,0,0,1)”;
27     cxt.fillRect(20, 20, canvas.width, canvas.height);
28 
29     //像素点和小球转换
30     for (var i in ps) {
31         var ball = new Ball(2, new Vector2(0, 0), new Vector2(ps[i].px, ps[i].py), new Vector2(ps[i].px, ps[i].py));
32         balls.push(ball);
33     };
34 
35     cxt.fillStyle = “#fff”;
36     for (i in balls) {
37         cxt.beginPath();
38         cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);
39         cxt.closePath();
40         cxt.fill();
41     }
42 
43     //解散:生成随机速度
44     for (var i in balls) {
45         balls[i].disband();
46     }

47 } 

其中分三个步骤:收集所有像素、
像素点和小球转换、生成随机速度。整个demo我们需要一个loop:

 1 var time = 0;
 2 var cyc = 15;
 3 var a = 80;
 4 var collectionCMD = false;
 5 setInterval(function() {
 6     cxt.fillStyle = “rgba(0, 0, 0, .3)”;
 7     cxt.fillRect(0, 0, canvas.width, canvas.height);
 8     cxt.fillStyle = “#fff”;
 9     time += cyc;
10     for (var i in balls) {
11         if (collectionCMD === true && balls[i].position.distanceTo(balls[i].collectionPosition) < 2) {
12             balls[i].velocity.y = 0;
13             balls[i].velocity.x = 0;
14         }
15     }
16 
17     if (time === 3000) {
18         collectionCMD = true;
19         for (var i in balls) {
20             balls[i].collection(230);
21         }
22     }
23     if (time === 7500) {
24         time = 0;
25         collectionCMD = false;
26         for (var i in balls) {
27             balls[i].disband();
28         }
29     }
30 
31     for (var i in balls) {
32         cxt.beginPath();
33         cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);
34         cxt.closePath();
35         cxt.fill();
36         balls[i].position.y += balls[i].velocity.y * cyc / 1000;
37         balls[i].position.x += balls[i].velocity.x * cyc / 1000;
38     }
39 },

40 cyc);  

这里使用time整体控制,使其无限loop。ps:这里还有一点不够OO的地方就是应当为ball提供一个draw方法。

其中的balls[i].position.distanceTo(balls[i].collectionPosition)
代表了点与点之间的距离,这里判断小球是否到了集合点或家。这里其几何意义就不再向量了。

圆形碰撞(Circle Collision)

概念:通过判断任意两个圆形的圆心距离是否小于两圆半径之和,若小于则为碰撞。

两点之间的距离由以下公式可得:
美高梅娱乐场网站 3

判断两圆心距离是否小于两半径之和:

JavaScript

Math.sqrt(Math.pow(circleA.x – circleB.x, 2) + Math.pow(circleA.y –
circleB.y, 2)) < circleA.radius + circleB.radius

1
2
3
Math.sqrt(Math.pow(circleA.x – circleB.x, 2) +
Math.pow(circleA.y – circleB.y, 2))
< circleA.radius + circleB.radius

图例:
美高梅娱乐场网站 4

在线运行示例:

缺点:

  • 与『轴对称包围盒』类似

适用案例:

  • (类)圆形的物体,如各种球类碰撞。

在线演示

这你也敢叫人工智能?ok,未完待续……


其他

地图格子划分

概念:将地图(场景)划分为一个个格子。地图中参与检测的对象都存储着自身所在格子的坐标,那么你即可以认为两个物体在相邻格子时为碰撞,又或者两个物体在同一格才为碰撞。另外,采用此方式的前提是:地图中所有可能参与碰撞的物体都要是格子单元的大小或者是其整数倍。

蓝色X 为障碍物:
美高梅娱乐场网站 5

实现方法:

JavaScript

// 通过特定标识指定(非)可行区域 map = [ [0, 0, 1, 1, 1, 0, 0, 0,
0], [0, 1, 1, 0, 0, 1, 0, 0, 0], [0, 1, 0, 0, 0, 0, 1, 0, 0], [0,
1, 0, 0, 0, 0, 1, 0, 0], [0, 1, 1, 1, 1, 1, 1, 0, 0] ], //
设定角色的初始位置 player = {left: 2, top: 2}   //
移动前(后)判断角色的下一步的动作(如不能前行) …

1
2
3
4
5
6
7
8
9
10
11
12
13
// 通过特定标识指定(非)可行区域
map = [
[0, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 1, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0]
],
// 设定角色的初始位置
player = {left: 2, top: 2}
 
// 移动前(后)判断角色的下一步的动作(如不能前行)

在线运行示例:

缺点:

  • 适用场景局限。

适用案例:

  • 推箱子、踩地雷等

像素检测

概念:以像素级别检测物体之间是否存在重叠,从而判断是否碰撞。

实现方法有多种,下面列举在 Canvas 中的两种实现方式:

  1. 如下述的案例中,通过将两个物体在 offscreen canvas
    中判断同一位置(坐标)下是否同时存在非透明的像素。
  2. 利用 canvas 的 globalCompositeOperation = 'destination-in'
    属性。该属性会让两者的重叠部分会被保留,其余区域都变成透明。因此,若存在非透明像素,则为碰撞。

注意,当待检测碰撞物体为两个时,第一种方法需要两个 offscreen
canvas,而第二种只需一个。

offscreen canvas:与之相关的是 offscreen
rendering。正如其名,它会在某个地方进行渲染,但不是屏幕。“某个地方”其实是内存。渲染到内存比渲染到屏幕更快。——
Offscreen
Rendering

当然,我们这里并不是利用 offscreen render 的性能优势,而是利用
offscreen canvas 保存独立物体的像素。换句话说:onscreen canvas
只是起展示作用,碰撞检测是在 offscreen canvas 中进行

另外,由于需要逐像素检测,若对整个 Canvas
内所有像素都进行此操作,无疑会浪费很多资源。因此,我们可以先通过运算得到两者相交区域,然后只对该区域内的像素进行检测即可。

图例:
美高梅娱乐场网站 6

下面示例展示了第一种实现方式:

缺点:

  • 因为需要检查每一像素来判定是否碰撞,性能要求比较高。

适用案例:

  • 需要以像素级别检测物体是否碰撞。

光线投射法(Ray Casting)

概念:通过检测两个物体的速度矢量是否存在交点,且该交点满足一定条件。

对于下述抛小球入桶的案例:画一条与物体的速度向量相重合的线(#1),然后再从另一个待检测物体出发,连线到前一个物体,绘制第二条线(#2),根据两条线的交点位置来判定是否发生碰撞。

抛球进桶图例:
美高梅娱乐场网站 7

在小球飞行的过程中,需要不断计算两直线的交点。

当满足以下两个条件时,那么应用程序就可以判定小球已落入桶中:

  • 两直线交点在桶口的左右边沿间
  • 小球位于第二条线(#2)下方

在线运行示例:

优点:

  • 适合运动速度快的物体

缺点:

  • 适用范围相对局限。

适用案例:

  • 抛球运动进桶。

分离轴定理(Separating Axis Theorem)

概念:通过判断任意两个 凸多边形
在任意角度下的投影是否均存在重叠,来判断是否发生碰撞。若在某一角度光源下,两物体的投影存在间隙,则为不碰撞,否则为发生碰撞。

图例:
美高梅娱乐场网站 8

在程序中,遍历所有角度是不现实的。那如何确定 投影轴
呢?其实投影轴的数量与多边形的边数相等即可。

美高梅娱乐场网站 9

以较高抽象层次判断两个凸多边形是否碰撞:

JavaScript

function polygonsCollide(polygon1, polygon2) { var axes, projection1,
projection2   // 根据多边形获取所有投影轴 axes = polygon1.getAxes()
axes.push(polygon2.getAxes())   //
遍历所有投影轴,获取多边形在每条投影轴上的投影 for(each axis in axes) {
projection1 = polygon1.project(axis) projection2 =
polygon2.project(axis)   //
判断投影轴上的投影是否存在重叠,若检测到存在间隙则立刻退出判断,消除不必要的运算。
if(美高梅娱乐场网站,!projection1.overlaps(projection2)) return false } return true }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function polygonsCollide(polygon1, polygon2) {
var axes, projection1, projection2
 
// 根据多边形获取所有投影轴
axes = polygon1.getAxes()
axes.push(polygon2.getAxes())
 
// 遍历所有投影轴,获取多边形在每条投影轴上的投影
for(each axis in axes) {
projection1 = polygon1.project(axis)
projection2 = polygon2.project(axis)
 
// 判断投影轴上的投影是否存在重叠,若检测到存在间隙则立刻退出判断,消除不必要的运算。
if(!projection1.overlaps(projection2))
return false
}
return true
}

上述代码有几个需要解决的地方:

  • 如何确定多边形的各个投影轴
  • 如何将多边形投射到某条投影轴上
  • 如何检测两段投影是否发生重叠

留下评论

网站地图xml地图