javascript - 游戏视口(viewport)焦点与 y 轴上的重力碰撞检测

Question

通过增加“y”值，球会下落。

y = 100 处有一堵墙。

球应该与墙壁碰撞并且两者都应该停止。

此外，我需要一个聚焦于球的视口(viewport)。我尝试向球的相反方向移动墙壁。

 function update() {
     ballupdate();

     // opposite direction
     var viewportY = - gety('#ball');
     wallupdate(viewportY);
     collision();
     requestAnimationFrame(update);
 }

 function ballupdate() {
     var top = gety('#ball');
     top+= 3;
     top = Math.min(top, 300);
     sety('#ball', top);
 }

 function wallupdate(viewportY) {
     sety('#wall', 100 + viewportY);
 }

如果发生碰撞，球会移动到墙壁上方。

function collision() {
    var balltop = gety('#ball');
    var walltop = gety('#wall');

    if (balltop + getheight('#ball') >= walltop) {
        //console.log(balltop);
        ballhit(walltop - getheight('#ball'));
    }
}

function ballhit(y) {
   sety('#ball', y);
}

这会导致球和墙壁上下晃动。这是JSFIDDLE .

Answer 1

http://jsbin.com/Stop-Elements-Move-After-Collision/2/edit

您将在每个 requestAnimationFrame 上获取元素选择器(而不是缓存它)，
元素高度，
职位和许多其他东西，对于糟糕的浏览器来说，这是不必要的过度杀戮。
您的问题是您正在更新元素位置，而不是再次重置该位置 -> 因此您所看到的只是一场有趣的性感表演!

而是使用对象文字 {} 存储有关元素的所有内容、位置、宽度...一切。甚至 jQuery 元素引用 $('#ball')。
有趣吧？全部集中在一处!

现在有了该对象，引入一个属性 速度，
使用以下方式更新 Object.y 属性:+= Object.speed,
发生碰撞时，将两个对象速度设置为0，然后就完成了!

看看您的代码现在多么漂亮、简单且易于管理(而且速度快得多):

$(function() {

  var ball = { $:$("#ball"), w:10,  h:10, y:0,   x:0, speed:3 };
  var wall = { $:$("#wall"), w:100, h:10, y:100, x:0, speed:3 };

  function ballupdate() {
    ball.$.css({top: ball.y += ball.speed });
  }

  function wallupdate() {
    wall.$.css({top: wall.y -= wall.speed });   
  }

  function collision() {
    if (ball.y+ball.h >= wall.y) {
      wall.speed = 0;
      ball.speed = 0;
    }
  }

  (function update() { 
    ballupdate();
    wallupdate();
    collision();
    requestAnimationFrame(update);
  }());

});

添加有关 OP (@user3552579) 最后评论的更多信息

我认为你需要类似的东西，这就是为什么我问你实际上在做什么，这就是为什么我现在对你的回答是:你做错了因为你移动你的玩家而不是移动 map 及其对玩家的障碍。游戏原理like that是:
有一个可以移动的 map 和一个可以移动 X(在您的情况下)并最终可以移动 Y(例如，当玩家在 map 末端走出时的退出动画)的静态玩家。

您可以在随机位置创建砖 block (对手)，但您需要一种更加面向对象的方式来制作游戏。每个砖 block 都应该是一个具有属性的对象(对象函数)，在对象创建时(即:new Obstacle())，您将新砖 block 放在 map 上，同时也放入一个包含所有砖 block 的数组中，这样一旦它们离开屏幕/视口(viewport)，您就可以通过从数组中删除该砖 block 来利用您的计算。

在游戏引擎中您只需检查:

1 - 循环命中区域(玩家 Y 区域)中的砖 block 阵列，并获取每个砖 block 的 X 位置和宽度，检查与玩家的碰撞情况，如果命中 = 游戏结束(停止 map 移动。 )

2 - 我所说的 map 运动是指在玩家下方移动的整个(随机生成的)世界。如何处理玩家 X 的移动取决于您，这是我的建议。 map 和障碍物向上移动，以下是您应该如何处理(红色)视口(viewport)和玩家位置: