如何正确地从每一侧(顶部、左侧、底部、右侧)创建 2d 对象碰撞 [英] How do I create 2d object collision from every side(top,left,bottom,right) properly

问题描述

只是为不想阅读一大堆文字的人添加此内容，至少阅读此内容并查看图片以了解我的问题；
我在玩家"和物体"之间设置了碰撞，这样当玩家"碰到物体"的左边"时，玩家"就会被放到物体"的左边".(这就是我要的).但我希望玩家能够击中物体的任何一侧(顶部"、左侧"、右侧"、底部")并适当放置.所以看上面的图片，基本上我试图在黑色方块和其他物体之间创建碰撞.黑色方块是玩家"对象，灰色方块是编号为墙"的对象，红色方块是下一级"对象.我已经完成了这个，但它有点混乱，当涉及到移动墙壁对象时，玩家碰撞不再像我希望的那样工作.所以无论如何这是我的墙"代码:

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;      }
}; 

我刚刚为 wall1、2、3 等复制了相同的代码.我确定有更好的方法可以做到这一点，如果有人可以建议更好的方法吗?我尝试在 2 个不同的地方绘制相同的精灵，但无法弄清楚如何正确实现这一点.我有不同的墙壁"对象的主要原因是因为我需要根据玩家"与墙壁"对象碰撞的位置在不同的位置绘制玩家"对象.如果玩家从左边飞进来，player1.drawX = wall1.drawX - player width.但是如果玩家从顶部飞进来，player1.drawY = wall1.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;
}

我再次实现了玩家"和墙壁"之间的碰撞，但只是为每个墙壁"创建了一个单独的函数，当我想在不同的地方绘制墙壁"时，这不起作用.如果这看起来很多，我很抱歉，我试图只包含相关的代码.非常感谢任何帮助/建议.

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 >= wall1.x && player1.Y===walls1.Y) 或者类似的事情，因为归结为在玩家的不同侧面有 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 = false.对于任何想知道 -16 的人来说，那是墙的一半宽度，所以玩家必须击中墙的中心才能放置在墙旁边，因为我有 fps(我猜反正)你永远不会看到玩家进入墙壁对象的内部，因此实际上看起来玩家完美地撞到了墙壁.-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屋！