CreateJS swapping display list containers with the use of classes

Question

This is a 2D Jenga game.

So I am currently making a Jenga game in createjs. When users take a block out from the Jenga building they can move it around, ultimately users are suppose to be able to take the piece and move it to the top like a typical Jenga game. The problem is you can take any piece out move it towards the bottom it appears to be in front of the Jenga building, but once you move a block towards the top it goes behind the building. I have a piece class which creates one block looks like this:

var GamepeiceComponent = (function() {
    var assets = {};
    var offset;
    var gamePeice;
    var currentX;
    var currentY;
    var newContainer;

    this.makePiece = function(ingredient) {
        gamePeice = new createjs.Container();
        assets.peice = new createjs.Bitmap(queue.getResult(ingredient));
        gamePeice.on('pressmove', handlePieceDrag);
        gamePeice.on("pressup", handlePieceUp);
        gamePeice.on("mousedown", handleMouseDown);
        gamePeice.cursor = 'pointer';
        gamePeice.addChild(assets.peice);
    }

    function handleMouseDown(e) {
        // Game.block.swapChildren(e.currentTarget, Game.block);
         for(var i = 0; i < Game.stage.children.length; i++){
            console.log(Game.stage.children[i]);
            //Game.stage.swapChildren(e.currentTarget, Game.stage.children[i])
        }
        //Game.stage.addChildAt(gamePeice,1);
        offset = {x: e.target.x - e.stageX, y: e.target.y - e.stageY};

        createjs.EventDispatcher.initialize(GamepeiceComponent.prototype);
        gamePeice.dispatchEvent("pieceClicked");
    }

    function handlePieceDrag(e) {
        e.target.x = e.stageX + offset.x;
        e.target.y = e.stageY + offset.y;
    }

    function handlePieceUp(e) {
        e.target.x = 0;
        e.target.y = 0;
    }

    this.addPiece = function() {
        return gamePeice;
    }

    return this;
});

I then have a block class which creates a block using the piece class because it creates 3 pieces per block (just like Jenga) heres what that is:

var GameblockComponent = (function() {
    var gameBlock;

    this.makeBlock = function(ingredient, yOffset, xOffset) {
        gameBlock = new createjs.Container();
        for(var i=0;i<3;i++) {
            var gamePieces = new GamepeiceComponent();
            var makePiece = gamePieces.makePiece(ingredient);
            gamePieces.addPiece().y = yOffset * i;
            gamePieces.addPiece().x = xOffset * i;
            gamePieces.addPiece().on('pieceClicked', handleClick);
            gameBlock.addChild(gamePieces.addPiece());
        }
    }

    function handleClick(e) {
        console.log('Game Piece Clicked');
    }

    this.addBlock = function() {
        return gameBlock;
    }

    return this;
});

Lastly I have a building which organizes all the blocks in order:

var GamebuildingComponent = (function(game) {
    var jengaContainer;
    var left = ['burger_l', 'cheese_l', 'egg_l', 'ham_l', 'lettuce_l', 'onion_l', 'pickle_l', 'salmon_l', 'sausage_l', 'tomato_l'];
    var right = ['burger_r', 'cheese_r', 'egg_r', 'ham_r', 'lettuce_r', 'onion_r', 'pickle_r', 'salmon_r', 'sausage_r', 'tomato_r'];
    var bread = ['bread_l', 'bread_r'];
    var seed = [];
    var offsets = {
        xOffsetLeft: 15,
        yOffsetLeft: -33,
        xPosLeft: 170,
        xOffsetRight: 17,
        yOffsetRight: 33,
        yPosRight:100
    };

    function init() {
        jengaContainer = new createjs.Container();
        createBread(15);

        createSubBlock(40);
        createBread(160);
        createSubBlock(185);

        createBread(305);
    }

    function createBread(yOffset) {
        var block = new GameblockComponent();

        var breadLeft = block.makeBlock(bread[0], offsets.xOffsetLeft, offsets.yOffsetLeft);
        block.addBlock().x = 170;
        block.addBlock().y = yOffset;
        jengaContainer.addChildAt(block.addBlock(), 0);
    }

    // LEFT: left side facing to left
    // RIGHT: right side facing to right
    function createSubBlock(yOffset) {
        for(var i=0;i<5;i++) {
            var block = new GameblockComponent();
            var random = Math.floor(Math.random()*left.length);
            // prevents duplicates
            while(seed.indexOf(random) > -1) {
                var random = Math.floor(Math.random()*left.length);
            }
            if(i%2 != 0) {
                var ingredient = block.makeBlock(left[random], offsets.xOffsetLeft, offsets.yOffsetLeft);
                block.addBlock().x = 170;
            } else {
                var ingredient = block.makeBlock(right[random], offsets.xOffsetRight, offsets.yOffsetRight);
                block.addBlock().x = 105;
            }

            seed.push(random);
            block.addBlock().y = 23 * i + yOffset;
            jengaContainer.addChildAt(block.addBlock(), 0);
        }
    }

    this.addBuilding = function() {
        return jengaContainer;
    }

    init();
    return this;
});

It all works fine except for when you move a lower piece towards the top the piece goes behind the jenga building, and of course its how the displaylist works, how would I be able to swap the piece correctly and where? I was listing all my child elements that are on the stage and it gave me one child (the jenga building). That child gave me 13 children (each block).

Then I just add the Jenga building to a view, and that view gets called from a controller.

Andrew Andrew · Accepted Answer · 2015-07-27T14:05:51

You're probably looking for the setChildIndex method of the Container object.

function handleMouseDown(e) {
    Game.block.setChildIndex(e.currentTarget, Game.block.children.length - 1);        
}

CreateJS swapping display list containers with the use of classes

1 Answers