1

私はこれに対する答えを何度も探してきましたが、何も見つかりませんでした。

タイル ベースのゲームで衝突検出を行おうとしています。タイルの幅と高さは 32px で、これがマップの作成方法です。

function map(){
    var tileset = new Image();
    tileset.src = "images/tileset.png";
    var mapIndexOffset = -1;
    var rows = 16;
    var col = 24;
    var tileMap = [

     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]

    ];

    for(mapRows = 0; mapRows < rows; mapRows++){
        for(mapCol = 0; mapCol < col; mapCol++){
            var tileId = tileMap[mapRows][mapCol]+mapIndexOffset;
            var sourceX = tileId * 32;
            var sourceY = 0;
            var tileW = 32;
            var tileH = 32;
            var tileX = mapCol * 32;
            var tileY = mapRows * 32;

            ctx.drawImage(tileset, sourceX, sourceY, tileW, tileH, tileX, tileY, tileW, tileH);

        }
    }
}

それから私はそのようなことをしました(このforループの中で。):

if(tileId == 1){//1 is actually 2
    //collision detection here...
}

したがって、tileIdが 1 ( tileMap配列では 2) の場合、衝突が発生します。そしてそれは機能しますが、マップ上に 1 つのタイルが存在する場合のみ、それ以上のタイルがある場合、衝突は最後のタイルに対してのみ機能します。

多くのタイル ベースのゲームのように、プレーヤーは 32 ピクセルではなく 3 ピクセルごとに移動します。

ここに私の衝突検出コードがあります:

var leftCollision   = o1x + o1w == o2x && o1y + o1h >= o2y && o1y <= o2y + o2h;
var topCollision    = o1y + o1h == o2y && o1x + o1w >= o2x && o1x <= o2x + o2w;
var rightCollision  = o1x == o2x + o2w && o1y + o1h >= o2y && o1y <= o2y + o2h;
var bottomCollision = o1y == o2y + o2h && o1x + o1w >= o2x && o1x <= o2x + o2w;

if(leftCollision){
    //left collision is true
}else if(rightCollision){
    //right collision is true
}else if(topCollision){
    //top collision is true
}else if(bottomCollision){
    //bottom collision is true
}

  • o1はプレーヤーです。

  • o2はタイルです。

プレーヤーの幅は 32 ピクセル、高さは 48 ピクセルです。

4

0 に答える 0