再学学没准以后摸鱼能玩上自己写的小游戏啦！！！

公司又又又又又又来了新需求所以最近正在学习Phaser！！！以下就是phaser官方的一个入门的案例！！感觉很简单又很好玩给大家分享一下哇~ 下面咱就来一步一步实现啦~

开始之前要告诉大家什么是Phaser哇

Phaser是一个HTML5游戏框架，它的目的是辅助开发者真正快速地制作强大的、跨浏览器的HTML5游戏。对浏览器的唯一要求是，支持画布（canvas）标签。

第一步，搭建环境，并添加一颗钻石看看啦


<head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <script src="phaser.min.js"></script>
</head>

<body>
<script>
    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    function preload() {
        game.load.image('sky', 'assets/sky.png');
        game.load.image('ground', 'assets/platform.png');
        game.load.image('diamond', 'assets/diamond.png');
        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
    }
    function create() {
        game.add.sprite(0, 0, 'diamond');
    }
    function update() {
        console.log('update');
    }
</script>

</body>
复制代码

你没看错phaser只需要在html文件中引入一个js文件环境就搭建好了，这么方便我直接爱了呀！在script标签中我们先创建画布和渲染环境推荐使用Phaser.AUTO，它将自动尝试使用WebGL，如果浏览器或设备不支持，它将回退为Canvas。接下来preload函数用来加载一些资源（在这里我已经将要用到的4张图片和一张精灵表单都加载进来了），create用来进行一些对象的创建及初始化（在这里我将加载好的钻石图片显示出来！），update就是游戏的主循环。下面来一起看看左上角这颗钻石吧~

第二步，绘制场景，把小主角也加进去啦

var platforms;
var player;
function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.add.sprite(0, 0, 'sky');
    platforms = game.add.group();
    platforms.enableBody = true;
    var ground = platforms.create(0, game.world.height - 64, 'ground');
    ground.scale.setTo(2, 2);
    ground.body.immovable = true;
    var ledge = platforms.create(300, 380, 'ground');
    ledge.body.immovable = true;
    ledge = platforms.create(-100, 200, 'ground');
    ledge.body.immovable = true;
   
    player = game.add.sprite(32, game.world.height - 150, 'dude');
    game.physics.arcade.enable(player);
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
}
function update() {
    game.physics.arcade.collide(player, platforms);
}
复制代码

首先我们要开启物理引擎（是为了后面做准备的），我们添加上天空、地面、还有两块障碍。将地面与障碍添加到platforms组中设置其固定并通过坐标来定位位置（距离要合适我们跳来跳去哦）。这样我们的场景就搭建成功了，下面添加我们的小人，player.body.collideWorldBounds = true;就限定了区域碰撞小人就不能不跑出这个区域了。我们的小人比较特殊小人是作为精灵表单（sprite sheet）载入的，而非图像。这是因为它包含了动画帧（frame），是长下图这样子的总共有9帧，4帧向左跑动，1帧面向镜头，4帧向右跑动。

添加left动画使用0, 1, 2, 3帧，跑动时每秒10帧。同样right动画使用5, 6, 7, 8帧，跑动时每秒10帧。最后update函数中添加 game.physics.arcade.collide(player, platforms);使用碰撞器检测二者之间的碰撞，并使二者分开（不加这个的话小人就到土里去啦！！大家可以去掉试一下~），看下写到现在的结果ba!

第三步，让主角动起来，还能‘捡到’掉落的钻石！

            cursors = game.input.keyboard.createCursorKeys();
            diamond = game.add.group();
            diamond.enableBody = true;
            for (var i = 0; i < 12; i++) {
                var diamondgroup = diamond.create(i * 70, 0, 'diamond');
                diamondgroup.body.gravity.y = 300;
                diamondgroup.body.bounce.y = 0.7 + Math.random() * 0.2;
            }
       
复制代码

            game.physics.arcade.collide(diamond, platforms);
            game.physics.arcade.overlap(player, diamond, collectDiamond, null, this);

            player.body.velocity.x = 0;
            if (cursors.left.isDown) {
                player.body.velocity.x = -150;
                player.animations.play('left');
            }
            else if (cursors.right.isDown) {
                player.body.velocity.x = 150;
                player.animations.play('right');
            }
            else {
                player.animations.stop();
                player.frame = 4;
            }
            if (cursors.up.isDown && player.body.touching.down) {
                player.body.velocity.y = -350;
            }
