devbox
酷酷是懒虫
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：酷酷是懒虫 | 2024-08-17 07:25:06

赞

踩

phaserjs游戏源码

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

  1. function create() {
  2.  
  3. 	game.physics.startSystem(Phaser.Physics.ARCADE); //开启游戏物理系统
  4.  
  5.     game.add.sprite(0,0,'sky');//添加背景图
  6.  
  7. 	platforms = game.add.group();//添加到组里
  8.  
  9. 	platforms.enableBody = true; //在body上绑定触发
  10.  
  11.     var ground = platforms.create(0,game.world.height - 64,'ground');//创建地面
  12.  
  13. 	ground.scale.setTo(2,2);//比例缩放
  14.  
  15. 	ground.body.immovable = true; //固定定位

在这里简单说明下，物理引擎这种东西是必须绑定在enableBody上面，不然是没有效果滴！小伙伴们要注意啊！最先是绘制我们的背景与地面，接下来我们开始绘制障碍物，

  1. var ledge = platforms.create(450,550,'ground');//右上角3
  2.  
  3.   var firstaid = platforms.create(450,520,'firstaid');
  4.  
  5.     firstaid.body.immovable = true;
  6.  
  7.  
  8.     ledge.body.immovable = true;
  9.  
  10. 	var ledge = platforms.create(500,400,'ground');//坐标设置右上角2障碍物
  11.  
  12.     ledge.body.immovable = true;//使内容不因为碰撞而发生变化
  13.  
  14. 	var ledge = platforms.create(550,200,'ground');//坐标设置右上角1障碍物
  15.  
  16. 	ledge.body.immovable = true;
  17.  
  18. 	var ledge = platforms.create(-140,250,'ground');//左2
  19.  
  20. 	ledge.body.immovable = true;
  21.  
  22.  
  23.     var ledge = platforms.create(-160,100,'ground');//左1
  24.  
  25. 	ledge.body.immovable = true;
  26.  
  27.  
  28. 	var ledge = platforms.create(-110,400,'ground');//左3
  29.  
  30. 	ledge.body.immovable = true;
  31.  
  32. 	var ledge = platforms.create(-50,600,'ground');//左4
  33.  
  34. 	ledge.body.immovable = true;

这些绘制完就出现了

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

  1. 	player = game.add.sprite(32,game.world.height - 200,'dude'); //小人位置
  2.  
  3. 	game.physics.arcade.enable(player); //速度，加速度，角速度，角加速度
  4.  
  5.     player.body.bounce.y = 0.2;//跳跃反弹计算
  6.  
  7. 	player.body.gravity.y = 150;//跳跃重力值
  8.  
  9. 	player.body.collideWorldBounds = true;//小人与边界进行碰撞开启检测
  10.  
  11. 	player.animations.add('left',[0,1,2,3],10,true);
  12. 	//添加动画，左执行1-4帧，10帧每秒速度播放，循环播放
  13. 	player.animations.add('right',[5,6,7,8],10,true);
  14.     //添加动画，右执行1-4帧，10帧每秒速度播放，循环播放

上文的小人指的是我们控制的"单身狗"，在之前细心的朋友已经发现了，我们把"单身狗(玩家)","敌人"都是精灵的属性->sprite ，精灵就好比我们设置好的演员，我们可以告诉他应该怎么做，做什么，第二行物理开启引擎，phaser.js里面给我们提供了近乎完美的物理函数，

  1. enemy_left = game.add.sprite(120,game.world.height - 300,'baddie'); //敌人1位置
  2.  
  3.   game.physics.arcade.enable(enemy_left); //速度，加速度，角速度，角加速度
  4.  
  5.     enemy_left.body.bounce.y = 0.5;//跳跃反弹计算
  6.  
  7.   enemy_left.body.gravity.y = 300;//跳跃重力值
  8.  
  9.   enemy_left.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
  10.  
  11.   enemy_left.animations.add('baddie');
  12.  
  13. enemy_left.animations.play('baddie',8,true); 
  14.  
  15. game.add.tween(enemy_left).to({ x:310 },50000,null,true,0,Number.MAX_VALUE,true); 
  16.  
  17.  
  18. enema_left = game.add.sprite(32,game.world.height - 620,'baddie'); //敌人2位置
  19.  
  20.   game.physics.arcade.enable(enema_left); //速度，加速度，角速度，角加速度
  21.  
  22.     enema_left.body.bounce.y = 0.7;//跳跃反弹计算
  23.  
  24.   enema_left.body.gravity.y = 400;//跳跃重力值
  25.  
  26.   enema_left.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
  27.  
  28.   enema_left.animations.add('baddie');
  29.  
  30. enema_left.animations.play('baddie',8,true); 
  31.  
  32.  
  33. game.add.tween(enema_left).to({ x:230 },60000,null,true,0,Number.MAX_VALUE,true); 
  34.  
  35.  
  36.  
  37.  enemy_right = game.add.sprite(790,game.world.height - 500,'baddie'); //右侧敌人1位置
  38.  
  39.   game.physics.arcade.enable(enemy_right); //速度，加速度，角速度，角加速度
  40.  
  41.     enemy_right.body.bounce.y = 0.5;//跳跃反弹计算
  42.  
  43.   enemy_right.body.gravity.y = 300;//跳跃重力值
  44.  
  45.   enemy_right.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
  46.  
  47.   enemy_right.animations.add('baddie');
  48.  
  49. 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的位置随后进行折返，

  1.  cursors = game.input.keyboard.createCursorKeys();//键盘事件
  2.  
  3.   stars = game.add.group();//星星组
  4.  
  5.   stars.enableBody = true;//开启速度
  6.  
  7.   diamonds = game.add.group();//钻石组
  8.  
  9.   diamonds.enableBody = true;//开启速度
  10.  
  11.  
  12.  
  13.   for(var i = 0; i < 24;i++){//创建星星
  14.   
  15.     var star = stars.create(i * 33,0,'star');
  16. 	
  17. 	var diamond = diamonds.create(i * 250,0,'diamond');
  18.  
  19.  
  20. 	star.body.gravity.y = 150;//重力150
  21.  
  22. 	star.body.bounce.y = 0.5 + Math.random() * 0.2;//随即弹性
  23.  
  24. 	diamond.body.gravity.y = 350;//重力150
  25.  
  26. 	diamond.body.bounce.y = 0.5 + Math.random() * 0.2;//随即弹性
  27.  
  28.  
  29. 	 }
  30.  
  31. 	 scoreText = game.add.text(16,16,'星星的分:0',{ fontSize : '32px',fill: '#FFF'});
  32.  
  33. 	 diamText = game.add.text(600,16,'钻石得分:0',{ fontSize : '32px',fill: 'red'});
  34.     //添加分数计量器->X,Y,分数默认值,字体大小，字体填充颜色
  35. }

 

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

  1. function update() {
  2.  
  3.  
  4.     game.physics.arcade.collide(player, platforms);//小人与platforms组碰撞
  5.     
  6.     game.physics.arcade.collide(enemy_left,player); //敌人1与小人碰撞
  7.  
  8.     game.physics.arcade.collide(enemy_left,platforms);//敌人1与platforms组碰撞
  9.  
  10.     game.physics.arcade.collide(enema_left,player); //敌人2与小人碰撞
  11.  
  12.     game.physics.arcade.collide(enema_left,platforms);//敌人2与platforms组碰撞
  13.  
  14.  
  15.     game.physics.arcade.collide(enemy_right,player); //敌人3与小人碰撞
  16.  
  17.     game.physics.arcade.collide(enemy_right,platforms);//敌人3与platforms组碰撞
  18.  
  19.  
  20.    game.physics.arcade.collide(stars,platforms);//星星与platforms组碰撞
  21.  
  22.    game.physics.arcade.collide(diamonds,platforms);//钻石与地面碰撞
  23.  
  24.  
  25.  
  26.    game.physics.arcade.overlap(player,stars,collectStar,null,this);//小人星星检测物理碰撞效果
  27.  
  28.    game.physics.arcade.overlap(player,diamonds,collectDiam,null,this);//小人与钻石碰撞效果
  29.  
  30.    game.physics.arcade.overlap(player,enemy_left,alert_enemy,null,this);
  31.  
  32.    game.physics.arcade.overlap(player,enema_left,alert_enemy,null,this);
  33.  
  34.    game.physics.arcade.overlap(player,enemy_right,alert_enemy,null,this);

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

  1. player.body.velocity.x = 0;//加速度默认值0
  2.  
  3.     if (cursors.left.isDown)
  4.     {
  5.         
  6.         player.body.velocity.x = -150;
  7.  
  8.        
  9.  
  10.         player.animations.play('left');
  11.  
  12.        
  13.     }
  14.     else if (cursors.right.isDown)
  15.     {
  16.        
  17.         player.body.velocity.x = 150;
  18.           
  19.        
  20.  
  21.         player.animations.play('right');
  22.       
  23.        
  24.     }
  25.     else
  26.     {
  27.         
  28.         player.animations.stop();
  29.  
  30.       
  31.         player.frame = 4;//第四帧
  32.     }
  33.     
  34.     
  35.     if (cursors.up.isDown && player.body.touching.down)
  36.     {
  37.         player.body.velocity.y = -250;//按上时候Y=-250，不允许小人在空中在此跳跃
  38.  
  39.     }
  40.  
  41. }

