使用JavaScript在Phaser中的奇怪行為

Question

首先

我根本不是游戲開發的初學者-而是專門從事網絡游戲開發的初學者

我從Phaser開始，因為它看起來不錯並且針對手機游戲進行了優化

反正..

我的游戲有一個奇怪的行為-我放了一個矩形並試圖移動它（當我調試X軸時，它已經正確更改了，但是我看不到矩形移動了！）

我的密碼

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

如果不進行測試，我會猜測會發生以下情況：創建一堆形狀，並對每個形狀進行一次game.debug.geom()調用。 同時，形狀確實開始移動，但是由於您再也不會調用game.debug.geom()了，所以您再也看不到任何移動。

如果您打算使用game.debug方法，它們通常應該放在您狀態的render()方法內部render()每幀將被調用一次）。

請注意，調試方法也將用於調試。 顯示形狀的正確方法是制作一個精靈或圖像（在這種情況下，您將不必手動更新任何東西，因為Phaser會處理它）。

Answer 2

由於update()函數調用moving()你可能希望你的game.debug內命令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))]);            
    }
}

這是一個演示： https : //jsfiddle.net/user2314737/J5fUE/253/