2

我有以下小提琴（单击 1 查看板）：http: //jsfiddle.net/mauricederegt/vNpYe/1/

var levels = [它从靠近脚本底部的部分创建一系列 div 。脚本的以下部分循环通过它来构建板：

for (var i = 0, lngi = levels[level].length; i < lngi; i++) {
                for (var j = 0, lngj = levels[level][i].length; j < lngj; j++) {
                    if (levels[level][i][j] > 0) {
                    etc etc....

这一切都很好。问题是，我想添加另一层块。在当前脚本中，我注释掉了名为//layer2. 完成第 1 层后，我想再次循环它以在第 1 层之上添加第 2 层（以及稍后的更多层），因此它看起来像这样： 在此处输入图像描述

当然需要做一些代码扩展。例如，z-index需要添加 a 并且需要重新编写循环。

我不擅长编码，但我做了一些尝试来做到这一点。看看我的尝试这个小提琴。我已经用以下内容标记了这些行：//NEW added: etc我在其中添加了一些东西来完成这项工作：http: //jsfiddle.net/mauricederegt/PCmws/1/

小提琴不起作用，因为编码还不完全正确。希望有人可以在这里帮助我。我错过了什么/做错了什么？

亲切的问候

4

1 回答 1

1

让我们分解一下您目前的位置以及您想要实现的目标：

  • 您当前有一个循环遍历每一行并向该行添加图块。
  • 您当前有一个循环遍历每一层并向该层添加行。
  • 您现在需要的是一个循环，它遍历每个级别并将层添加到该级别。

在进一步讨论之前，我要求您为变量使用更详细的名称。虽然i，j并且lngi在上下文中可能有意义，但在我看来，最好用冗长来牺牲简洁性。
好吧，至少在开发和原型设计期间。

例如，如果您使用诸如currentLevel和currentRow之类的东西，它会使诸如此类的事情currentTileType = currentRow[currentColumnIndex]变得更加简单/直接:)

当然，总会有平衡，这纯粹是个人喜好/意见，但也许通过这个例子，我可以把你带到黑暗的一面……;）

Soo..让我们陷入困境......您将看到的主要变化是以下新增内容..

从逻辑上讲，与其中一个循环说“对于这一行中的每一列，我想这样做”的方式相同，它实际上只是包装现有循环说“对于我定义的每一层，我想做这（画出这些行）……”

       var currentGame = levels;

        console.info("currentGame = ", levels);

        // //Loop through levels in game
        // for (var currentLevelIndex = 0, numLevelsInGame = currentGame.length; currentLevelIndex < numLevelsInGame; currentLevelIndex++) {
            // var currentLevel = currentGame[currentLevelIndex];

            var currentLevel = currentGame[levelIndex];

            //Loop through layers in level
            for (var currentLayerIndex = 0, numLayersInLevel = currentLevel.length; currentLayerIndex < numLayersInLevel; currentLayerIndex++) {
                var currentLayer = currentLevel[currentLayerIndex];

                //Loop through rows in layer
                for (var currentRowIndex = 0, numRowsInLayer = currentLayer.length; currentRowIndex < numRowsInLayer; currentRowIndex++) {
                    var currentRow = currentLayer[currentRowIndex];

                    //Loop through columns in row
                    for (var currentColIndex = 0, numColsInRow = currentRow.length; currentColIndex < numColsInRow; currentColIndex++) {
                        var currentTileType = currentRow[currentColIndex];

                        //Do stuff based on what you have specified the current tile type as.. eg create it!!

请参阅此小提琴以获取更新版本：http: //jsfiddle.net/vNpYe/4/

一旦你了解了这里发生的事情，将图层的 z-index 设置为“currentLayerIndex”（或其派生值）就很简单了

于 2013-03-11T11:27:48.953 回答