使用phaser 制作一个带进度条的加载页然后打开首页

使用Phaser制作一个带进度条的加载页然后打开首页的示例代码如下：

// 创建加载页场景
var LoadingScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function LoadingScene ()
    {
        Phaser.Scene.call(this, { key: 'LoadingScene' });
    },

    preload: function ()
    {
        // 加载资源
        this.load.image('logo', 'assets/logo.png');
        this.load.image('progressBar', 'assets/progressBar.png');
        
        // 显示加载进度的文本
        var text = this.add.text(250, 280, 'Loading...', { fontSize: '20px', fill: '#ffffff' });

        // 创建进度条
        var progressBar = this.add.sprite(250, 300, 'progressBar');
        this.load.on('progress', function (value) {
            progressBar.setCrop(0, 0, progressBar.width * value, progressBar.height);
        });

        // 加载完成后跳转到首页
        this.load.on('complete', function () {
            this.scene.start('HomeScene');
        }, this);
    }
});

// 创建首页场景
var HomeScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function HomeScene ()
    {
        Phaser.Scene.call(this, { key: 'HomeScene' });
    },

    create: function ()
    {
        // 显示Logo
        var logo = this.add.image(400, 300, 'logo');
        logo.setScale(0.5);

        // 显示欢迎文本
        var text = this.add.text(350, 350, 'Welcome to Home!', { fontSize: '32px', fill: '#ffffff' });
    }
});

// 创建一个Phaser游戏实例
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [ LoadingScene, HomeScene ]
};

var game = new Phaser.Game(config);

在上面的代码中，首先创建了一个LoadingScene加载页场景，其中使用this.load.image方法加载了logo和进度条的资源。然后使用this.load.on方法监听加载进度事件和加载完成事件，在加载进度事件中更新进度条的显示，加载完成事件中跳转到首页场景。

接下来创建了一个HomeScene首页场景，其中使用this.add.image和this.add.text方法分别显示了Logo和欢迎文本。

最后创建了一个Phaser游戏实例，并将LoadingScene和HomeScene作为场景传入。运行代码后，会先显示加载页，加载完成后跳转到首页