使用Cocos Creator开发微信小游戏（四）小游戏实战

小游戏介绍

一个左右跳一跳小游戏，点屏幕左边向左跳，点右边向右跳，落水为失败。

PC chrome浏览器下游戏截图：

​

微信开发者工具截图：

​

 小游戏场景图结构

​

 场景结构同上一篇中的挤柠檬汁小游戏结构大体相同

DataManager：记录游戏中的配置数据，游戏逻辑数据（分数 ）

SoundManager：管理游戏中的音效

ItemsManager：处理游戏过程中随机出现的道具（金币，玉米等）

Net：处理Http请求

UIManager：管理游戏中的所有UI

代码文件

​

主要文件代码

玩家控制（驴） Player.js

//驴

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    // ATTRIBUTES:

        //    default: null,        // The default value will be used only when the component attaching

        //                          // to a node for the first time

        //    type: cc.SpriteFrame, // optional, default is typeof default

        //    serializable: true,  // optional, default is true

        // },

        // bar: {

        //    get () {

        //        return this._bar;

        //    },

        //    set (value) {

        //        this._bar = value;

        //    }

        // },

        _UIGameNode: cc.Node,

    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start ()

    {

        this._UIGameNode = cc.find('Canvas/UIManager/UIGame');

    },

    //跳跃，相对位置

    jump(duration, destPos)

    {

        var rotAct = cc.jumpBy(duration, destPos, 80, 1);

        var callFunc = cc.callFunc(this.onJumpEnd, this);

        var seq = cc.sequence(rotAct, callFunc);

        if(destPos.x > 0)

        {

            this.node.setScaleX(1);     

        }

        else

        {

            this.node.setScaleX(-1); 

        }

        this.node.runAction(seq);

    },

    //跳跃到目标点, 绝对位置

    jumpTo(duration, destPos)

    {

        var rotAct = cc.jumpTo(duration, destPos, 80, 1);

        var callFunc = cc.callFunc(this.onJumpEnd, this);

        var seq = cc.sequence(rotAct, callFunc);

        if(destPos.x > 0)

        {

            this.node.setScaleX(1);     

        }

        else

        {

            this.node.setScaleX(-1); 

        }

        this.node.runAction(seq); 

    },

    //跳跃结束

    onJumpEnd()

    {

        this._UIGameNode.getComponent('UIGame').onPlayerJumpEnd(); 

    },

    // update (dt) {},

});

ItemManager.js

//游戏中物品池，管理复用的物品

//物品类型

var ItemType =

{

    //没有东西

    IT_None: -1,

    //草

    IT_Grass: 0,

    //玉米

    IT_Corn: 1,

    //萝卜

    IT_Radish: 2,

    //金币

    IT_Coin:3,

};

var ItemManager = cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    // ATTRIBUTES:

        //    default: null,        // The default value will be used only when the component attaching

        //                          // to a node for the first time

        //    type: cc.SpriteFrame, // optional, default is typeof default

        //    serializable: true,  // optional, default is true

        // },

        // bar: {

        //    get () {

        //        return this._bar;

        //    },

        //    set (value) {

        //        this._bar = value;

        //    }

        // },

        //物品Prefab列表

        ItemPrefabList:

        {

            default: [], 

            type: [cc.Prefab],

        },

        //概率列表

        ItemRateList:

        {

            default:[],

            type: [cc.Integer],                   

        },

        //随机的基数

        _RandBaseNum : 100,

        _RandRateList: [],

        //物品池

        _ItemPoolList: [],

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad ()

    {

        this._RandBaseNum = 0;

        //概率统计：

        for(var i = 0; i < this.ItemRateList.length; ++i)

        {

            this._RandBaseNum += this.ItemRateList[i];

            if(i == 0)

            {

                this._RandRateList[i] = this.ItemRateList[i];

            }

            else

            {

                this._RandRateList[i] =  this._RandRateList[i - 1] + this.ItemRateList[i];

            }

        }

        //物品池,各个物品先预创建3个

        for(let i = 0; i < 4; ++i)

        {

            this._ItemPoolList[i] = new cc.NodePool();


            for(var j = 0; j < 3; ++j)

            {

                var curItem = cc.instantiate(this.ItemPrefabList[i]);

                this._ItemPoolList[i].put(curItem);

                //设置为物品 

                curItem.group = "item";

                curItem.setTag(i);

            }

        }

    },

    start ()

    {


    },

    //获取当前Block挂载的物品

    getRandomItemType()

    {

        //[0, 1)

        var randNum = parseInt(cc.random0To1() * this._RandBaseNum);

        for(var i = 0; i < this._RandRateList.length; ++i)

        {

            if(randNum < this._RandRateList[i] )

            {


                break;

            }

        }

        //cc.log("getRandomItemType ",  randNum, );

        return i - 1;

    },

    //获取某类型的Item

    getItemByType( itemType )

    {

        if(itemType == ItemType.IT_None)

        {

            return null;

        } 

        if(itemType > 3 || itemType < 0)

        {

            return null;

        }

        var curItem = this._ItemPoolList[itemType].get();

        if(curItem == null)

        {

            curItem =  cc.instantiate(this.ItemPrefabList[itemType]);

            this._ItemPoolList[itemType].put(curItem);

            //设置为物品 

            curItem.group = "item";

            curItem.setTag(itemType);

            curItem = this._ItemPoolList[itemType].get();

            cc.log("new item ", itemType);

        }

        curItem.scale = 0.7;

        return curItem;

    },

    //将Item重新返回到Pool

    putItemToPool(curItem)

    {

        if(curItem.group != 'item')

        {

            //cc.log("putItemToPool invalid  group");

            return;

        }

        curItem.parent = null;

        var itemType = curItem.getTag();

        if(itemType > 3 || itemType < 0)

        {

            //cc.log("putItemToPool invalid  itemType");

            return;

        }

        this._ItemPoolList[itemType].put(curItem);

    },

    // update (dt) {},

});

