CODEWITHSUNDEEP
javascriptjqueryloops
Maurice
Maurice

Reputation: 1157

How to add an extra loop in this existing loop

I have the following fiddle (click the 1 to see the board): http://jsfiddle.net/mauricederegt/vNpYe/1/

It creates a series of divs from the var levels = [ part near the bottom of the script. The following part of the script loops through this to build up the board:

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....

This all works great. The problem is, that I want to add another layer of blocks. In the current script I have commented out the part called //layer2. When layer1 is done, I want to loop it again to add layer 2 on top of layer 1, (and more layers later) so it will look like this: enter image description here

Ofcourse some code extending needs to be done. For instance a z-index needs to be added and the loop needs to be re-written a bit.

I am not that great at coding, but I did some attempts to get this right. See this fiddle with my attempt. I have marked the lines with: //NEW added: etc where I have added stuff to make this work: http://jsfiddle.net/mauricederegt/PCmws/1/

The fiddle doesn't work cause the coding isn't quite right yet. Hope someone can help me out here. What am I missing/doing wrong?

Kind regards

Upvotes: 2

Views: 319

Answers (1)

kwah
kwah

Reputation: 1149

Let's break down where you are currently and what you would like to achieve:

  • You currently have a loop that goes through every row and adds tiles to this row.
  • You currently have a loop that goes through every layer and adds rows to this layer.
  • What you need now is a loop that goes through every level and adds layers to this level.

Before I go further, I ask that you use more verbose names for your variables. While i, j and lngi might make sense in context, in my opinion it is much better to sacrifice conciseness with verbosity.
Well, during development and prototyping at least.

If you use things like currentLevel and currentRow for example, it makes things like currentTileType = currentRow[currentColumnIndex] sooo much more simple/straightforward :)

Of course there are always balances to be made and this is purely personal preference/opinion, but maybe with this example I can bring you over to the dark side.. ;)

Soo.. let's get stuck in... The main change you'll see are the following additions..

Logically, it the same way that the one of the loops says "for every column in this row, I want to do this", it is actually just wrapping the existing loops saying "for every layer that I have defined, I want to do this (draw these rows)..."

       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!!

See this fiddle for an updated version: http://jsfiddle.net/vNpYe/4/

Once you understand what is happening here, it is trivial to set the z-index of the layer to the "currentLayerIndex" (or some derivative thereof)

Upvotes: 1

Related Questions