Question

试图在我的游戏中实现碰撞。

我对如何测试图块的碰撞存在问题，因此碰撞无效。

我有一个如下所示的数组：

var coll_array = [
[[tile_index],[x],[y]] 
]

图块索引是图像映射中使用的图块编号，x是x位置，y是图块的y位置。

基本上如果tile_index不为0，那么玩家应该碰撞到这个区块，这就是我想要实现的目标。

请参阅代码示例的更新

由于某种原因，变量碰撞保持返回假，虽然我不知道为什么，但我相信它与我的阵列设置的方式有关。

非常感谢任何帮助。我有游戏here

的实时版本

username = guest

密码=来宾。

请使用新游戏，以便您可以看到正确的console.log

我已将数组的控制台日志添加到播放器功能中，以便您可以看到它的设置方式。

三江源

更新

好的，所以经过一些更多的代码现在看起来像这样：

function Player()
{
  var sprite = new Sprite(),
   collision_array,
   collided,
   x,
   y,
   w = sprite.width,
   h = sprite.height,
   gameW = canvas.width,
   gameH = canvas.height-192,
block_x,
    block_y,
    block_cx,
    block_cy,
    combined_hw = 32,
    combined_hh = 32,
   player_cx,
   player_cy;

this.keys = [];
// What delay do we want to use between switching sprites (in milliseconds)
this.moveSpeed = 4;
this.player = null;

this.init = function(coll_data){
    collision_array = coll_data;
    console.log(collision_array);
};

this.init_Player = function(pos_X, pos_Y){
  this.player = sprite.load("player");
   x = pos_X;
   y = pos_Y;
};

this.update = function(elapsed) {
    // perform a switch statement on the last key pushed into the array
    // this allows us to always move the direction of the most recently pressed
    // key

    switch (this.keys[this.keys.length - 1])
    {
        case 37:
            // move the player left on the screen
            x -= this.moveSpeed * elapsed;
            break;
        case 38:
            // move the player up on the screen
            y -= this.moveSpeed * elapsed;
            break;
        case 39:
            // move the player right on the screen
            x += this.moveSpeed * elapsed;
            break;
        case 40:
            // move the player down on the screen
            y += this.moveSpeed * elapsed;
            break;
    }
    if (x < 0)
    {
        x = 0;
    }
    if (x >= gameW - w)
    {
        x = gameW - w;
    }
    if (y < 0)
    {
        y = 0;
    }
    if (y >= gameH - h)
    {
        y = gameH - h;
    }

    player_cx = x+(32/2);
    player_cy = y+(32/2);

    collision_array.forEach(function(row) {
        for(var i = 0; i<row.length;i++){
            if(row[i][0] != 0){
                block_x = row[i][1];
                block_y = row[i][2];
                block_cx = block_x+(32/2);
                block_cy = block_y+(32/2);

            }

        }
        collided = Math.abs(player_cx - block_cx)< combined_hw
            && Math.abs(player_cy - block_cy)< combined_hh;
    });

    if(collided)
    {
        console.log("COLLIDED!")
    }
    return {
        'pos_X':x,
        'pos_Y':y
    };
};

this.draw = function() {
    ctx.drawImage(this.player,x, y, w ,h);
};
}

这有效，但它仅适用于存储在数组中的最后位置，例如在右下角，你能看到我哪里出错了吗？

Answer 1

我只是很快阅读了这篇文章，但你说它只适用于最后一个块，或许你应该尝试。

 collided |= Math.abs(player_cx - block_cx)< combined_hw
            && Math.abs(player_cy - block_cy)< combined_hh;

ORing发生冲突，以便在任何块发生碰撞时都是如此。

Answer 2

好的，所以我设法与固体块碰撞，并且会出现对话区域！

我已将代码上传到实际网站here，如果你想看看它是如何完成的。

为了澄清这一切都是从一个平铺的地图编辑器JSON文件完成的。我想这对任何人都有用，所以当我有机会的时候我会把它放在git上，而我甚至将它作为教程用于教程，因为我发现如果这么难找到资源。

感谢任何帮助过的人。

碰撞阵列无法正常工作javascript

2 个答案: