Phaser.js开发-星星狗游戏(下)

时间  2019-11-22
标签 phaser.js phaser 开发 星星 游戏 栏目 JavaScript 繁體版
原文   原文链接

上一部分咱们已经把游戏的资源界面须要的场景，还有所用到的对象都定义完成，接下来就是咱们的建立游戏部分，javascript

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上面，否则是没有效果滴！小伙伴们要注意啊！最早是绘制咱们的背景与地面，接下来咱们开始绘制障碍物，java

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;

这些绘制完就出现了dom

这个障碍物是我从图片上截取下来的->ground(这个是图片，上面资源加载能够进行查看)，这里简单说明 ，好比    var ledge = platforms.create(-160,100,'ground');//左1 这里就用到了咱们所说的 坐标，X轴，Y轴，以咱们的左上角为坐标原点，这里面的左1，值得是最靠左上角的障碍物，其他就是照猫画虎，大体障碍咱们就都弄了出来，ide

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,分数默认值,字体大小，字体填充颜色
}

 

星星钻石如上，得分面板如上，这就比较简单，咱们往下看，接下来是更新页面，this

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);

各类碰撞检测，单身狗跟地面，敌人跟单身狗，星星钻石跟单身狗，星星钻石跟地面，spa

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，不容许小人在空中在此跳跃

    }

}

键盘控制单身狗，code

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程