Phaser HTML5 canvas 游戏引擎 牛刀小试

首先是素材

<喎? f/ware/vc/”=”” target=”_blank” class=”keylink”>vcd4kpha+pgjypgo8l3a+cjxwpmrlbw+12na3o7o8l3a+cjxwpjxicj4kpc9wpgo8cd5odhrwoi8vannmawrkbguubmv0l0rvtjjzlzwvcd4kpha+pgjypgo8l3a+cjxwpsrxz8hqagfzzxigysfsu7j2u/nt2mnhbnzhc7xeigphdmfzy3jpchttzs+30v3h5qosy7ww18hlvs3kx9k7upa/8rzco6ziw8tjsrvtw9fuvlrqtcbjyw52yxo1xle9t6jatmq1z9a2r7ut0ke5+6gjpc9wpgo8cd48yni+cjwvcd4kpha+udnn+lxy1rejund3dy5wagfzzxiuaw8gidxicj4kpc9wpgo8cd48yni+cjwvcd4kpha+0rvpwrlj08px7tdcsoyylja8yni+cjwvcd4kpha+pgjypgo8l3a+cjxwpjwvcd4kphbyzsbjbgfzcz0=”brush:java;”>var game = new phar.game(800, 600, phar.canvas, ”, { preload: preload, create: create, update: update,render:render });
先创建一个游戏世界；一共5个参数，其中前两个分别代表 canvas的长宽，而phar.canvas则代表是基于canvas来做图，如果支持webgl，可以写成phar.webgl..

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

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

function preload() {    game.load.image('sky', 'asts/sky.png');    game.load.image('ground', 'asts/platform.png');    game.load.image('star', 'asts/star.png');    game.load.spritesheet('dude', 'asts/dude.png', 32, 48);}

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

function create() {早晨的诗句//把canvas的 边界设置成实物，也就是，可以用来检测碰撞和覆盖的实物 game.physics.tboundstoworld();    game.add.sprite(0, 0, 'sky');     //  创建一组组件，其中可以把一些用处相同的组件放在一个grope里，便于管理    platforms = game.add.group();//允许组件设定重力方面的配置 platforms.enablebody = true;//重力类型为arcade platforms.physicsbodytype = phar.physics.arcade;    // 创建地板    var ground = platforms.create(0, game.world.height - 64, 'ground');     //  缩放地板，使其自适应canvas大小    ground.scale.tto(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.tpolygon(62,112, 100,120,88,40);//创建小人 player = game.add.sprite(32, game.world.height - 450, 'dude');    game.physics.enable(player, phar.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 = phar.physics.arcade;    for (var i = 0 ; i 

其中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');    }    el if (cursors.right.isdown)    {        //  右移动        player.body.velocity.x = 150;         player.animations.play('right');    }    el    {        //  静止        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来配置。

完！