Phaser笔记-Hello World!- 前端开发

代码如下：


<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
 
    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };
 
    var game = new Phaser.Game(config);
 
    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');
 
        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }
 
    function create ()
    {
        this.add.image(400, 300, 'sky');
 
        var particles = this.add.particles('red');
 
        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });
 
        var logo = this.physics.add.image(400, 100, 'logo');
 
        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);
 
        emitter.startFollow(logo);
    }
    </script>
 
</body>
</html>

运行截图如下：

解释下（下面都总结于官方的API文档）：

config中type: Phaser.AUTO：类型为number，默认值是CONST.AUTO，指定用哪种渲染方式渲染游戏，提供了Phaser.AUTO，Phaser.CANVAS，Phaser.HEADLESS，Phaser.WEBGL.AUTO，如果设置为Phaser.AUTO，他会先设置Phaser.WEBGL.AUTO当这个设置失败后就会选择Phaser.CANVAS。