a strange behavior in Phaser with javascript

Question

firstly

I am not beginner at game development at all - but beginner in web game development specially

I started with Phaser as it looks good and optimized for mobile games

anyway ..

I have a strange behavior with my game - I put a rectangle and trying to move it (when I debugged the X axis already changes correctly , but I can't see the rectangle move!!)

my codes

var game = new Phaser.Game(window.innerWidth,window.innerHeight,Phaser.AUTO);
var colors = ["#FF0000" , "#00FF00" , "#0000FF" , "#FFFF00" , "#00FFFF" , "#FFFF00"];
var lst;
var hlprs = [];
var gameState = {
    preload: function () {
        this.game.stage.backgroundColor = "#FFFFFF";
    },
    create: function () {
        for (var i = 0 ; i < 8 ; i++)
        {
                hlprs[i] = new Phaser.Rectangle((i*200),0,100,20);
                hlprs[2*i + 1] = new Phaser.Rectangle((i*200),window.innerHeight - 20,100,20);

                game.debug.geom(hlprs[i] , colors[Math.floor((Math.random() * 6))]);
                game.debug.geom(hlprs[2*i + 1] , colors[Math.floor((Math.random() * 6))]);
        }
    },
    update: function ()
    {
        moving();// it calls moving function and X axis is changes but (the rectangle does not move !!!)
    }
};
function moving()
{
    for (var i = 0 ; i < 8 ; i++)
    {
        hlprs[i].offset(-1,0);
        hlprs[2*i + 1].offset(-1,0);
    }
}
game.state.add('GameState' , gameState);
game.state.start('GameState');

Answer 1

Without testing it, I'd guess that what happens is the following: you create a bunch of shapes and do a single call to game.debug.geom() for each of the shapes. In the meantime the shapes do start moving, but since you never call game.debug.geom() again, you never see anything moving.

If you intend to use methods from game.debug , they should usually go inside the render() method of your state (which will be called once for every frame).

Note that the debug methods are to be used, well, for debugging. The proper way of displaying a shape is by making a sprite or an image (in which case you won't have to update anything manually since Phaser will handle it).

Answer 2

Since the update() function calls moving() you might want to have your game.debug commands within moving

function moving()
{
    for (var i = 0 ; i < 8 ; i++)
    {
       hlprs[i].offset(-1,0); 
       hlprs[2*i + 1].offset(-1,0);
       // update here
       game.debug.geom(hlprs[i] , colors[Math.floor((Math.random() * 6))]);
       game.debug.geom(hlprs[2*i + 1] , colors[Math.floor((Math.random() * 6))]);            
    }
}

Here's a demo: https://jsfiddle.net/user2314737/J5fUE/253/