demo

公司又又又又又又来了新需求所以最近正在学习Phaser！！！以下就是phaser官方的一个入门的案例！！感觉很简单又很好玩给大家分享一下哇~ 下面咱就来一步一步实现啦~ ###### 开始之前要告诉大家什么是Phaser哇 Phaser是一个HTML5游戏框架，它的目的是辅助开发者真正快速地制作强大的、跨浏览器的HTML5游戏。对浏览器的唯一要求是，支持画布（canvas）标签。 ###### 第一步，搭建环境，并添加一颗钻石看看啦 ``` demo ``` 你没看错phaser只需要在html文件中引入一个js文件环境就搭建好了，这么方便我直接爱了呀！在script标签中我们先创建画布和渲染环境推荐使用`Phaser.AUTO`，它将自动尝试使用WebGL，如果浏览器或设备不支持，它将回退为Canvas。接下来preload函数用来加载一些资源（在这里我已经将要用到的4张图片和一张精灵表单都加载进来了），create用来进行一些对象的创建及初始化（在这里我将加载好的钻石图片显示出来！），update就是游戏的主循环。下面来一起看看左上角这颗钻石吧~ ![zs.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5fe87fd3d0a43569bc5aa8a40b5a958~tplv-k3u1fbpfcp-watermark.image?) ###### 第二步，绘制场景，把小主角也加进去啦 ``` 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帧向右跑动。 ![srt.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98e5e202ca5a41d9a0c594b49ba057ad~tplv-k3u1fbpfcp-watermark.image?) 添加left动画使用0, 1, 2, 3帧，跑动时每秒10帧。同样right动画使用5, 6, 7, 8帧，跑动时每秒10帧。最后update函数中添加 game.physics.arcade.collide(player, platforms);使用碰撞器检测二者之间的碰撞，并使二者分开（不加这个的话小人就到土里去啦！！大家可以去掉试一下~），看下写到现在的结果ba! ![1res.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/172c1adfc61b4bea93bcacff4ba8f60a~tplv-k3u1fbpfcp-watermark.image?) ###### 第三步，让主角动起来，还能‘捡到’掉落的钻石！ ``` 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()将钻石销毁。一起来看下现在的效果吧~ ![res2.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5aaef58fbf1a481da2aecd434a9bf299~tplv-k3u1fbpfcp-watermark.image?) ###### 最后一步，咱们捡了钻石就得分，得计分啊！ ``` scoreText = game.add.text(16, 16, '得分: 0', { fontSize: '32px', fill: '#000' }); ``` ``` function collectDiamond(player, diamondgroup) { score += 10; scoreText.text = '得分: ' + score; } ``` 左上角添加初始文字，然后碰撞一次累加10分哦。写到这里这个简单的入门小游戏就大功告成啦！下面完整代码双手奉上~ ``` demo ``` 最后给大家放上两个学Phaser的好东西 [官网](https://phaser.io/) [Phaser小站](http://www.phaser-china.com/index.html) 吼吼第一次写文有不足的地方多多提哦~