Phaser HTML5 canvas 游戏引擎 牛刀小试

首先是素材









demo地址：
http://jsfiddle.net/DUN2Y/
首先Phaser 是一个基于canvas的 javascript游戏引擎，说白了就是一个框架，让你不用自己写 canvas的方法来实现动画效果。

官网地址：www.phaser.io

一下采用最新版2.0

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update,render:render });

先创建一个游戏世界；一共5个参数，其中前两个分别代表 canvas的长宽，而Phaser.CANVAS则代表是基于canvas来做图，如果浏览器支持webGL，可以写成Phaser.WEBGL..

中间这个空字符串代表canvas的ID，也就是如果你自定义一个id为aaa的canvas，这一项就可以写aaa，否则，会默认在body建立canvas。

最后的四个参数，很好理解，就是整个游戏的方法，载入前，创建，更新方法，下面详细介绍每个方法。

function preload() {

game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

preload方法一般引入一些资源文件，图片什么的，其中load.spritesheet引入一个动画图片，也就是带每个小人方位的图片，32，48代表第一个方位的起始位置。

function create() {
//把canvas的 边界设置成实物，也就是，可以用来检测碰撞和覆盖的实物
game.physics.setBoundsToWorld();
game.add.sprite(0, 0, 'sky');

//  创建一组组件，其中可以把一些用处相同的组件放在一个grope里，便于管理
platforms = game.add.group();
//允许组件设定重力方面的配置
platforms.enableBody = true;
//重力类型为arcade
platforms.physicsBodyType = Phaser.Physics.ARCADE;
// 创建地板
var ground = platforms.create(0, game.world.height - 64, 'ground');

//  缩放地板，使其自适应canvas大小
ground.scale.setTo(2, 2);

//  当地板被碰撞时，固定它的位置
ground.body.immovable = true;

//  创建两个台阶
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;

ledge = platforms.create(-150, 250, 'ground');

ledge.body.immovable = true;

//ledge2.body.setPolygon(62,112, 100,120,88,40);
//创建小人
player = game.add.sprite(32, game.world.height - 450, 'dude');
game.physics.enable(player, Phaser.Physics.ARCADE);
console.log(player.body);
//弹性指数
player.body.bounce.y = 0.6;
//重力指数
player.body.gravity.y = 400;
//是否允许和canvas边界碰撞
player.body.collideWorldBounds = true;
//添加动画
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);

stars = game.add.group();
stars.enableBody = true;
stars.physicsBodyType = Phaser.Physics.ARCADE;
for (var i = 0 ; i < 12 ; i++) {
var star = stars.create(i * 70, 0, "star");
star.body.gravity.y = 400;
star.body.bounce.y = 0.7 + Math.random() * 0.2;
star.body.collideWorldBounds = true;
}
cursors = game.input.keyboard.createCursorKeys();

score = game.add.text(12, 12, "score:"+scoreCount+"",{color:"#000"});

//var tilemap = game.add.tilemap("star",44,44,44,44);

}

其中add.sprite方法一个有4个参数，分别是位置的x，y坐标和key，

key为proload方法引入时为其分配的id也就是dude

这个方法为游戏添加一个精灵元素，精灵元素可以绑定事件，而且可以设置重力，弹性等参数，是框架里最常用的元素。

function update() {
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(stars, platforms);
game.physics.arcade.collide(player, ledge2);
game.physics.arcade.overlap(player, stars, function(player, star){
console.log(stars.total);
star.kill();
scoreCount++;
score.text = "score:"+scoreCount+"";
if (stars.total == 0) {
alert("congratulation!");
}
}, 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;
}

//  Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}

update方法主要负责一些事件的绑定，比如collide来检测两个元素是否碰撞，前两个参数分别是两个元素，后面是触发的回调方法。

overlap顾名思义是用来检测两个元素是否重叠，也就是小人和星星是否重叠。

然后在为其添加分数显示的text

到此为止，一个简单的小游戏就建成了。

具体的每一项的配置，可以参考官网的doc来配置。

完！