CODEWITHSUNDEEP
javascriptjquerycss
Maurice
Maurice

Reputation: 1157

Add an extra layer to my js generated "checkers" board

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

This part of the code:

 this.getHTML = function () {
        return '<div class="tile tile' + this.type + '" style="left:' + this.x + 'px; top:' + this.y + 'px"></div>';
    };

generates the "checkers" board using this code:

var levels = [
    [ //lvl1
        //layer1
        [1, 2, 1],
        [0, 0, 0, 0, 0, 0],
        [2, 1, 2],
        [0, 0, 0, 0, 0, 0],
        [1, 2, 1],
        [0, 0, 0, 0, 0, 0]
        //layer2
        //[0, 3, 4],
        //[0, 0, 0, 0, 0],
        //[0,4,3],
        //[0, 0, 0, 0, 0]
    ],
    [ //lvl2
        [1,2,0,1,2,1],
        [1, 2]
    ]

];

Currently it has one layer. I want to add an extra layer on top of this first layer. Basically ad a board on top of this board (and more layers later on). The code of this board should look something like this:

//layer2
  [0, 3, 4],
  [0, 0, 0, 0, 0],
  [0, 4, 3],
  [0, 0, 0, 0, 0]

If tried putting it in extra tags { }, so it would finish the cycle between it first before going to level2, but couldn't get it to work. Played with z-index a bit, also no luck.

Upvotes: 0

Views: 97

Answers (1)

kwah
kwah

Reputation: 1149

Note that your layers for level 1 are all on the same "level"...

See the corrected version below:

var levels = [
    [ //level one
        [//layer one of level one
            [1, 2, 1],
            [0, 0, 0, 0, 0, 0],
            [2, 1, 2],
            [0, 0, 0, 0, 0, 0],
            [1, 2, 1],
            [0, 0, 0, 0, 0, 0]
        ],
        [ //layer one of level one
           [0, 3, 4],
           [0, 0, 0, 0, 0],
           [0,4,3],
           [0, 0, 0, 0, 0]
        ]
    ],
    [ //level two
        [//layer one of level two
            [1,2,0,1,2,1],
            [1, 2]
        ]
    ]

];

Upvotes: 1

Related Questions