Hello Phaser！Phaser 入门

m0_62651421

于 2024-07-03 16:33:20 发布

阅读量427

点赞数 12

文章标签：游戏 node.js

本文链接：https://blog.csdn.net/m0_62651421/article/details/140155348

版权

什么Phaser？

Phaser是一个专注于桌面和移动端的HTML5游戏引擎，是国外最火的一个HTML5游戏引擎。

它最大的特点就是入门超级简单，不用搭建复杂的环境，不用复杂的概念，它只需要你会一点点的js，即可入门；

官网地址：http://phaser.io/

Phaser 入门

- 新建文件夹创建 index.html文件

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    class Example extends Phaser.Scene
    {
        preload ()
        {
            this.load.setBaseURL('https://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');
        }

        create ()
        {
            this.add.image(400, 300, 'sky');

            const particles = this.add.particles(0, 0, 'red', {
                speed: 100,
                scale: { start: 1, end: 0 },
                blendMode: 'ADD'
            });

            const logo = this.physics.add.image(400, 100, 'logo');

            logo.setVelocity(100, 200);
            logo.setBounce(1, 1);
            logo.setCollideWorldBounds(true);

            particles.startFollow(logo);
        }
    }

    const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: Example,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        }
    };

    const game = new Phaser.Game(config);
    </script>

</body>
</html>