javascript - 碰撞检测问题；对某些条件的奇怪 react

Question

如果有人认为此问题过于具体，请随时将其删除。

我在碰撞检测方面遇到了麻烦，我已经了解了一些基本的碰撞检测技术，然后尝试对其进行调整以判断与哪一侧发生碰撞，但是当 Angular 碰撞或 Angular 色具有垂直和垂直方向时，检测似乎会失败碰撞时的水平速度。

这是我的碰撞检测函数:

this.checkCollision = function() {
        var isGround = false;
        var i;

        /*Combines Platforms and Chars so Character Collide with Eachother*/
        var x = platforms[level];
        var y = chars[level];
        var p = x.concat(y);

        /* For Readability */
        var top = this.y;
        var bottom = this.y + this.h;
        var left = this.x;
        var right = this.x + this.w;

        for (i = 0; i < p.length; i++) {
            /* For Readability */
            var pTop = p[i].y;
            var pBottom = p[i].y + p[i].h;
            var pLeft = p[i].x;
            var pRight = p[i].x + p[i].w;

            if (p[i] !== this) {
                if (this.inverted) {

                        /*Vertical-Top*/
                    if ((bottom === pTop) && (right > pLeft && left < pRight)) {

                        this.vy = -gravity;


                        /*Vertical-Near-Top*/
                    } else if ((bottom + this.vy >= pTop && bottom <= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = pTop - bottom;

                        /*Vertical-Bottom*/
                    } else if ((top === pBottom) && (right > pLeft && left < pRight) && (this.vy <= 0)) {

                        isGround = true;
                        this.onGround = true;

                        /*Vertical-Near-Bottom*/
                    } else if ((top + this.vy <= pBottom && top >= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = pBottom - top + gravity;

                    }
                } else {

                        /*Vertical-Top*/
                    if ((bottom === pTop) && (right > pLeft && left < pRight)) {

                        if (p[i].bouncy) {
                            this.vy = -(this.jumpVelocity * 1.2);
                        } else if (p[i] instanceof Char && !p[i].inverted) {
                            this.vx = this.current ? this.vx : p[i].vx;
                            if (p[i].onGround) {
                                isGround = true;
                                this.onGround = true;
                            } else {
                                this.vy = p[i].vy;
                            }
                        } else {
                            this.vx = this.current ? this.vx : 0;
                            isGround = true;
                            this.onGround = true;
                        }

                        /*Vertical-Near-Top*/
                    } else if ((bottom + this.vy >= pTop && bottom <= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = pTop - bottom - gravity;

                        /*Vertical-Bottom*/
                    } else if ((top === pBottom) && (right > pLeft && left < pRight)) {

                        this.vy = gravity;

                        /*Vertical-Near-Bottom*/
                    } else if ((top + this.vy <= pBottom && top >= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = top - pBottom;

                    }
                }
                /*Horizontal-Left*/
                if ((right === pLeft) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx > 0)) {

                    this.vx = 0;

                    /*Horizontal-Left-Near*/
                } else if ((right + this.vx >= pLeft && right <= pRight) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx > 0)) {

                    this.vx = pLeft - right;

                    /*Horizontal-Right*/
                } else if ((left === pRight) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx < 0)) {

                    this.vx = 0;

                    /*Horizontal-Right-Near*/
                } else if ((left + this.vx <= pRight && left >= pLeft) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx < 0)) {

                    this.vx = pRight - left;

                }
            }
        }
        if (!isGround) {
            this.onGround = false;
        }
    };

剩下的代码就是这里的JSFiddle(按T键进入包含所有字符的测试级别):http://jsfiddle.net/v5hhpt57/1/

此外，我建议使用全屏结果，因为 Canvas 似乎不太适合 JSFiddle 页面:http://tinyurl.com/twa-js (不是 JSFiddle，而是 Google 网站托管，因为 JSFiddle 存在困难)

对于特定问题，在测试关卡中，将红色从蓝色上方移开，将粉色向右移动一点，然后尝试将紫色弹到蓝色上方。

最后不要介意在地面上的漂浮和下沉，那是在碰撞处理端。

再说一次:如果有人认为这个问题太具体，请随时将其删除。

Answer 1

我也在用 Canvas 制作游戏。我还是个初学者，但已经为我的在线网络游戏打下了一些基础知识。我认为这里的碰撞几乎就像我的游戏鼠标一样。

Xerror = 2
Yerror = 3
monster_width = 20
monster_height = 20
mouseX  = evt.clientX-Xerror  //My mouse X position in canvas map
mouseY  = evt.clientY-Yerror  //My mouse Y position in canvas map   

for monster in all_monsters  //looping trough all monsters
if mouseX > monster.x_position[monster.id]-monster_width/2+Xerror*4  and mouseX< 
            monster.x_position[monster.id]+monster_width/2+Xerror*4  and mouseY>
            monster.y_position[monster.id]-monster_height/2+Yerror*2 and mouseY<
            monster.y_position[monster.id]+monster_height/2+Yerror*4    
// then my mouse is over one of the monsters

这些 X 错误可能是因为 Canvas 的小边框，不知道，但如果没有这些，我会得到错误的输出。但我还从 2 中减去怪物的宽度/高度，以获得中心。 (我的怪物只是立方体)。

我自己的游戏位于gamegame.herokuapp.com，ID testeris，PWD testeris。如果您想联系我，请发送电子邮件至 magimantas@yahoo.com。我热衷于使用 canvas、Ruby on Rails、Backbone.js、coffeescript 制作在线游戏。与其他喜欢使用 Canvas 创建游戏的人交谈会很有趣:)