游戏视口焦点与y轴上的碰撞检测相对于重力

Question

通过增加其“球”来减少球的落差。值。

y = 100时有一堵墙。

球应该与墙碰撞，两者都应该停止。

另外，我需要一个专注于球的视口。我尝试沿球的相反方向移动墙壁。

 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元素选择器（而不是缓存），
要素高度，
位置和很多其他的东西， 这对于糟糕的浏览器来说是不必要的过度杀伤 您的问题是您要更新元素位置，而不是重新重置该位置 - ＆gt;所以你能看到的只是一个有趣的性感表演！

而是使用对象字面 {} 存储有关元素的所有内容，位置，宽度......所有内容。甚至jQuery元素引用$('#ball') 好玩吧？所有在一个地方！

现在拥有该对象，引入属性 speed，
使用即：Object.y，
更新+= Object.speed属性 碰撞时，将对象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）上添加更多信息

我认为你需要这样的东西，这就是我问你实际上是什么的原因，这就是为什么我现在对你的回答是：你做错了引起你移动你的玩家而不是移动地图，这是对玩家的障碍。 游戏原则like that是：
有一个旅行的地图和一个移动X（在你的情况下）并且最终可以移动Y的静态玩家（例如当玩家在地图结束时走出退出动画）。

你可以在随机位置创建砖块（对手），但是你需要更多面向对象的方式来制作你的游戏。每个砖都应该是一个具有属性的Object（对象函数），在创建对象时（即：new Obstacle()）你将新砖放在地图上，但也放入一个可以容纳所有砖块的数组中，这样一旦它们就会出现在屏幕外/视口中，您可以通过从阵列中删除该砖来利用您的计算。

在游戏引擎中，您只需检查：

1 - 循环击中击中区域（玩家Y区域）的砖块阵列，并获得每个砖块X位置和宽度，检查与玩家的碰撞以及是否击中=游戏结束（停止地图移动。 ）

2 - 我正在谈论的MAP运动是在你的玩家下面移动的整个（随机生成的）世界。这取决于你在玩家X的动作上做什么，这是我的建议。地图和障碍物向上移动，这是你应该如何处理（红色）视口和玩家位置：