CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏 零基础开发

   日期:2020-10-03     浏览:109    评论:0    
核心提示:CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏前言老规矩先看效果源码的获取方式在最下面对于本游戏来说canvas这样设置最佳哦游戏实现思路:小鸟的位置是全程不动的,只有管子和地面在动。需要用到物理引擎和碰撞系统,物理引擎来让小鸟下落,并在点击屏幕的时候让小鸟飞起来,碰撞引擎用来判断小鸟和障碍物碰撞,还需要存储和读取历史最高分等等本文章的目录前言一、搭建场景二、写代码一、搭建场景搭建基本场景新建一个场景取名为Game并且打开设置好canvas把背

CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏

大家中秋国庆快乐哈

前言

老规矩先看效果

源码的获取方式在最下面
对于本游戏来说canvas这样设置最佳哦

游戏实现思路:小鸟的位置是全程不动的,只有管子和地面在动。需要用到物理引擎和碰撞系统,物理引擎来让小鸟下落,并在点击屏幕的时候让小鸟飞起来,碰撞引擎用来判断小鸟和障碍物碰撞,还需要存储和读取历史最高分等等

本文章的目录
前言

一、搭建场景
二、写代码

一、搭建场景

搭建基本场景
新建一个场景取名为Game并且打开
设置好canvas

把背景图拖到场景中,把背景的大小设置成和canvas一样大,还需要添加widget组件来让背景填满整个屏幕

再把地面拖过来,要拖两个,因为需要两个地面交替移动才能看起来地面时一直在动的
大小也要设置好,为了区分还需要改下名字



接下来就拖我们的主角小鸟到场景啦
给小鸟添加动画组件,添加spriteFrame属性然后把图片一张一张拖进去,并按照图片设置好各种参数

小鸟向下落需要用到物理引擎,所以需要刚体和物理碰撞体,刚体的类型当然就是动态(Dynamic)

为了方便对管子的移动进行控制,游戏碰撞这一块我就没有用物理碰撞,而是单独用了碰撞系统来判断碰撞,小鸟还需要添加碰撞组件(两个地面也需要碰撞组件哦!)

放置管子
像素鸟中的管子一共是三组,不断的向左移动,当管子的最右边小于了屏幕的最左边,也就是说当管子超出屏幕的时候就需要让管子重新回到屏幕最右边,像这样一直循环
新建三个空节点,每个空节点放两个管子(一个向上的管子一个向下的管子)
每个管子都需要添加碰撞组件哦!!


现在场景应该是这样的

UI
UI是游戏和玩家之间交互的介质,任何游戏都少不了UI
像素鸟这个游戏是在点击屏幕的时候让小鸟向上飞,所以需要给canvas添加button(按钮)组件
还需要两个按钮,一个用来开始游戏,一个用来重新开始,为了让游戏看起来美观还可以加一个Logo,最后再加上分数和历史最高分就很完美了
(分数节点取名为score_label,历史最高分取名为history_label,开始游戏按钮取名为btnPlay,重新开始按钮取名为btnGameover)

都加上之后的样子

二、写代码

场景搭建好了,需要脚本来控制场景的这些节点
新建一个TS脚本,取名为Main(Main脚本里面写游戏的主要逻辑)
把下面的代码复制粘贴到脚本里
每一句代码我都写了很详细的注释哈

我简单总结了一下,代码里面实现的内容有

  • 计算好每组管子的最佳位置,使它们均匀的分布
  • 初始化历史最高分,当得分超过历史最高分时就重新存储
  • 游戏开始时第二组和第三组管子的Y坐标随机加上一个数(第一组管子不加是因为可能在游戏开始之前就和小鸟发生碰撞,这就会出现很多问题,在游戏开始之后还是需要加)
  • 在游戏开始时的0.05秒后暂停整个游戏(在0.05秒后暂停是为了先让一些必要的东西加载)
  • 管子和地面的无限移动
  • 每移动一次管子就加2分
  • 每帧更新分数
  • 点击屏幕时通过设置小鸟的线速度来实现上飞的效果
  • 游戏结束时暂停整个场景
const { ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component { 

    @property(cc.Node)
    logo:cc.Node = null;//标志(logo),也就是FlappyBird

    @property(cc.Node)
    p0:cc.Node = null;//第一组管子

    @property(cc.Node)
    p1:cc.Node = null;//第一组管子

    @property(cc.Node)
    p2:cc.Node = null;//第一组管子

    @property(cc.Node)
    groud0:cc.Node = null;//第一个地面

    @property(cc.Node)
    groud1:cc.Node = null;//第二个地面

    @property(cc.Node)
    btn_play:cc.Node = null;//开始游戏按钮

    @property(cc.Node)
    btn_gameover:cc.Node = null;//重新开始按钮

    @property(cc.Label)
    score_label:cc.Label = null;//分数文字

    @property(cc.Label)
    history_label:cc.Label = null;//历史最高分文字

    @property(cc.Animation)
    bird_anim:cc.Animation = null;//小鸟的动画组件

    @property(cc.RigidBody)
    bird_rig:cc.RigidBody = null;//小鸟的刚体组件

    @property(cc.AudioSource)
    onbtn_music:cc.AudioSource = null;

    @property
    is_debug:boolean = false;//是否调试

    @property
    score:number = 0;//分数

    onLoad(){ 
        if(cc.sys.localStorage.getItem("his") == null){ //如果历史最高分为空
            cc.sys.localStorage.setItem("his",0);//初始化历史最高分
        }

        this.history_label.string = "历史最高分:" + cc.sys.localStorage.getItem("his");//更新历史最高分

        this.groud0.width = this.node.width;//把第一个地面的宽设置为屏幕的宽
        this.groud1.width = this.node.width;//把第二个地面的宽设置为屏幕的宽
        this.groud0.y = -this.node.height / 2 + this.groud0.height / 2;//设置两个地面的Y坐标为最佳
        this.groud1.y = this.groud0.y;
        this.groud1.x = this.groud0.x + this.groud1.width;//让第二个地面在第一个地面的右侧,并且紧紧贴在一起

        let phy_manager = cc.director.getPhysicsManager();//获取物理引擎
        phy_manager.enabled = true;//开启物理引擎
        phy_manager.gravity = cc.v2(0,-500);//下落速度

        if(this.is_debug == true){ //如果需要调试就绘制调试信息
            cc.director.getPhysicsManager().debugDrawFlags = 
            cc.PhysicsManager.DrawBits.e_aabbBit |
            cc.PhysicsManager.DrawBits.e_pairBit |
            cc.PhysicsManager.DrawBits.e_centerOfMassBit |
            cc.PhysicsManager.DrawBits.e_jointBit |
            cc.PhysicsManager.DrawBits.e_shapeBit;

            let manager = cc.director.getCollisionManager();//获取碰撞引擎
            manager.enabledDebugDraw = true;//是否绘制碰撞组件的形状,默认为不绘制
            manager.enabledDrawBoundingBox = true;//是否绘制碰撞组件的包围盒,默认为不绘制
    	}else{ //如果不调试就不绘制
            cc.director.getPhysicsManager().debugDrawFlags = 0;
        }

        let manager = cc.director.getCollisionManager();//获取碰撞引擎
        manager.enabled = true;//开启碰撞引擎

        this.bird_anim.play("Bird");//播放小鸟煽动翅膀的动画

        let width = this.node.width;//获取屏幕宽
        let p_width = this.p0.children[0].width;//获取管子宽
        let interval = (width + p_width) / 3;//获取间距
        this.p0.x = interval;//设置第一组管子的位置
        this.p1.x = this.p0.x - interval;//设置第二组管子的位置
        this.p2.x = this.p1.x - interval;//设置第三组管子的位置
        console.log("屏幕宽" + width);//打印log
        console.log("管子宽" + p_width);
        console.log("间距" + interval);

        this.p1.y = 80 - Math.random() * 160;//开始的时候除了第一组,每一组管子的Y坐标是随机的
        this.p2.y = 80 - Math.random() * 160;
        this.scheduleOnce(function() { //定时器,0.05秒后执行,目的是在加载一些必要的东西之后再暂停游戏
            cc.director.pause();//暂停游戏
            console.log("暂停游戏");
        },0.05);
    }

    update(){ 
        this.groud0.x -= 2;//移动地面
        this.groud1.x -= 2;
        this.p0.x -= 2;//移动管子
        this.p1.x -= 2;
        this.p2.x -= 2;
        
        let left = - this.node.width / 2;//屏幕的最左边
        let right = this.node.width / 2;//屏幕的最右边

        if(this.groud0.x + this.groud0.width / 2 < left){ //如果地面一超出屏幕最左边就把地面移动到最右边
            this.groud0.x = this.node.width;//移动到最右边
            console.log("地面移动了");
        }
        if(this.groud1.x + this.groud1.width / 2 < left){ //如果地面二超出屏幕最左边就把地面移动到最右边
            this.groud1.x = this.node.width;//移动到最右边
            console.log("地面移动了");
        }

        if(this.p0.x + this.p0.children[0].width / 2 < left){ //如果第一组管子超出屏幕最左边
            this.p0.x = right + this.p0.children[0].width / 2;//把第一组管子移动到屏幕的最右边
            this.p0.y = 80 - Math.random() * 160;//随机设置Y坐标
            this.add_score(2);//加2分
            console.log("管子移动了");
        }

        if(this.p1.x + this.p1.children[0].width / 2 < left){ //如果第二组管子超出屏幕最左边
            this.p1.x = right + this.p1.children[0].width / 2;//把第二组管子移动到屏幕的最右边
            this.p1.y = 80 - Math.random() * 160;//随机设置Y坐标
            this.add_score(2);//加2分
            console.log("管子移动了");
        }

        if(this.p2.x + this.p2.children[0].width / 2 < left){ //如果第三组管子超出屏幕最左边
            this.p2.x = right + this.p2.children[0].width / 2;//把第三组管子移动到屏幕的最右边
            this.p2.y = 80 - Math.random() * 160;//随机设置Y坐标
            this.add_score(2);//加2分
            console.log("管子移动了");
        }

        this.score_label.string = "分数:" + this.score.toString();//实时更新分数 
    }

    onbtn(){ //点击屏幕时应该执行的代码
        console.log("点击了屏幕");
        this.bird_rig.linearVelocity = cc.v2(0,200);//让小鸟上升
        this.onbtn_music.play();//播放音效
    }

    onbtn_play(){ //开始游戏按钮执行的函数
        console.log("开始游戏");
        cc.director.resume();//恢复已经暂停的游戏
        this.btn_play.active = false;//隐藏开始游戏按钮
        this.btn_gameover.active = false;//隐藏重新开始按钮
        this.history_label.node.active = false;//隐藏历史最高分
        this.logo.active = false;//隐藏logo
    }

    onbtn_gameover(){ //重新开始按钮执行的函数
        console.log("重新开始");
        cc.director.resume();//让已经暂停的游戏恢复
        cc.director.loadScene("Game");//重新进入游戏
    }

    add_score(num:number){ //加分函数,num为想要加的分值
        this.score += num;//加分
    }

    GameOver(){ //游戏结束时应该执行的代码
        console.log("游戏结束");
        cc.director.pause();//暂停游戏
        this.btn_gameover.active = true;//显示重新开始按钮
        this.bird_anim.stop("Bird");//停止小鸟扇翅膀动画
        if(this.score > cc.sys.localStorage.getItem("his")){ //如果当前的得分超过了历史最高分
            cc.sys.localStorage.setItem("his",this.score);//重新记录历史最高分
            console.log("破纪录了!");
        }
    }

}

把写好的脚本挂到canvas上面
接下来一个一个绑定吧

按钮的事件还没有绑定,一个一个绑定

游戏开始的时候重新开始按钮是隐藏的哦

图片资源来源于网络

然后游戏就完成喽
Cocos技术交流Q群:1130122408
欢迎进群闲聊、技术交流都欢迎
源码在群里
制作不易,感谢你的观看
Thank You~~

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服