module.exports =

{

    ItemType: ItemType,

    ItemManager: ItemManager,

}

UIGame.js部分代码

    //游戏状态的处理

    setGameState(state)

    {

        //处理暂停逻辑

        if(this._CurGameState == GameState.GS_Pause && state !=  this._CurGameState)

        {

            cc.director.resume();   

        }

        //新状态的处理

        this._CurGameState = state; 

        //准备状态

        if(this._CurGameState == GameState.GS_Ready)

        {

            this.StartBtn.node.active = true;

            this.PauseBtn.node.active = false;

        }

        //暂停

        else if(this._CurGameState == GameState.GS_Pause)

        {

            cc.director.pause();

            //按钮显示与隐藏

            this.StartBtn.node.active = true;

            this.PauseBtn.node.active = false;

        }

        //等待游戏中的操作

        else if(this._CurGameState == GameState.GS_WaitOP)

        {

            this.StartBtn.node.active = false;

            this.PauseBtn.node.active = true;

            //对当前Block进行下移操作

            if(this._CurBlockIndex < 0 || this._CurBlockIndex >= this._BlockListUse.length)

            {

                cc.log("GS_WaitOP invalid _CurBlockIndex ", this._CurBlockIndex);

                return;

            }

            var curBlock = this._BlockListUse[this._CurBlockIndex];

            if(curBlock == null)

            {

                cc.log("GS_WaitOP invalid curBlock null", this._CurBlockIndex);

                return;   

            }

            //block下移

            var downAct = curBlock.getActionByTag(0);

            if(downAct == null)

            {

                var downActScale = cc.scaleTo(1.5, 1, 0);

                var callFunc = cc.callFunc(this.onBlockDownFinish, this, curBlock);

                downAct = cc.sequence(downActScale, callFunc);

                curBlock.runAction(downAct);

            }

        }

        //游戏结束

        else if(this._CurGameState == GameState.GS_Over)

        {

            //按钮显示与隐藏

            this.StartBtn.node.active = false;

            this.PauseBtn.node.active = false;

            var UIManager = this.node.parent.getComponent('UIManager');

            UIManager.openUI(UIType.UIType_GameOver);

            //向子域发送，上传数据

            var DataManager = this.DataManager.getComponent('DataManager');

            if(window.wx != undefined)

            {

                window.wx.postMessage(

                    {

                        msgType: 1,

                        bestScore: DataManager.getCurScore(),

                    }

                );

            }

            //播放背景音乐

            if(this.SoundManager)

            {

                var soundMgr = this.SoundManager.getComponent('SoundManager');

                soundMgr.stopSound(SoundType.SoundType_Bg);

                soundMgr.playSound(SoundType.SoundType_Fall);

            }

        }

    },

动态场景生成：

    //------------------------Block操作 begin--------------------------

    //获取Block

    getBlock()

    {

        if(this._BlockList.length > 0)

        {

            var block = this._BlockList.pop();

            this._BlockListUse.push(block);

          return block; 

        }

        else

        {

            var block = cc.instantiate(this.BlockPrefab);

            this.pushBlock(block);

            return this.getBlock(); 

        }

    },

    //添加Block

    pushBlock(block)

    {

      // this._BlockPool.put(block);

        this._BlockList.push(block);

    },

    //移除Block(移除一个最下面的，屏幕外的Block) 还原到池里

    delelteUseBlock()

    {

      var firstBlock = this._BlockListUse.shift();

      firstBlock.parent = null;

      firstBlock.scaleY = 1;


      //将Block下物品还原到物品池

      this.restoreItemToPool(firstBlock);

      this._BlockList.push(firstBlock);

      this._CurBlockIndex -= 1;       

    },

小游戏完整工程

小游戏完整的cocos creator工程：奔跑吧小驴，此工程仅供学习参考用途。发现代码中的Bug或者任何问题，请留言。

没有积分的可以在下方留言索取资源，虽然不保证即时回复

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容