- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一款平台游戏,但我的碰撞检测有问题。我制作了一个在屏幕/ map 上绘制图 block 的功能。在那个函数中是我的碰撞检测,当只绘制一个瓷砖时它工作正常,但是当我用三个瓷砖创建“楼梯”时,第一个瓷砖不能正常工作。玩家只是被“推”在瓷砖上。侧面检测不起作用。其他磁贴工作正常。
下面是碰撞检测和瓷砖绘制的代码:
//Function that allows you to draw a tile
function drawTile(type, x, y, collision){
var tileImg = new Image();
tileImg.onload = function(){
ctx.drawImage(tileImg, x, y)
};
tileImg.src = "images/" + type + ".png";
if (collision){
//Worst collision detection ever.
if((player_x + player_width == x) && (player_y + player_height > y)){
canMoveRight = false;
}else if((player_x == x + 32) && (player_y + player_height > y)){
canMoveLeft = false;
}else if((player_y + player_height > y) && (player_x + player_width >= x) && (player_x + player_width <= x + 64)){
player_y = y - player_height;
}else{
canMoveRight = true;
canMoveLeft = true;
}
}
}
//Draw the map
function drawMap(){
drawTile("block", 96, 208, true);
drawTile("block", 128, 208, true);
drawTile("block", 128, 176, true);
};
如您所见,碰撞检测代码有点糟糕。因此,如果您能向我展示更好的制作方法,那就太好了。
如果你需要知道什么,就说吧。 :)
最佳答案
我知道这对您来说听起来很可怕,但您应该考虑使用场景图来处理所有碰撞检测、绘制甚至点击屏幕上的事件。
场景图基本上是一种树状数据结构,表示 1-parent 到 n-child 关系(注意:每个 HTML 页面的 DOM 也是一个场景图)
因此,要解决这个问题,您将有一个称为“节点”或其他名称的基本接口(interface)或抽象类,代表您的 sceneGraph 中的每个节点都必须实现的接口(interface)。同样,它就像 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)具有节点可以从其父节点继承的所有偏移量。
在开始碰撞检测之前,我将展示如何使用此技术绘制 Sprite 。基本上,您将使用位置图像对填充绘制循环中的数组
节点:
{
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);
}
}
现在我们对从 sceneGraph 绘制图像有了基本的了解,我们开始进行碰撞检测:
首先我们需要我们的节点有边界框:
盒子:
{
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 游戏中,我更喜欢边界框不在其所在节点的坐标系中,而是让它知道其绝对 值。通过 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)
现在这些只是游戏中使用的场景管理的一些基础知识,您可以谷歌我在这里使用的许多热量,进行一些进一步的优化,并随时提出任何问题。
关于javascript - HTML5 Canvas 中的碰撞检测。优化太,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13099845/
我正在用 jQuery Collision 编写这个游戏,它使用键盘按键来移动 div,当一个 div 接触另一个 div 时,它应该防止重叠。 我到底该怎么做? HTML ----
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Java 2D Collision? 嘿,大家好,我有另一篇关于这个问题的帖子刚刚消失了,所以我想我会尝试得到一些关
嘿伙计们,我正在制作一个 2D java 游戏,我正在尝试找出如何制作一个好的碰撞代码。我目前正在使用以下代码: public void checkCollision() { Rect
我的意思是,当我与实体的侧面碰撞并想要跳跃时,我无法向右/向左移动,因为当我与右侧/左侧的实体碰撞时,我有一个标志可以防止这种情况发生,例如所以: 这是我用来检测碰撞的代码: public void
所以我正在运行 collide_mask 检查,以删除与玩家 Sprite 碰撞时的生物实例。它工作得很好。 pygame.sprite.spritecollide(player, mobs, Tru
我正在研究我的砖 block splinter 机,并制作一个适当的碰撞系统,以便使球逻辑地切换方向,我必须检测球与砖 block 的哪一侧碰撞。这是我当前的脚本: int sprite_collid
我做了一个类似颜色切换的游戏。唯一的问题是玩家与每种颜色发生碰撞...... 这是我从github上获取的代码: https://github.com/prometheon/MLNimbleNinja
测试我的游戏,当用户和怪物发生碰撞时,我希望弹出警报但没有成功: function die() { for (var i = 0; i < monster.length; i++) { i
我对 vector 很陌生,这是我第一次真正使用它们进行碰撞检查。这是我的项目,我对如何实现碰撞感到困惑。我目前的碰撞检查和响应代码似乎是……糟糕的设计。 这是我的代码: for(auto it =
我是 javascript 的新手,正在尝试找出如何与球和木板发生碰撞,这将停止游戏并提醒玩家“你输了”。但我只想让红球击中木板,让蓝球不接触地继续前进。这是我正在处理的代码。 (我不介意你是否可以帮
很抱歉提出奇怪的问题,我还是 Android 编程的新手。 我有以下代码: import android.content.DialogInterface.OnClickListener; import
我有 6 个 UIImageView,每个都连接到 UIPanGestureRecognizer,它们都连接到相同的方法。方法是: - (IBAction)handlePan:(UIPanGestur
我想根据某些对象的轴对齐边界框检查视锥体,以粗略检查这些对象是否在视野中。速度不是什么大问题。 最佳答案 我发现构建视锥体的世界空间模型并检查与它的 bbox 碰撞是错误的方法。 一个更简单的方法是以
我项目中的所有这些代码都运行良好,但我遇到了一些问题。当飞机接触到屏幕的边界时,它会在接触后开始旋转。我不知道如何让它在碰到屏幕边界时不旋转。只有在我使用时才会出现这个问题: plane.physic
在应用程序启动时,我在后台线程中删除旧的 CoreData 行,下面是我的代码。我的问题类似于城市街道问题。所以,我有两个实体,Street 和 City,我有一个关系 City > Street,因
我试图不接触穴居人和其他带有碰撞位掩码的图像,但我的穴居人击中了一切。 func addCaveManBitMasks(){ caveManNode.physicsBody?.category
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
如何在 PyGame 中找到字符和图像之间的碰撞?我已经从图像中绘制了一个玩家,并从瓷砖中绘制了墙壁,那么我如何检测这些碰撞? 最佳答案 如果你使用pygame Rect类来表示对象的边界,您可以使用
我正在使用 ftok() 为 C 应用程序使用的共享内存段生成标识符。我有问题,在一个盒子上我与 root 使用的标识符发生冲突。在这种情况下,我可以通过破解代码来修复它,但我想要一个更强大的解决方案
这个问题在这里已经有了答案: JavaScript: Collision detection (10 个回答) 10 个月前关闭。 检测 2 个物体(墙壁)碰撞的好方法。是的,不仅仅是检测,还有进一步
我是一名优秀的程序员,十分优秀!