复制代码

           diamondgroup.kill();
复制代码

在create函数中使用input.keyboard.createCursorKeys();来获取系统的键盘输入对象传入我们定义的cursors中，判断左右键是否按下，如果按下添加水平速度，并开启左右动画，小人只有键被按下时才移动，抬起时立即停止。上键则会跳起（其中要判断小人是否在空中，在空中就不能跳）。跳起后添加垂直速度让小人落下。添加我们的钻石组，我们需要钻石是动态掉落的然后设置了它们的重力，随机设置了弹性，所以它们掉落的时候碰到障碍和地面会弹起。当我们小人‘捡起’钻石时，也就是小人与钻石有了碰撞，这时我们要kill()将钻石销毁。一起来看下现在的效果吧~

最后一步，咱们捡了钻石就得分，得计分啊！

        scoreText = game.add.text(16, 16, '得分: 0', { fontSize: '32px', fill: '#000' });
复制代码

        function collectDiamond(player, diamondgroup) {
            score += 10;
            scoreText.text = '得分: ' + score;
        }
复制代码

左上角添加初始文字，然后碰撞一次累加10分哦。写到这里这个简单的入门小游戏就大功告成啦！

下面完整代码双手奉上~

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <script src="../phaser.min.js"></script>
</head>

<body>

    <script>
        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
        function preload() {
            game.load.image('sky', 'assets/sky.png');
            game.load.image('ground', 'assets/platform.png');
            game.load.image('diamond', 'assets/diamond.png');
            game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
        }
        var platforms;
        var player;
        var cursors;
        var diamond;
        var score = 0;
        var scoreText;
        function create() {
            game.physics.startSystem(Phaser.Physics.ARCADE);
            game.add.sprite(0, 0, 'sky');
            platforms = game.add.group();
            platforms.enableBody = true;
            var ground = platforms.create(0, game.world.height - 64, 'ground');
            ground.scale.setTo(2, 2);
            ground.body.immovable = true;
            var ledge = platforms.create(300, 380, 'ground');
            ledge.body.immovable = true;
            ledge = platforms.create(-100, 200, 'ground');
            ledge.body.immovable = true;
            player = game.add.sprite(32, game.world.height - 150, 'dude');
            game.physics.arcade.enable(player);
            player.body.bounce.y = 0.2;
            player.body.gravity.y = 300;
            player.body.collideWorldBounds = true;
            player.animations.add('left', [0, 1, 2, 3], 10, true);
            player.animations.add('right', [5, 6, 7, 8], 10, true);
            cursors = game.input.keyboard.createCursorKeys();
            diamond = game.add.group();
            diamond.enableBody = true;
            for (var i = 0; i < 12; i++) {
                var diamondgroup = diamond.create(i * 70, 0, 'diamond');
                diamondgroup.body.gravity.y = 300;
                diamondgroup.body.bounce.y = 0.7 + Math.random() * 0.2;
            }
            scoreText = game.add.text(16, 16, '得分: 0', { fontSize: '32px', fill: '#000' });
        }
        function update() {
            game.physics.arcade.collide(player, platforms);
            game.physics.arcade.collide(diamond, platforms);
            game.physics.arcade.overlap(player, diamond, collectDiamond, null, this);
            player.body.velocity.x = 0;
            if (cursors.left.isDown) {
                player.body.velocity.x = -150;
                player.animations.play('left');
            }
            else if (cursors.right.isDown) {
                player.body.velocity.x = 150;
                player.animations.play('right');
            }
            else {
                player.animations.stop();
                player.frame = 4;
            }
            if (cursors.up.isDown && player.body.touching.down) {
                player.body.velocity.y = -350;
            }
        }
        function collectDiamond(player, diamondgroup) {
            diamondgroup.kill();

            score += 10;
            scoreText.text = '得分: ' + score;
        }
    </script>

</body>
复制代码

最后给大家放上两个学Phaser的好东西

官网

Phaser小站

吼吼第一次写文有不足的地方多多提哦~