如何用CocosCreator实现射击小游戏

 更新时间:2021年04月14日 10:25:24   作者:战 胜  
这篇文章主要介绍了如何用CocosCreator实现射击小游戏,此游戏难度不大,仅作为入门的练手小游戏,一小时就能完成,里面用到的知识很常用,喜欢游戏的同学,可以参考下

分析下制作步骤:

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

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

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

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

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

2. 代码控制游戏

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

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

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

全部代码:

cc.Class({
    extends: cc.Component,

    properties: {
        playerNode: cc.Node,
        enemyNode: cc.Node,
        fireNode: cc.Node,
        scoreNode: cc.Label,
    },
    
     onLoad () {
        this.playLoad();
        this.fireLoad();
        this.enemyLoad();
         this.node.on("touchstart",this.fire,this);
         
     },

     update (dt) {
          if(Math.abs(this.fireNode.y-this.enemyNode.y)<(this.fireNode.height/3+this.enemyNode.height/3)
            &&Math.abs(this.fireNode.x-this.enemyNode.x)<(this.fireNode.width/3+this.enemyNode.width/3)){
              console.log("击败敌机");
              this.scoreNode.string= ++this.score;//击中得分
            this.fireNode.stopAction(this.fireAction);
            this.enemyNode.stopAction(this.enemyAction);
            this.enemyNode.active=false;
            this.fireNode.active=false;
            this.fireLoad();//初始化子弹
            this.enemyLoad();// 初始化敌机
          }

     },

     // 关闭事件监听
     onDestroy(){
        this.node.off("touchstart",this.fire,this);
     },
    // 初始玩家
    playLoad(){
        this.score=0;
        this.playerNode.y=-cc.winSize.height/4;
        
    },
    //初始化子弹
    fireLoad(){
        this.fireNode.active=true;
        this.isFire=false;
        this.fireNode.x=this.playerNode.x;
        this.fireNode.y=this.playerNode.y+this.playerNode.height;
    },
    // 初始化敌机
    enemyLoad(){
        this.enemyNode.active=true;
        this.enemyNode.x=Math.random()* cc.winSize.width;
        this.enemyNode.y=cc.winSize.height/3;
        let x=cc.winSize.width/2-this.enemyNode.width/2;
        let y=Math.random()* cc.winSize.height/4;
        let seq=cc.repeatForever(cc.sequence(cc.moveTo(1.5,cc.v2(-x,y)),cc.moveTo(1.5,cc.v2(x,y))));
        
        this.enemyAction=this.enemyNode.runAction(seq);
    },
    // 死亡 重新加载游戏
    dear(){
        console.log("死亡");
        cc.director.loadScene("game_scenes");
    },


    // 发射子弹
     fire(){
         if(this.isFire) return;
         this.isFire=true;
        console.log("开始发射");
         var fireaction=cc.sequence(
             cc.moveTo(1,cc.v2(this.playerNode.x,cc.winSize.height/2)),
             cc.callFunc(()=>{
                this.dear();
            }));
        this.fireAction=this.fireNode.runAction(fireaction);
        console.log("结束发射");
     }

});

最终效果

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

相关文章

  • 简单的JS时钟实例讲解

    简单的JS时钟实例讲解

    这篇文章主要为大家分享了一个简单的JS时钟实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 基于cornerstone.js的dicom医学影像查看浏览功能

    基于cornerstone.js的dicom医学影像查看浏览功能

    这篇文章主要介绍了基于cornerstone.js的dicom医学影像查看浏览功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • js动态生成表格(节点操作)

    js动态生成表格(节点操作)

    这篇文章主要为大家详细介绍了js动态生成表格,进行节点操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • layer.open 子页面弹出层向父页面传输数据的例子

    layer.open 子页面弹出层向父页面传输数据的例子

    今天小编就为大家分享一篇layer.open 子页面弹出层向父页面传输数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js时间戳格式化成日期格式的多种方法

    js时间戳格式化成日期格式的多种方法

    js需要把时间戳转为为普通格式,一般的情况下可能用不到的,下面与大家分享几种不错的方法,感兴趣的朋友不要错过
    2013-11-11
  • 原生js实现移动小球(碰撞检测)

    原生js实现移动小球(碰撞检测)

    这篇文章主要介绍了原生js实现会动的小球,碰撞检测功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 详解ES6中的Map与Set集合

    详解ES6中的Map与Set集合

    这篇文章主要介绍了详解ES6中的Map与Set集合,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • javascript 处理事件绑定的一些兼容写法

    javascript 处理事件绑定的一些兼容写法

    javascript 事件绑定的一些兼容写法整理非常不错,感谢
    2009-12-12
  • javascript实现状态栏文字首尾相接循环滚动的方法

    javascript实现状态栏文字首尾相接循环滚动的方法

    这篇文章主要介绍了javascript实现状态栏文字首尾相接循环滚动的方法,实例分析了javascript定时函数及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 移动端网页开发调试神器Eruda的介绍与使用技巧

    移动端网页开发调试神器Eruda的介绍与使用技巧

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,而最近发现了一个新的调试方法,所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料,以及其使用的一些技巧,需要的朋友可以参考下。
    2017-10-10

最新评论