help with a strange issue

[frodoe7]

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');

 

[rich]

The create function is called just once. The debug canvas is erased and redrawn every frame, so if you want to use Debug to draw a rectangle (and you should _never_ do that in production code btw) then stick the debug.geom calls inside the render function.