在画布javascript游戏中的碰撞

时间:2018-01-14 05:42:37

标签: javascript canvas collision-detection collision

我在游戏中添加了碰撞,但我遇到了问题。但首先我会给你一些背景知识。

我有这个:

// Function that verifies if a point is inside a rectangle
// point {x,y}
// rectangle {x,y,w,h}

function contains(point, rectangle) {
  return    point.x > rectangle.x &&
  ponto.x < rectangle.x + rectangle.w &&
  ponto.y > rectangle.y &&
  ponto.y < rectangle.y + rectangle.h;
}

开启update();功能

我有这个:

//Save player´s position
var xOld = xPlayer;
var yOld = yPlayer;

这里使用的是:

// Detect collision with obstacles
for(var i in obstacles1) {
    var rPlayer = {x:xPlayer, y:yPlayer, w:wPlayer, h:hPlayer};
    if( contains({x:xPlayer, y:yPlayer}, obstacles1[i]) ||
    contains({x:xPlayer+wPlayer, y:yPlayer}, obstacles1[i]) ||
    contains({x:xPlayer, y:yPlayer+hPlayer}, obstacles1[i]) ||
    contains({x:xPlayer+wPlayer, y:yPlayer+hPlayer}, obstacles1[i]) ||
    contains({x:obstacles1[i].x, y:obstacles1[i].y}, rPlayer) ||
    contains({x:obstacles1[i].x+obstacles1[i].w, y:obstacles1[i].y}, rPlayer) ||
    contains({x:obstacles1[i].x, y:obstacles1[i].y+obstacles1[i].h}, rPlayer) ||
    contains({x:obstacles1[i].x+obstacles1[i].w, y:obstacles1[i].y+obstacles1[i].h}, rPlayer) ){
        xPlayer = xOld;
        yPlayer = yOld;
    }
}

注意:

wPlayerhPlayer是播放器的宽度和高度,因为动画是通过spritesheet完成的。 xPlayeryPlayer是玩家的位置

这使得玩家在遇到障碍物(种类)时会停止。 使用我的代码,玩家将不断地在相同的障碍物上运行(通过传送到其旧位置)直到输入停止。

这段代码的问题在于,当我按下多个键并且玩家遇到障碍时,即使他正在执行另一个动画,他也会被困在墙上。

有没有办法让他“滑过”障碍物?我什么都想不到......

对不起,这个大帖子很抱歉,如果我没有解释好自己。如果您有任何问题我会很乐意让它更清楚。

1 个答案:

答案 0 :(得分:1)

游戏碰撞的5条法则

你的问题是你违反了游戏碰撞的所有法则。

请注意,这只是一个小小的舌头,但仍然有价值的建议

5条法律。

  1. 永远不要移动到障碍物内的位置......永远!
  2. 要从这里移动到那里,你可以移动它们之间的所有点。
  3. 你一次只能击中一件事,它总是最接近你的位置。
  4. 每次碰撞都会为新目的地创建一个新方向。
  5. 旅程需要时间,总是完成旅程。
  6. 法律1;

    如果物体最终落入你处于不可能的情境中,那么就没有数学解决方案,你就无法通过坚固的物质。你必须永远不要破坏这个法律,所有其他法律都可以稍微弯曲,但是打破第一定律并且你在游戏中有一个错误。

    法律2&amp; 3;

    想想现实世界,当你移动时,你沿着一条路走。如果有什么东西在你的方式,你无法通过它。在游戏中,您将场景渲染为一系列帧,当您将角色从一个点移动到下一个点时,您正在使用传送。 你不能这样做,你必须创建一条路径并测试该路径是否与任何障碍相交,如果你跳过障碍,你最终可能违反第一条法则(你不能这样做)。

    最接近路径起点的障碍物是您将首先击中的障碍物。

    法律4&amp; 5;

    当你遇到一个障碍物时,你会从它上面反弹,这会改变你前进的方向和路径。在游戏中,你的动画效果为每秒60帧。这意味着旅程的长度为16,667毫秒,如果你碰到它会在帧之间的某个时间点。你必须赶到那个时间点。

    所以现在你在帧之间的某个时间碰到了一个障碍,并且有一个新的方向和一个新的目的地。你还有剩下的时间,直到下一帧。要完成旅程,您必须再次完成所有操作。要完成旅程,你必须完成每次碰撞,直到你及时到达下一帧的16,667毫秒。

    帧之间可能存在许多冲突

    从一帧到下一帧你可以有很多碰撞,如果你没有按照正确的顺序完成每一次碰撞,你最终会陷入困境,或者不自然地移动,或者更糟糕的是违反第一条法则。

    一些演示

    一些有关碰撞示例的帖子。前两个是我认为你正在寻找的。