HTML5 canvas中的碰撞檢測。 也優化

Question

我正在做一個平台游戲，但是我的碰撞檢測有問題。 我已經制作了一個在屏幕/地圖上繪制圖塊的函數。 我的碰撞檢測功能就是該功能，當只繪制一個圖塊時，它可以正常工作，但是當我用三個圖塊創建“樓梯”時，第一個圖塊無法正常工作。 玩家只是被“推”到瓷磚上。 側面檢測不起作用。 其他瓷磚工作正常。

這是碰撞檢測和圖塊繪制的代碼：

//Function that allows you to draw a tile
function drawTile(type, x, y, collision){
    var tileImg = new Image();
    tileImg.onload = function(){
        ctx.drawImage(tileImg, x, y)
    };
    tileImg.src = "images/" + type + ".png";

    if (collision){
        //Worst collision detection ever.
        if((player_x + player_width == x) && (player_y + player_height > y)){
            canMoveRight = false;
        }else if((player_x == x + 32) && (player_y + player_height > y)){
            canMoveLeft = false;
        }else if((player_y + player_height > y) && (player_x + player_width >= x) && (player_x + player_width <= x + 64)){
            player_y = y - player_height;
        }else{
            canMoveRight = true;
            canMoveLeft = true;
        }
    }
}

//Draw the map
function drawMap(){
    drawTile("block", 96, 208, true);
    drawTile("block", 128, 208, true);
    drawTile("block", 128, 176, true);
};

如您所見，碰撞檢測代碼有點爛。 因此，如果您向我展示了更好的制作方法，那也將很好。

只要說出您是否需要知道一些知識即可。 :)

Answer 1

我知道這對您來說聽起來像是可怕的開銷，但是您應該考慮使用“場景圖”來處理所有碰撞檢測，繪制甚至單擊屏幕上的事件。

場景圖基本上是一種表示1-parent到n-child關系的樹數據結構（注意：每個HTML頁面的DOM也是一個場景圖）

因此，為達到這一目的，您將擁有一個稱為“節點”的基本接口或抽象類，或者諸如此類的東西，代表了sceneGraph中每個節點必須實現的接口。 同樣，就像dom中的Elements一樣，它們都具有CSS屬性，事件處理方法和位置修飾符。

節點：

{
    children: [],

    update: function() {
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update();
        }
    },

    draw: function() {
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw();
        }
    }
}

現在，您可能知道，如果您每次移動，定位或其他操作時都在DOM中移動一個元素，那么所有子元素會自動與其父元素一起移到新位置，此行為是通過轉換繼承實現的，為簡單起見，我不會顯示3D轉換矩陣，而只是顯示平移（x，y偏移量）。

節點：

{
    children: [],
    translation: new Translation(),


    update: function(worldTranslation) {
        worldTranslation.addTranslation(this.translation);

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update(worldTranslation);
        }

        worldTranslation.removeTranslation(this.translation);
    },

    draw: function() {
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw();
        }
    }
}

轉型：

{
    x: 0,
    y: 0,

    addTranslation: function(translation) {
        this.x += translation.x;
        this.y += translation.y;
    },

    removeTranslation: function(translation) {
        this.x -= translation.x;
        this.y -= translation.y;
    }
}

（請注意，我們不實例化新的翻譯對象，因為它便宜了，只需在全局翻譯中添加/刪除值即可）

現在，您的worldTranslation（或globalTranslation）功能具有節點可以從其父節點繼承的所有偏移量。

在進行碰撞檢測之前，我將展示如何使用此技術繪制精靈。 基本上，您將使用位置圖像對填充繪制循環中的數組

節點：

{
    children: [],
    translation: new Translation(),

    image: null, //assume this value is a valid htmlImage or htmlCanvas element, ready to be drawn onto a canvas
    screenPosition: null, //assume this is an object with x and y values like {x: 0, y: 0}

    update: function(worldTranslation) {
        worldTranslation.addTranslation(this.translation);

        this.screenPosition = {x: worldTranslation.x, y: worldTranslation.y};

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update(worldTranslation);
        }

        worldTranslation.removeTranslation(this.translation);
    },

    draw: function(spriteBatch) {

        spriteBatch.push({
            x: this.screenPosition.x,
            y: this.screenPosition.y,
        });

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw(spriteBatch);
        }
    }
}

渲染功能：

function drawScene(rootNode, context) {
    //clear context here

    var spriteBatch = [];
    rootNode.draw(spriteBatch);

    //if you have to, do sorting according to position.x, position.y or some z-value you can set in the draw function

    for(var i = 0; i < spriteBatch.length; i++) {
        var sprite = spriteBatch[i];

        context.drawImage(sprite.image, sprite.position.x, sprite.position.y);
    }
}

