如何使用边界框碰撞实现在2D游戏中的跳跃?

问题:
我试图实现基本的跳转到我的2D游戏引擎,但多次失败。
基本上我迄今为止所做的是禁用重力,并使用单独的function向上移动播放器。 问题在于它看起来非常糟糕。

我已经检查了很多关于这个的线程,并find了一个应该工作的方法。
这是通过简单地增加另一个重力向上的力量。 这个力应该大于重力,但应该减小,直到重力再次变大。

问题是我无法执行它。

我的代码是用Javascript编写的,并使用html5canvas进行渲染。
注意! 这个代码只是整个引擎的一部分。
至于变数:
c_objects – 玩家可以碰撞的所有对象的数组
玩家 – 对象文字与位置,宽度,移动速度,速度和速度倍增。

伪代码对我有好处,但我很想在JS中find答案。

码:

// physics module collision function collision(obj_1, obj_2) { var collision = Boolean( obj_1.x <= (obj_2.x + obj_2.width) && obj_2.x <= (obj_1.x + obj_1.width) && obj_1.y <= (obj_2.y + obj_2.height) && obj_2.y <= (obj_1.y + obj_1.height) ); // return position booleans return { collision: collision, }; }; function movement(x, y) { new_pos.x = player.x + x; new_pos.y = player.y + y; // check collision for all objects in collision array var index; var collisions = new Array(); for (index = 0; index < c_objects.length; ++index) { var new_collision = engine.collision(new_pos, c_objects[index]); collisions[index] = new_collision.collision; } var it_collides = collisions.indexOf(true) >= 0; if (it_collides == false) { player.x += x; player.y += y; } } // velocity & gravity module for adding gravity to an object function gravity(modifier) { if (player.gravity == true) { var x = 0; var y = 0; x = 0; y = +(player.velocity * modifier); engine.movement(x, y); if (player.velocity <= 450) { player.velocity = (player.velocity * player.velocity_m); } else { velocity = 450; } } }; 

解决的办法是增加另外一个速度比重力更快的function,这个速度会随着时间的推移而减less,从而导致玩家再次降落。

这个function的例子:

 var player = { speed: 180, // movement speed in pixels per second velocity: 400, // sets the falling speed / gravitational pull velocity_m: 1.02, // sets the velocity multiplier anti_veloctiy: -850, anti_veloctiy_m: 0.98, }; // jump function jump(modifier) { if (player.jump == true) { // multiply the anti_velocity player.anti_veloctiy = player.anti_veloctiy * player.anti_veloctiy_m; var x = 0; var y = 0; x = 0; y = (player.anti_veloctiy * modifier); engine.movement(x, y); } }, 

从你的主循环调用这个函数。 然后当你的用户按空间变化
player.jump的值为true。

现在剩下的事情就是检测玩家是否已经降落,并将玩家重新设置为假。 这可以简单地通过添加一些代码到碰撞和移动function来完成。 我们只需添加一个名为height_margin的参数,将碰撞检测偏移几个像素来检查玩家是否在地面上。
这些变化标有变化

 // physics module collision. height_margin is a extra option usually used for checking if the player is on the ground or not. collision: function collision(obj_1, obj_2, *height_margin*) { var collision = Boolean( obj_1.x <= (obj_2.x + obj_2.width) && obj_2.x <= (obj_1.x + obj_1.width) && obj_1.y <= (obj_2.y + obj_2.height) && obj_2.y <= (obj_1.y + obj_1.height + *height_margin*) ); // return position booleans return { collision: collision, }; }, // the movement function takes the change in movement as arguments, and moves the player unless its colliding with something movement: function movement(x, y, *height_margin*) { *// if height_margin is undefined set it to 0. height_margin = height_margin || 0;* new_pos.x = player.x + x; new_pos.y = player.y + y; // check collision for all objects in collision array var index; var collisions = new Array(); for (index = 0; index < c_objects.length; ++index) { var new_collision = engine.collision(new_pos, c_objects[index], *height_margin*); collisions[index] = new_collision.collision; } var it_collides = collisions.indexOf(true) >= 0; if (it_collides == false) { player.x += x; player.y += y; // camera follow player offsetX -= x; offsetY -= y; } *// return it collides for use in external functions return it_collides;* }, 

现在在跳转函数中我们调用这个移动函数:var on_ground = engine.movement(0,0,10);. 然后我们检查on_ground是true还是false,如果on_ground我们设置player.jump为false。

为了实际添加对跳转的支持,我们现在需要添加一个按键处理程序,它将player.jump设置为true,如果var on_ground = engine.movement(0,0,10); 是真的。