如何创建从各个侧面的2D物体的碰撞（上，左，下，右）正确 [英] How do I create 2d object collision from every side(top,left,bottom,right) properly

问题描述

刚刚添加该为老百姓不看读了一大堆文字，至少阅读和看图片来了解我的问题;
我有碰撞成立了球员和物之间，这样，当球员打的左的对象的选手被放至左的对象的。 （这就是我想要的）。不过，我想玩家能够击中任何一方（顶，左，右，底）的对象，并进行适当的放置。 所以在看上面的图片，基本上我想创建的黑色方形和其余对象之间的碰撞。黑方块是玩家的对象，灰色方块numberd墙的对象，而红色广场是更上一层楼的对象。 我已经做到了这一点，但它是一种混乱的，当它涉及到移动的墙对象，玩家碰撞不再工作，因为我想这一点。 所以无论如何这是我的墙codeS：

Just adding this for the people not looking to read a whole bunch of text, at least read this and look at the picture to understand my question;
I have collision set up between the "player" and "objects", so that when the "player" hits the "Left" of the "object" the "player" is put to the "Left" of the "object". (this is what i want). But I would like the player to be able to hit any side ("top","left","right","bottom") of the object and be placed appropriately. So looking at the image above, basically I am trying to create collision between the black square and the rest of the objects. The black square is the "player" object, the gray squares are numberd "wall" objects, and the red square is the "next level" object. I have accomplished this, but it is kind of messy and when it comes to moving the wall objects, the player collision no longer works as I would like it too. So anyway here is my "walls" codes:

var canvasWalls1 = document.getElementById('canvasWalls');
var ctxWalls1 = canvasWalls.getContext('2d');
var walls1 = new Walls1();
var imgSprite = new Image();
imgSprite.src = 'sprite.png';
imgSprite.addEventListener('load',init,false);

WallLeft.prototype.draw = function (){
    ctxWalls1.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
this.checkHitPlayer();
};
WallLeft.prototype.checkHitPlayer = function() {
if (this.drawX > player1.drawX &&
this.drawX <= player1.drawX + player1.width &&
this.drawY >= player1.drawY &&
this.drawY < player1.drawY + player1.height) {
player1.isUpKey = false;
player1.isDownKey = false;
player1.isRightKey = false;
player1.isLeftKey = false;
player1.drawX = this.drawX - player1.width - 0.05;
player1.drawY = this.drawY - 0.05;      }
}; 

我只是复制相同的$ C $下wall1,2,3，...等等。我敢肯定有这样做的，如果有人也许可以提出一个更好的一个更好的办法？我心中已经试图绘制同样的精灵在2个不同的地方，但无法弄清楚如何正确地实现这一目标。主要的原因，我有不同的墙对象，是因为我需要绘制了玩家的对象在不同的​​位置，不同的地方了玩家与墙物体碰撞。 如果玩家从左蝇类中， player1.drawX = walls1.drawX - 播放器宽度。 但是，如果玩家从顶部， player1.drawY = walls1.drawY + player1.height 蝇类研究。 我需要所有的碰撞才能够发生在任何墙的对象，究其原因是因为我重新使用的所有每当玩家对象达到完成了墙的对象。 如果我知道一个更好的系统，也许我可以继续使用碰撞系统我有。反正这里是当球员打完成的对象会发生什么：

I just copied the same code for wall1,2,3,.. etc. I'm sure there is a better way of doing this is if anybody could maybe suggest a better one? I'v tried drawing the same sprite in 2 different places, but can't figure out how to properly achieve this. The main reason I have different "walls" objects is because I need to draw the "player" object In a different position depending on where the "player" collides with the "wall" object. If the player flys in from the Left, player1.drawX = walls1.drawX - player width. But if the player flys in from the top, player1.drawY = walls1.drawY + player1.height. The reason I need all collisions to be able to happen on any "wall" object, Is because i re-use all of the "wall" objects whenever the "player" object reaches the "finish". If i knew of a better system, maybe I could continue using the collision system I have. anyways here is what happens when the "player" hits the "finish" object:

Finish.prototype.checkHitPlayer = function() {
if (this.drawX >= player1.drawX &&
this.drawX <= player1.drawX + player1.width &&
this.drawY >= player1.drawY &&
this.drawY <= player1.drawY + player1.height) {
increaseLevel();
} };
function increaseLevel() {
Level+=1;
if (Level===2) {
drawlevel2(); }
function drawlevel2()
{
player1.drawX = 288;
player1.drawY = 160;
walls1.drawX = 448;
walls1.drawY = 160;
walls2.drawX = 416;
walls2.drawY = 320;
walls3.drawX = 192;
walls3.drawY = 288;
finish1.drawX = 224
finish1.drawY = 96;
}

在播放器和墙，而只能通过对每一个墙，当我想画的墙在不同的地方不工作，创建一个单独的函数之间我又已经完成了碰撞。 我很抱歉，如果这似乎是一个大量阅读，我想只包括相关的code。任何帮助/建议是多AP preciated。

Again I have accomplished collision between the "player" and the "walls", but only by creating a separate function for every "wall", which doesn't work when I want to draw the "walls" in different places. I apologize if this seems like a lot to read, I tried to only include the relevant code. Any help/suggestions is much appreciated.

推荐答案

于是我想出了一个一个适合什么，我试图做的方法。我不能使用类似 （player1.x＆GT; = wall1.x和放大器;＆安培; player1.Y === walls1.Y）或事物similair因为当它来到了上有4个对象播放器的型动物两侧...玩家的X值将必须是比一个壁比另一个更高和更低。相同的Y值。 （这也使得它的那种波涛汹涌。）反正这里是我使用的是什么：

So I figured out a method that works for what I am trying to do. I can't use something like (player1.x >= wall1.x && player1.Y===walls1.Y) Or things similair because when it came down to having 4 objects on differents sides of the player... The player's X value would have to be higher than a wall and lower than another. Same as the Y value. (this also makes it kind of choppy.) Anyways here is what I used:

Player.prototype.checkHitWall = function() {
this.TopY = this.drawY; this.BottomY = this.drawY + this.height; this.LeftX = this.drawX; this.RightX = this.drawX + this.width;
if (this.LeftX===walls1.x + walls1.width - 16 && this.drawY===walls1.y) //If player  flys in from the RIGHT of wall1
{
player1.isUpKey = false; player1.isDownKey = false; player1.isRightKey = false; player1.isLeftKey = false;
upkey = false;
rightkey = false;
downkey = false;
leftkey = true;
this.drawX = walls1.x + walls1.width;
this.drawY = walls1.y;

然后，我添加的功能，使leftkey =假，当球员打墙，或在游戏重新启动。任何人想知道的-16，这就是墙面的一半宽，所以玩家必须打在了墙上的中心，才能被放在旁边的墙上，帧率的，因为我有（反正即时猜测）你永远不要看到玩家走壁对象的里面，所以它实际上看起来像球员撞到墙完美。究其原因，-16是这样，当玩家试图完美地去左/与墙右侧的播放器上面，墙上没有检测到碰撞。

Then I added functions to make the leftkey = false when the player hits a wall, or the game restarts. for anyone wondering about the -16, thats half the wall's width, so the player must hit the center of the wall in order to be placed next to the wall, because of the fps i have (im guessing anyway) You don't ever see the player go inside of the wall object, so it actually looks like the player hits the wall perfectly. The reason for the -16 is so that when the player tries to go left/right with a wall perfectly above the player, the wall doesn't detect a collision.

这篇关于如何创建从各个侧面的2D物体的碰撞（上，左，下，右）正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！