服务器之家

服务器之家 > 正文

如何用CocosCreator实现射击小游戏

时间:2022-03-01 16:33     来源/作者:战 胜

分析下制作步骤:

1. 准备好资源,搭建场景

资源的话可以自己到网上找,也可以直接用我的也行;创建好相应文件夹,把资源放到res文件夹下;

搭建场景:
第一步:创建一个单色精灵(Script) bg 背景, 设置好颜色,加一个Widget组件,使其充满屏幕;

如何用CocosCreator实现射击小游戏

第二步: 在bg节点下创建topbutton空节点作为顶与底部,然后在两个空节点加入带刺的节点(直接将图片拖到top层级管理器就可以),现在我们需要给top与button节点添加一个Layout组件,属性设置如图,这样可以看到屏幕上下都有刺了。

如何用CocosCreator实现射击小游戏

第三步: 将玩家小人、子弹、敌机同样的方法加入到场景中,再创建一个Label节点用来显示分数,调节一下位置;

如何用CocosCreator实现射击小游戏

2. 代码控制游戏

第一步: 创建一个game脚本,挂载到dg节点上;

第二步: 编辑代码,在 properties添加属性,用来关联玩家、子弹、敌人节点,再编辑器关联;

如何用CocosCreator实现射击小游戏

第三步: 代码逻辑控制,包括初始化玩家、子弹、敌人;注册监听事件;写动作函数;计分判断等;

全部代码:

  1. cc.Class({
  2. extends: cc.Component,
  3.  
  4. properties: {
  5. playerNode: cc.Node,
  6. enemyNode: cc.Node,
  7. fireNode: cc.Node,
  8. scoreNode: cc.Label,
  9. },
  10.  
  11. onLoad () {
  12. this.playLoad();
  13. this.fireLoad();
  14. this.enemyLoad();
  15. this.node.on("touchstart",this.fire,this);
  16.  
  17. },
  18.  
  19. update (dt) {
  20. if(Math.abs(this.fireNode.y-this.enemyNode.y)<(this.fireNode.height/3+this.enemyNode.height/3)
  21. &&Math.abs(this.fireNode.x-this.enemyNode.x)<(this.fireNode.width/3+this.enemyNode.width/3)){
  22. console.log("击败敌机");
  23. this.scoreNode.string= ++this.score;//击中得分
  24. this.fireNode.stopAction(this.fireAction);
  25. this.enemyNode.stopAction(this.enemyAction);
  26. this.enemyNode.active=false;
  27. this.fireNode.active=false;
  28. this.fireLoad();//初始化子弹
  29. this.enemyLoad();// 初始化敌机
  30. }
  31.  
  32. },
  33.  
  34. // 关闭事件监听
  35. onDestroy(){
  36. this.node.off("touchstart",this.fire,this);
  37. },
  38. // 初始玩家
  39. playLoad(){
  40. this.score=0;
  41. this.playerNode.y=-cc.winSize.height/4;
  42.  
  43. },
  44. //初始化子弹
  45. fireLoad(){
  46. this.fireNode.active=true;
  47. this.isFire=false;
  48. this.fireNode.x=this.playerNode.x;
  49. this.fireNode.y=this.playerNode.y+this.playerNode.height;
  50. },
  51. // 初始化敌机
  52. enemyLoad(){
  53. this.enemyNode.active=true;
  54. this.enemyNode.x=Math.random()* cc.winSize.width;
  55. this.enemyNode.y=cc.winSize.height/3;
  56. let x=cc.winSize.width/2-this.enemyNode.width/2;
  57. let y=Math.random()* cc.winSize.height/4;
  58. let seq=cc.repeatForever(cc.sequence(cc.moveTo(1.5,cc.v2(-x,y)),cc.moveTo(1.5,cc.v2(x,y))));
  59.  
  60. this.enemyAction=this.enemyNode.runAction(seq);
  61. },
  62. // 死亡 重新加载游戏
  63. dear(){
  64. console.log("死亡");
  65. cc.director.loadScene("game_scenes");
  66. },
  67.  
  68. // 发射子弹
  69. fire(){
  70. if(this.isFire) return;
  71. this.isFire=true;
  72. console.log("开始发射");
  73. var fireaction=cc.sequence(
  74. cc.moveTo(1,cc.v2(this.playerNode.x,cc.winSize.height/2)),
  75. cc.callFunc(()=>{
  76. this.dear();
  77. }));
  78. this.fireAction=this.fireNode.runAction(fireaction);
  79. console.log("结束发射");
  80. }
  81.  
  82. });

最终效果

如何用CocosCreator实现射击小游戏

以上就是如何用CocosCreator实现射击小游戏的详细内容,更多关于CocosCreator实现射击小游戏的资料请关注服务器之家其它相关文章!

原文链接:https://blog.csdn.net/qq_45021180/article/details/104347037

相关文章

热门资讯

2022年最旺的微信头像大全 微信头像2022年最新版图片
2022年最旺的微信头像大全 微信头像2022年最新版图片 2022-01-10
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
返回顶部