使用javascript的Phaser中的一个奇怪行为

a strange behavior in Phaser with javascript

本文关键字：一个 Phaser javascript 使用      更新时间：2023-09-26

首次

我根本不是游戏开发的初学者，而是网络游戏开发的新手，尤其是

我开始使用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');

如果不进行测试，我猜会发生以下情况：创建一堆形状，并为每个形状调用game.debug.geom()。与此同时，形状确实开始移动，但由于您再也不会调用game.debug.geom()，因此您永远不会看到任何移动。

如果您打算使用game.debug中的方法，它们通常应该进入您所在状态的render()方法（每帧调用一次）。

请注意，调试方法也将用于调试。显示形状的正确方法是制作精灵或图像（在这种情况下，您不必手动更新任何内容，因为Phaser会处理它）。

由于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/

相关文章：