現在，我們已經對從sceneGraph繪制圖像有了基本的了解，接下來我們進行碰撞檢測：

首先，我們需要節點具有BoundryBoxes：

框：

{
    x: 0,
    y: 0,

    width: 0,
    height: 0,

    collides: function(box) {
        return !(
                ((this.y + this.height) < (box.y)) ||
                (this.y > (box.y + box.height)) ||
                ((this.x + this.width) < box.x) ||
                (this.x > (box.x + box.width))
            );
    }
}

在2D游戲中，我更喜歡邊界框不在其所在節點的坐標系中，而是讓其知道其絕對值 。 通過CSS的解釋：在CSS中，您可以設置邊距和填充，這些值不取決於頁面，而是僅存在於設置了這些值的元素的“坐標系”中。 所以就像位置：絕對和左：10px vs margin-left：10px; 2D的好處是我們不需要一直在SceneGraph上冒氣泡以找到檢測點，並且我們不必從當前坐標系->進入世界坐標系->返回每個節點進行碰撞檢測就可以計算出盒子。

節點：

{
    children: [],
    translation: new Translation(),

    image: null,
    screenPosition: null,

    box: null, //the boundry box

    update: function(worldTranslation) {
        worldTranslation.addTranslation(this.translation);

        this.screenPosition = {x: worldTranslation.x, y: worldTranslation.y};

        this.box.x = worldTranslation.x;
        this.box.y = worldTranslation.y;
        this.box.width = this.image.width;
        this.box.height = this.image.height;

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].update(worldTranslation);
        }

        worldTranslation.removeTranslation(this.translation);
    },

    collide: function(box, collisions) {
        if(this.box.collides(box)) {
            collisions.push(this);
        }

        //we will optimize this later, in normal sceneGraphs a boundry box asures that it contains ALL children
        //so we only will go further down the tree if this node collides with the box
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].collide(box, collisions);
        }
    },

    draw: function(spriteBatch) {

        spriteBatch.push({
            x: this.screenPosition.x,
            y: this.screenPosition.y,
            image: this.image,
        });

        for(var i = 0; i < this.children.length; i++) {
            this.children[i].draw(spriteBatch);
        }
    }
}

碰撞功能：

function collideScene(rootNode, box) {
    var hits = [];

    rootNode.collide(box, hits);

    for(var i = 0; i < hits.length; i++) {
        var hit = hits[i];

        //your code for every hit
    }
}

注意：並非每個節點都必須代表一個圖像，您可以創建節點以僅向其子級添加平移，例如制作沒有視覺效果的DIV容器來排列一堆對象，而只需要編輯一個位置即可。 一個角色可以包括：

CharacterRoot (Translation Only)
    CharacterSprite (Image)
    Weapon (Image)
    Shield (Image)

現在，這些只是游戲中使用的場景管理的一些基礎知識，您可以在我在這里使用的許多插件上搜索Google，進行一些進一步的優化，並隨時提出任何問題。

Answer 2

使用盒碰撞檢測，分別比較x和y很重要。 這是我過去做過類似事情的偽代碼：

var o1 = {x:100, y:229, w:30, h:30};
var o2 = {x:100, y:200, w:30, h:30};

//Amount of overlap
leftDist    = (o2.x - o2.w/2) - (o1.x + o1.w/2);
rightDist   = (o1.x - o1.w/2) - (o2.x + o2.w/2);
topDist     = (o2.y - o2.h/2) - (o1.y + o1.h/2);
bottomDist  = (o1.y - o1.h/2) - (o2.y + o2.h/2);


if( leftDist    < 0 &&
    rightDist   < 0 &&
    topDist     < 0 &&
    bottomDist  < 0 ){

    //Get the closest collision
    var closest;
    var direction; //0 = left, 1 = right, 2 = top, 3 = bottom


    var xDist = o1.x - o2.x;
    var yDist = o1.y - o2.y;

    if(xDist < 0) {
        closest = leftDist;
        direction = 0;
    } else {
        closest = rightDist;
        direction = 1;
    }


    if(yDist < 0) {
        if(closest < yDist) {
            closest = topDist;
            direction = 2;
        }
    } else {
        if(closest < yDist) {
            closest = bottomDist;
            direction = 3;
        }
    }



    //Last, jump to the contact position
    switch(direction) {

        case 0:
            o1.x += closest;
            break;
        case 1:
            o1.x -= closest;
            break;
        case 2:
            o1.y += closest;
            break;
        case 3:
            o1.y -= closest;
            break;

    }


}

如果您有任何疑問，請告訴我。