键盘控制单身狗，

  1. function collectStar (player,star,diamond){
  2.   star.kill(); //触碰星星后自动销毁
  3.  
  4.  
  5. score +=10;
  6.  
  7. scoreText.text = '星星的分:' +score ;
  8.  
  9. }
  10. function collectDiam (player,diamond){
  11. diamond.kill();
  12. player.animations.add('left',[0,1,2,3],100,true);
  13. 	
  14. player.animations.add('right',[5,6,7,8],100,true);
  15. //如果单身狗吃到了钻石，那么小人将以每秒100帧的速度开始播放(快腿功能)
  16. diam +=20;
  17.  
  18. diamText.text = '钻石得分:' +diam;
  19.  }
  20.  
  21. function  alert_enemy(player,enemy,enema,badd){
  22. player.kill();
  23.  
  24. var wrap=document.getElementById('wrap');
  25.  
  26. wrap.style.display="block";
  27.  
  28. }
'
运行

最后就是这样，总结一下，phaser.js非常适合新手想要开发游戏的(尽管国内的文档还不完善，但是在国外这款引擎可是非常的牛)，这款游戏算是我用这个引擎开发的第二个游戏，感触还是蛮深的，下载的地址已经列出来了在上篇文章里面，

 

今天有是代码满满的一天 ^.^

有问题欢迎联系我m

转载于:https://my.oschina.net/8946a/blog/746392

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/991754
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号