How to make collision group vs group

[nico974]

Hi

 

Currently, I am trying to program a game, which is to stack blocks.
The problem is that sometimes it does not go as planned.

For example, when three cubes in a column, there is one that disappears.
Another problem is that sometimes my character can pass behind a cube.

Here is my code

var game = new Phaser.Game(300, 500, Phaser.AUTO, 'canvasGame', { preload: preload, create: create, update: update, render: render });function preload() {    game.load.image('background', 'assets/Blackboard.png');    game.load.image('ground', 'assets/ground.png');    game.load.spritesheet('box', 'assets/box_30.png', 31, 31);    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);}var player;var platformsvar BOX_SIZE_SPACED = 30;var BOARD_COLS;var BOARD_ROWS;var boxGroup;var countBoxLoop = 2;var timeLoop = 3000;var velocityBoxY = 150;var createbox_bool = true;function create() {    game.physics.startSystem(Phaser.Physics.ARCADE);    BOARD_COLS = Phaser.Math.floor(game.world.width / BOX_SIZE_SPACED);    BOARD_ROWS = Phaser.Math.floor(game.world.height / BOX_SIZE_SPACED);    //game.physics.p2.setImpactEvents(true);    game.add.sprite(0, 0, 'background');    platforms = game.add.group();    platforms.enableBody = true;    platforms.physicsBodyType = Phaser.Physics.ARCADE;    var ground = platforms.create(0, game.world.height - 20, 'ground');    ground.body.immovable = true;    player = game.add.sprite(32, game.world.height - 100, 'dude');    game.physics.arcade.enable(player);    player.body.bounce.y = 0.2;    player.body.gravity.y = 500;    player.body.collideWorldBounds = true;    //  Our two animations, walking left and right.    player.animations.add('left', [0, 1, 2, 3], 10, true);    player.animations.add('right', [5, 6, 7, 8], 10, true);    boxGroup = game.add.group();    boxGroup.enableBody = true;    boxGroup.physicsBodyType = Phaser.Physics.ARCADE;        //game.physics.p2.enable([ platforms, boxGroup], false);    createBox();    game.time.events.loop(timeLoop, createBox, this);    //  Our controls.    cursors = game.input.keyboard.createCursorKeys();}function createBox() {	var i = game.rnd.integerInRange(0, 10);	var j = 0;    var spriteBox = boxGroup.create(i * BOX_SIZE_SPACED, j * BOX_SIZE_SPACED, "box");    spriteBox.body.collideWorldBounds = true;    spriteBox.body.velocity.y = velocityBoxY;    spriteBox.body.gravity.y = 200;}function boxHit (body, shapeA, shapeB, equation) {    console.log('kinematic');    body.body.kinematic = true;}function update () {   /* boxGroup.forEach(function(box) {        game.physics.arcade.collide(player, box);        game.physics.arcade.collide(box, boxGroup);        game.physics.arcade.collide(box, platforms);    });     */    game.physics.arcade.collide(boxGroup, platforms);    game.physics.arcade.collide(boxGroup, boxGroup);    game.physics.arcade.collide(player, platforms);    game.physics.arcade.collide(player, boxGroup);    //game.physics.arcade.collide(boxGroup, boxGroup, boxHit, null, this);    //game.physics.arcade.collide(boxGroup, platforms, boxHit, null, this);    //  Reset the players velocity (movement)    player.body.velocity.x = 0;    if (cursors.left.isDown)    {        //  Move to the left        player.body.velocity.x = -150;        player.animations.play('left');    }    else if (cursors.right.isDown)    {        //  Move to the right        player.body.velocity.x = 150;        player.animations.play('right');    }    else    {        //  Stand still        player.animations.stop();        player.frame = 4;    }        //  Allow the player to jump if they are touching the ground.    if (cursors.up.isDown && player.body.touching.down)    {        player.body.velocity.y = -350;    }}function render () {    game.debug.inputInfo(32, 32);}

Anyone have an idea?