从多维数组为 HTML5 瓦片地图生成碰撞对象

Question

我正在创建一个 HTML5 平台游戏，使用对象进行碰撞检测并使用 2d 平铺地图来渲染关卡。一切正常。

我想使用相同的二维数组来动态构建对象数组，以允许玩家根据需要构建地图，同时也便于首先创建地图。在对对象数组进行硬编码时，一切正常，因此我知道碰撞检测和游戏引擎正常工作。

虽然我可以为每个单独的数组元素创建对象，但我希望根据数组中匹配元素的数量（每个元素为 25x25）构建具有宽度的对象，即如果 3 个数组元素为 1,1， 1 那么对象的宽度将为 75。也许一些代码会帮助解释：

下面的瓦片数组

var arr1 = [
    [0,0,0,1,1,1,1,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,2,2,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [3,3,3,0,0,0,0,0,0,0]
];

应该产生以下对象数组：

[
    {x: 75, y: 0, width: 100, height: 25, value: 1},
    {x: 75, y: 50, width: 50, height: 25, value: 2},
    {x: 0, y: 100, width: 75, height: 25, value: 3}
]

但它却产生了以下内容：

[
    {x: 75, y: 0, width: 25, height: 25, value: 1},
    {x: 100, y: 0, width: 25, height: 25, value: 1},
    {x: 125, y: 0, width: 25, height: 25, value: 1}
]

我的逻辑显然是错误的，但我终生无法理解。

示例代码如下：

非常感谢任何帮助：

var tmpObj = {};
var objArr = [];
var arr1 = [
    [0,0,0,1,1,1,1,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,2,2,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [3,3,3,0,0,0,0,0,0,0]
];

for (let i=0; i<arr1.length; i++) {
    for (let j=0; j<arr1[i].length; j++) {
        if (arr1[i][j] > 0 && arr1[i][j] < 6) { // platform blocks only 1 - 5
            if (tmpObj.x === undefined) {
                tmpObj = {
                    x: j * 25,
                    y: i * 25,
                    width: 25,
                    height: 25,
                    value: arr1[i][j]
                }
            } else if (arr1[i][j] == arr1[i][j-1] && arr1[i][j] == tmpObj.v) {
                tmpObj.w += 25;
            } else if (arr1[i][j] !== tmpObj.v) { // new tile type
                objArr.push(tmpObj);
                tmpObj = {
                    x: j * 25,
                    y: i * 25,
                    width: 25,
                    height: 25,
                    value: arr1[i][j]
                }
            } else {
                objArr.push(tmpObj);
                tmpObj = {};
            }
        }
    }
}
console.log(objArr);

Answer 1

查看您要执行的操作太复杂了。而不是寻找错误（为此我会使用 devTools 并逐行遍历代码以查找问题所在。）我使用 while 循环重写了该函数以查找连接图块的宽度。

我随意使用对象属性名称，但我相信您可以根据需要进行更改。

const objArr = [];
const arr1 = [
    [0,0,0,1,1,1,1,0,1,0],
    [2,0,0,0,0,0,0,0,0,3],
    [0,0,0,4,4,0,4,4,4,4],
    [0,0,0,0,0,0,0,0,0,0],
    [3,3,3,5,5,4,0,0,0,0]
];
const tileSize = 25;

for (let i = 0; i < arr1.length; i++) {
    const row = arr1[i]
    for (let j = 0; j < row.length; j++) {
        if (row[j] > 0 && row[j] < 6) {
            let count = j + 1;
            while (count < row.length && row[count] === row[j]) { count += 1 }
            objArr.push({
                x: j * tileSize,
                y: i * tileSize,
                w: tileSize * (count - j),
                h: tileSize,
                tile: row[j]
            });
            j = count - 1;
        }
    }
}

// show results
objArr.forEach(log);









// unrelated to answer. (I hate the console SO has for snippets.)
function log(data){
    show.appendChild(
        Object.assign(
            document.createElement("div"), {
                textContent : 
                     Object.keys(data).reduce((str, key) => {
                          return str + (" " + key+ ": " + data[key]).padEnd(8,".");
                          }, ""
                     )
               }
         )
   );
}                     

<code id="show"></code>