初学Phaser.js之管中窥豹

Phaser.js是一款开源的javascript2D游戏引擎，我个人觉得它还是十分强大的。我看了一些博客然后又去官网系统的看了文档(话说还真没有人翻译啊...)基本上能仿一些案例做点小游戏了。我个人感觉这个引擎就是在‘画’游戏，还是十分容易上手的。而且它还可以选择用webGL还是canvas渲染，很人性化哈。

完整地画了一个flappy bird但是太俗了所以就不放上来了，我还准备做去年百度ife的那个游戏班的项目，就先用phaser做然后边做边用吧，开学以后就不一定有时间做了。

先放上教程的传送门吧：点击打开链接这是2.4.6的地址，应该是最新的了。例子很多、API文档很详细、但下载地址打开很慢...所以我是在github上直接找到它然后down到本地的。

对了，我踩的坑里面最大的一个就是要运行在自己的web server里，我用的是appserv，一个很方便搭建的WAMP。否则Phaser就加载不了了。

然后我就开始看和写(抄)，再改一改，改出来一个flappy bird，然后还改出来一个这个:

初学Phaser.js之管中窥豹

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {preload: preload, create: create, update: update });

        var player;
        var cursors;
        var pipe;
        var jumpTimer = 0;

        function preload() {

            game.load.image('pipe', 'img/pipe.png');

        }

        function create() {

            game.time.desiredFps = 30;

            game.physics.startSystem(Phaser.Physics.ARCADE);
            game.physics.arcade.gravity.y = 1000;

            game.stage.backgroundColor = '#565656';

            //  This sprite was created with the Phaser Gen Paint app
            //  also available in the Phaser Examples repo and on the Phaser site.

            var dudeData = [
                '..E.............',
                '.DEEEEEEDDD.....',
                '..EEEEEEDDD.....',
                '..EE00EE77778666',
                '..EEEEEE77777666',
                '..EEEE7777777666',
                '..EEEE7655567666',
                'EEEEEE7777757666',
                'EEEEEEDD555.7666',
                '..DEEEEEDDD.....',
                '..EEEEEEDDD.....',
                '.7EEEEEEDDD.6...',
                '.77EEEEEDDD66...',
                '..77......66....'
            ];

            game.create.texture('phaserDude', dudeData, 4, 4, 2);

            player = game.add.sprite(game.width / 2, game.height - 40, 'phaserDude');
            player.anchor.set(0.5);

            game.physics.enable(player, Phaser.Physics.ARCADE);

            player.body.collideWorldBounds = true;

            cursors = game.input.keyboard.createCursorKeys();

            pipe = game.add.sprite(100, 200, 'pipe');

        }

        function update() {

            player.body.velocity.x = 0;

            if (cursors.left.isDown)
            {
                player.body.velocity.x = -200;
                player.scale.x = -1;
            }
            else if (cursors.right.isDown)
            {
                player.body.velocity.x = 200;
                player.scale.x = 1;
            }

            if (cursors.up.isDown && player.body.onFloor() && game.time.now > jumpTimer)
            {
                player.body.velocity.y = -500;

                jumpTimer = game.time.now + 1000;
            }

        }

就是一个用那个数组画出来的鸟(这个效果着实让我震惊了,就那个texture,还能通过改变第三个参数来选择颜色,是不是好强大！)，然后能用键盘左右和上来控制左右走和向上跳,代码很短但是有了这个'鸟'还设置了重力设置了不得超出边框,不知不觉我还没怎么学就已经能做这么多事了。

Phaser.js很适合我这种懒人,接下来我得先勤奋一下把它掌握个50%,然后就开始做游戏了。但是要做的游戏是移动端的,那里恐怕也有不少坑。

秒客网

初学Phaser.js之管中窥豹

相关文章