Question

我正在创建一个HTML5平台游戏，使用对象进行碰撞检测并使用2D图块地图来渲染关卡。这一切都在发挥作用。

我想使用相同的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

看看你想要做什么，你的实现太复杂了。而不是寻找bug（我会使用devTools并逐行遍历代码以找到问题所在。）我使用while循环重写了函数以找到连接的tile的宽度。

我对对象属性名称采取了自由，但我相信你可以根据自己的需要进行更改。

＆＃13;

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,".");
                          }, ""
                     )
               }
         )
   );
}

＆＃13;

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

＆＃13;

从HTML5平铺地图

1 个答案: