Question

我有以下小提琴（点击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的部分。当完成layer1时，我想再次循环它以在第1层顶部添加第2层（稍后会有更多层），所以它看起来像这样： enter image description here

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

我在编码时并不是那么出色，但我做了一些尝试才能做到这一点。看到这个小提琴我的尝试。我用//NEW added: etc标记了这些行，其中我添加了一些东西来完成这项工作： http://jsfiddle.net/mauricederegt/PCmws/1/

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

亲切的问候

Answer 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”（或其某些衍生物）是微不足道的

如何在现有循环中添加额外的循环

1 个答案: