如何添加碰撞到您的HTML5游戏 - 傻瓜

当HTML5视频游戏中最有趣的事情发生时，精灵conk和相互碰撞。游戏引擎通常有一些工具来测试两个精灵是否重叠。这被称为冲突检测，可以通过多种方式完成。本示例使用标准的边界矩形方案。这不是完美的，但它很容易实现，并且是常用的。

<！ --1 - >

如何在游戏中设置边界矩形冲突

看看colTest。 HTML，你会看到一个简单的例子。在colTest中。 html例子中，用户用鼠标移动小动物，当小动物触摸屏幕中间的盒子时，你会得到一个消息。

COLTEST。 html

var game; var box;无情的小动物var输出;函数init（）{game = new Scene（）;游戏。 hideCursor（）; box = new Sprite（game，“simpleBox。png”，50，50）;小动物=新的雪碧（游戏，“小动物”，50,50）;输出=文档。的getElementById（ “输出”）; //给框固定位置框。 setPosition（200，150）;框。 （0）setSpeed; //由鼠标小动物控制的小动物setPosition（100，100）;小动物。 （0）setSpeed;小动物。 followMouse = function（）{this。 setX（document。mouseX）;这个。 setY（document。mouseY）;} //结束followMouse游戏。 start（）;} //结束init函数update（）{游戏。明确（）;小动物。 followMouse（）; 盒。更新（）;小动物。 update（）;} //结束更新; 函数checkCollisions（）{ if（box。collidesWith（critter））{ 输出。 innerHTML =“碰撞”; }其他{ 输出。 innerHTML =“无碰撞”; } //结束，如果 } //结束checkCollisions 空 这段代码中发生了许多有趣的事情：

<！ - 2 - >

隐藏正常的鼠标光标。

当你要有一些其他的物体跟着鼠标，你通常想要隐藏正常的箭头光标。在simpleGame中，使用游戏。 hideCursor（）方法隐藏游戏画面内的鼠标光标。

创建多个精灵。
需要两个探戈，或相撞。在这个例子中，盒子将保持静止，并且跟随鼠标。

给这个小动物一个followMouse（）方法。
在这个例子中，你有小动物跟随鼠标。首先创建一个followMouse（）方法。

确定鼠标的位置。
鼠标位置由文档确定（在simpleGame.js中）。 mouseX和文档。 mouseY属性。

将鼠标位置复制到小动物位置。
使用鼠标的x位置设置小动物的x位置，并用y重复。

每一帧调用小怪物的followMouse（）方法。与往常一样，update（）函数是您应该将代码重复发生的地方。
如果玩弄colTest。 html页面，你可能会注意到碰撞不是确切的。甚至当小动物没有碰到盒子时，也可以有一个碰撞记录器。这很重要，因为simpleGame使用了一个名为

边界框碰撞

的方案。这意味着你并没有真正检查图像是否碰撞，而是图像周围的矩形是否碰撞。在这个例子中，这个差别很小，但是有时你会发现这个机制存在很大的错误，特别是对于那些长而薄的元素。当精灵旋转时，边界矩形的大小可以改变。游戏中基于距离的碰撞

可以使用称为

边界圆

碰撞的替代形式的碰撞检测。有了这个机制，你只需计算两个精灵的中心之间的距离，如果这个值小于某个阈值，就认为是碰撞。这种方法有两个好处：碰撞距离是恒定的。即使图像更改大小，图像旋转时图像中心之间的距离也不会改变。碰撞阈值可以变化。

你可以设定任何你想要的灵敏度。设置一个较大的碰撞半径以实现轻松碰撞，一个较小的碰撞半径，当您想要只在精灵非常接近时触发碰撞。 simpleGame库的Sprite对象有一个distanceTo（）方法，用于计算从一个精灵到另一个精灵的距离。你可以在远处看到这个代码的例子。 html例子：
距离。 html var game; var box;无情的小动物var输出;函数init（）{game = new Scene（）;游戏。 hideCursor（）; box = new Sprite（game，“simpleBox。png”，50，50）;小动物=新的雪碧（游戏，“小动物”，50,50）;输出=文档。的getElementById（ “输出”）; //给框固定位置框。 setPosition（200，150）;框。（0）setSpeed;小动物。 setPosition（100，100）;小动物。（0）setSpeed; //由鼠标小动物控制的小动物followMouse = function（）{this。 setX（document。mouseX）;这个。 setY（document。mouseY）;} //结束followMouse游戏。 start（）;} //结束init函数update（）{游戏。明确（）;小动物。 followMouse（）; checkDistance（）;

盒。更新（）;小动物。 update（）;} //结束更新;

function checkDistance（）{ dist = box。 distanceTo（小动物）;如果（dist <50）{ 输出。 innerHTML =“碰撞：”+ dist; }其他{ 输出。 innerHTML =“不碰撞：”+ dist; } //结束，如果 } //结束checkDistance 空 基于距离的碰撞方法与边界矩形版本非常相似。创建一个checkDistance（）函数，它的作用就像旧的checkCollisions（）一样。以下是在checkDistance中发生的步骤： 查找两个精灵之间的距离。 使用精灵的distanceTo（）方法来确定两个精灵之间的距离。 如果距离小于某个阈值，则将其视为碰撞。

通常，您应该使用较小的精灵的宽度作为碰撞阈值的起点，但是您可以调整它以使碰撞发生或多或少的可能性。