我知道这对您来说听起来像是可怕的开销，但您应该考虑使用场景图来处理您在屏幕上的所有碰撞检测、绘图甚至点击事件。
Scene Graph 基本上是一个树形数据结构，表示 1-parent 到 n-child 关系（注意：每个 HTML 页面的 DOM 也是一个 Scene Graph）
因此，为了解决这个问题，您将拥有一个名为“node”或其他名称的基本接口或抽象类，代表sceneGraph 中每个节点必须实现的接口。同样，它就像 dom 中的元素一样，它们都具有 CSS 属性、事件处理方法和位置修饰符。
节点：
{
children: [],
update: function() {
for(var i = 0; i < this.children.length; i++) {
this.children[i].update();
}
},
draw: function() {
for(var i = 0; i < this.children.length; i++) {
this.children[i].draw();
}
}
}
现在，您可能知道，如果您每次移动 DOM 中的一个元素，每次移动，位置或其他方式，所有子元素都会自动与它们的父元素一起移动到新位置，这种行为是通过转换继承来实现的，因为简单我不会展示一个 3D 转换矩阵，而只是一个平移（一个 x,y 偏移）。
节点：
{
children: [],
translation: new Translation(),
update: function(worldTranslation) {
worldTranslation.addTranslation(this.translation);
for(var i = 0; i < this.children.length; i++) {
this.children[i].update(worldTranslation);
}
worldTranslation.removeTranslation(this.translation);
},
draw: function() {
for(var i = 0; i < this.children.length; i++) {
this.children[i].draw();
}
}
}
转换：
{
x: 0,
y: 0,
addTranslation: function(translation) {
this.x += translation.x;
this.y += translation.y;
},
removeTranslation: function(translation) {
this.x -= translation.x;
this.y -= translation.y;
}
}
（请注意，我们不会实例化新的翻译对象，因为在全局翻译上添加/删除值会更便宜）
现在您的 worldTranslation（或 globalTranslation）具有节点可以从其父节点继承的所有偏移量。
在进行碰撞检测之前，我将展示如何使用此技术绘制精灵。
基本上，您将在 Draw-loop 中使用位置-图像对填充一个数组
节点：
{
children: [],
translation: new Translation(),
image: null, //assume this value is a valid htmlImage or htmlCanvas element, ready to be drawn onto a canvas
screenPosition: null, //assume this is an object with x and y values like {x: 0, y: 0}
update: function(worldTranslation) {
worldTranslation.addTranslation(this.translation);
this.screenPosition = {x: worldTranslation.x, y: worldTranslation.y};
for(var i = 0; i < this.children.length; i++) {
this.children[i].update(worldTranslation);
}
worldTranslation.removeTranslation(this.translation);
},
draw: function(spriteBatch) {
spriteBatch.push({
x: this.screenPosition.x,
y: this.screenPosition.y,
});
for(var i = 0; i < this.children.length; i++) {
this.children[i].draw(spriteBatch);
}
}
}
渲染功能：
function drawScene(rootNode, context) {
//clear context here
var spriteBatch = [];
rootNode.draw(spriteBatch);
//if you have to, do sorting according to position.x, position.y or some z-value you can set in the draw function
for(var i = 0; i < spriteBatch.length; i++) {
var sprite = spriteBatch[i];
context.drawImage(sprite.image, sprite.position.x, sprite.position.y);
}
}
现在我们已经对从场景图绘制图像有了基本的了解，我们来看看碰撞检测：
首先我们需要我们的节点有边界框：
盒子：
{
x: 0,
y: 0,
width: 0,
height: 0,
collides: function(box) {
return !(
((this.y + this.height) < (box.y)) ||
(this.y > (box.y + box.height)) ||
((this.x + this.width) < box.x) ||
(this.x > (box.x + box.width))
);
}
}
在 2D 游戏中，我更喜欢边界框不在其所在节点的坐标系中，而是让它知道其 Absolute 值。
通过 CSS 解释：
在 CSS 中，您可以设置边距和填充，这些值不依赖于页面，而是仅存在于设置了这些值的元素的“坐标系”中。所以它就像有 position: absolute 和 left: 10px vs margin-left: 10px;
2D 的好处是我们不需要一直冒泡 sceneGraph 来查找检测，并且我们不必从当前坐标系计算盒子 -> 进入世界坐标系 -> 回到每个节点进行碰撞检测。
节点：
{
children: [],
translation: new Translation(),
image: null,
screenPosition: null,
box: null, //the boundry box
update: function(worldTranslation) {
worldTranslation.addTranslation(this.translation);
this.screenPosition = {x: worldTranslation.x, y: worldTranslation.y};
this.box.x = worldTranslation.x;
this.box.y = worldTranslation.y;
this.box.width = this.image.width;
this.box.height = this.image.height;
for(var i = 0; i < this.children.length; i++) {
this.children[i].update(worldTranslation);
}
worldTranslation.removeTranslation(this.translation);
},
collide: function(box, collisions) {
if(this.box.collides(box)) {
collisions.push(this);
}
//we will optimize this later, in normal sceneGraphs a boundry box asures that it contains ALL children
//so we only will go further down the tree if this node collides with the box
for(var i = 0; i < this.children.length; i++) {
this.children[i].collide(box, collisions);
}
},
draw: function(spriteBatch) {
spriteBatch.push({
x: this.screenPosition.x,
y: this.screenPosition.y,
image: this.image,
});
for(var i = 0; i < this.children.length; i++) {
this.children[i].draw(spriteBatch);
}
}
}
碰撞功能：
function collideScene(rootNode, box) {
var hits = [];
rootNode.collide(box, hits);
for(var i = 0; i < hits.length; i++) {
var hit = hits[i];
//your code for every hit
}
}
注意：
并非每个节点都必须代表一个图像，您可以创建节点来为其子级添加一个翻译，例如制作一个没有视觉效果的 DIV 容器来排列一堆对象，而只需要编辑一个对象的位置。一个字符可以包括：
CharacterRoot (Translation Only)
CharacterSprite (Image)
Weapon (Image)
Shield (Image)
现在这些只是游戏中使用的场景管理的一些基础知识，您可以在我在这里使用的许多 therms 上进行谷歌搜索，进行一些进一步的优化并随时提出任何问题。