HTML5画布中的碰撞检测。优化也 [英] Collision detection in HTML5 canvas. Optimization too

问题描述

我正在做一个平台游戏，但我有一个碰撞检测的问题。我做了一个功能，在屏幕/地图上绘制一个瓷砖。在该功能是我的碰撞检测，它工作正常，当只有一个瓷砖绘制，但是当我创建楼梯与三个瓷砖，第一个瓷砖不能正常工作。玩家只是被推在瓷砖上。侧面检测不工作。

I am making a platform game, but i have a problem with my collision detection. I've made a function that draws a tile on the screen/map. In that function is my collision detection, it works fine when only one tile is drawn, but when i created "stairs" with three tiles, the first tile doesnt work propertly. The player is just being "pushed" up on the tile. The side detection isn't working. And the other tiles are working just fine.

以下是碰撞检测和图块绘制的代码：

Here is the code for collision detection and tile drawing:

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

正如你所看到的，碰撞检测代码有点糟糕。所以，如果你给我更好的方法，它也会是好的。

As you can see, the collision detection code kinda sucks. So it also would be good if you showed me better ways of making it.

只要说你需要知道的东西。 ：）

Just say if you need to know something. :)

推荐答案

使用箱子碰撞检测，分别比较x和y很重要。这里是我做过类似的过去的伪代码：

With box collision detection, it's important to compare the x and y separately. Here's the pseudo code for how I've done something similar the past:

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;

    }


}

如果您对此有任何疑问，请与我们联系。

Let me know if you have any questions about it.

这篇关于HTML5画布中的碰撞检测。优化也的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！