2016年4月19日
Phaser.js开发-星星狗游戏(下)
摘要: 接上篇文章接着来写….
上一部分我们已经把游戏的资源界面需要的场景，还有所用到的对象都定义完成，接下来就是我们的创建游戏部分，
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE); //开启游戏物理系统
game.add.sprite(0,0,'sky');//添加背景图
platforms = game.add.group();//添加到组里
platforms.enableBody = true; //在body上绑定触发
var ground = platforms.create(0,game.world.height - 64,'ground');//创建地面
ground.scale.setTo(2,2);//比例缩放
ground.body.immovable = true; //固定定位在这里简单说明下，物理引擎这种东西是必须绑定在enableBody上面，不然是没有效果滴！小伙伴们要注意啊！最先是绘制我们的背景与地面，接下来我们开始绘制障碍物，
var ledge = platforms.create(450,550,'ground');//右上角3
var firstaid = platforms.create(450,520,'firstaid');
firstaid.body.immovable = true;
ledge.body.immovable = true;
var ledge = platforms.create(500,400,'ground');//坐标设置右上角2障碍物
ledge.body.immovable = true;//使内容不因为碰撞而发生变化
var ledge = platforms.create(550,200,'ground');//坐标设置右上角1障碍物
ledge.body.immovable = true;
var ledge = platforms.create(-140,250,'ground');//左2
ledge.body.immovable = true;
var ledge = platforms.create(-160,100,'ground');//左1
ledge.body.immovable = true;
var ledge = platforms.create(-110,400,'ground');//左3
ledge.body.immovable = true;
var ledge = platforms.create(-50,600,'ground');//左4
ledge.body.immovable = true;这些绘制完就出现了
这个障碍物是我从图片上截取下来的->ground(这个是图片，上面资源加载可以进行查看)，这里简单说明 ，比如 var ledge = platforms.create(-160,100,’ground’);//左1 这里就用到了我们所说的 坐标，X轴，Y轴，以我们的左上角为坐标原点，这里面的左1，值得是最靠左上角的障碍物，其余就是照猫画虎，大致障碍我们就都弄了出来，
player = game.add.sprite(32,game.world.height - 200,'dude'); //小人位置
game.physics.arcade.enable(player); //速度，加速度，角速度，角加速度
player.body.bounce.y = 0.2;//跳跃反弹计算
player.body.gravity.y = 150;//跳跃重力值
player.body.collideWorldBounds = true;//小人与边界进行碰撞开启检测
player.animations.add('left',[0,1,2,3],10,true);
//添加动画，左执行1-4帧，10帧每秒速度播放，循环播放
player.animations.add('right',[5,6,7,8],10,true);
//添加动画，右执行1-4帧，10帧每秒速度播放，循环播放
上文的小人指的是我们控制的”单身狗”，在之前细心的朋友已经发现了，我们把”单身狗(玩家)”,”敌人”都是精灵的属性->sprite ，精灵就好比我们设置好的演员，我们可以告诉他应该怎么做，做什么，第二行物理开启引擎，phaser.js里面给我们提供了近乎完美的物理函数，
enemy_left = game.add.sprite(120,game.world.height - 300,'baddie'); //敌人1位置
game.physics.arcade.enable(enemy_left); //速度，加速度，角速度，角加速度
enemy_left.body.bounce.y = 0.5;//跳跃反弹计算
enemy_left.body.gravity.y = 300;//跳跃重力值
enemy_left.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
enemy_left.animations.add('baddie');
enemy_left.animations.play('baddie',8,true);
game.add.tween(enemy_left).to({ x:310 },50000,null,true,0,Number.MAX_VALUE,true);
enema_left = game.add.sprite(32,game.world.height - 620,'baddie'); //敌人2位置
game.physics.arcade.enable(enema_left); //速度，加速度，角速度，角加速度
enema_left.body.bounce.y = 0.7;//跳跃反弹计算
enema_left.body.gravity.y = 400;//跳跃重力值
enema_left.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
enema_left.animations.add('baddie');
enema_left.animations.play('baddie',8,true);
game.add.tween(enema_left).to({ x:230 },60000,null,true,0,Number.MAX_VALUE,true);
enemy_right = game.add.sprite(790,game.world.height - 500,'baddie'); //右侧敌人1位置
game.physics.arcade.enable(enemy_right); //速度，加速度，角速度，角加速度
enemy_right.body.bounce.y = 0.5;//跳跃反弹计算
enemy_right.body.gravity.y = 300;//跳跃重力值
enemy_right.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
enemy_right.animations.add('baddie');
enemy_right.animations.play('baddie',8,true);
好，添加完了敌人，现在是这个样子了
game.add.tween(enemy_right).to({ x:530 },60000,null,true,0,Number.MAX_VALUE,true);这段话是一个补间动画，说的是让我们这个精灵，以60000毫秒的时间走到X轴530的位置随后进行折返，
cursors = game.input.keyboard.createCursorKeys();//键盘事件
stars = game.add.group();//星星组
stars.enableBody = true;//开启速度
diamonds = game.add.group();//钻石组
diamonds.enableBody = true;//开启速度
for(var i = 0; i < 24;i++){//创建星星
var star = stars.create(i * 33,0,'star');
var diamond = diamonds.create(i * 250,0,'diamond');
star.body.gravity.y = 150;//重力150
star.body.bounce.y = 0.5 + Math.random() * 0.2;//随即弹性
diamond.body.gravity.y = 350;//重力150
diamond.body.bounce.y = 0.5 + Math.random() * 0.2;//随即弹性
}
scoreText = game.add.text(16,16,'星星的分:0',{ fontSize : '32px',fill: '#FFF'});
diamText = game.add.text(600,16,'钻石得分:0',{ fontSize : '32px',fill: 'red'});
//添加分数计量器->X,Y,分数默认值,字体大小，字体填充颜色
}
星星钻石如上，得分面板如上，这就比较简单，我们往下看，接下来是更新页面，
function update() {
game.physics.arcade.collide(player, platforms);//小人与platforms组碰撞
game.physics.arcade.collide(enemy_left,player); //敌人1与小人碰撞
game.physics.arcade.collide(enemy_left,platforms);//敌人1与platforms组碰撞
game.physics.arcade.collide(enema_left,player); //敌人2与小人碰撞
game.physics.arcade.collide(enema_left,platforms);//敌人2与platforms组碰撞
game.physics.arcade.collide(enemy_right,player); //敌人3与小人碰撞
game.physics.arcade.collide(enemy_right,platforms);//敌人3与platforms组碰撞
game.physics.arcade.collide(stars,platforms);//星星与platforms组碰撞
game.physics.arcade.collide(diamonds,platforms);//钻石与地面碰撞
game.physics.arcade.overlap(player,stars,collectStar,null,this);//小人星星检测物理碰撞效果
game.physics.arcade.overlap(player,diamonds,collectDiam,null,this);//小人与钻石碰撞效果
game.physics.arcade.overlap(player,enemy_left,alert_enemy,null,this);
game.physics.arcade.overlap(player,enema_left,alert_enemy,null,this);
game.physics.arcade.overlap(player,enemy_right,alert_enemy,null,this);
各种碰撞检测，单身狗跟地面，敌人跟单身狗，星星钻石跟单身狗，星星钻石跟地面，
player.body.velocity.x = 0;//加速度默认值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 = -250;//按上时候Y=-250，不允许小人在空中在此跳跃
}
}键盘控制单身狗，
function collectStar (player,star,diamond){
star.kill(); //触碰星星后自动销毁
score +=10;
scoreText.text = '星星的分:' +score ;
}
function collectDiam (player,diamond){
diamond.kill();
player.animations.add('left',[0,1,2,3],100,true);
player.animations.add('right',[5,6,7,8],100,true);
//如果单身狗吃到了钻石，那么小人将以每秒100帧的速度开始播放(快腿功能)
diam +=20;
diamText.text = '钻石得分:' +diam;
}
function alert_enemy(player,enemy,enema,badd){
player.kill();
var wrap=document.getElementById('wrap');
wrap.style.display="block";
}最后就是这样，总结一下，phaser.js非常适合新手想要开发游戏的(尽管国内的文档还不完善，但是在国外这款引擎可是非常的牛)，这款游戏算是我用这个引擎开发的第二个游戏，感触还是蛮深的，下载的地址已经列出来了在上篇文章里面，
今天有是代码满满的一天 ^.^
有问题欢迎联系我m
