系統主菜單如下圖所示：

首先，介紹下這個主菜單，它包含了一個動畫logo以及一個按鈕選項，動畫logo每隔1秒鐘切換一張圖片，點擊相應的按鈕選項會切換不同的游戲場景。

下面看下這個界面的源碼：

?

/*** Power by html5中文網(html5china.com)* author: jackyWHJ*/cc.dumpConfig(); var winSize; var SysMenu = cc.Layer.extend({_hero:null,_logo:null,_logoFrameCache:null,imagesArrLen:0,bigImgLen:0,init:function () {var bRet = false;if (this._super()) {this._logoFrameCache = cc.SpriteFrameCache.getInstance();this._logoFrameCache.addSpriteFrames(s_textureBigImage_plist);winSize = cc.Director.getInstance().getWinSize();var sp = cc.Sprite.create(s_b01);sp.setAnchorPoint(cc.p(0,0));//設置錨點左下角this.addChild(sp, 0, 1);//addChild(cocos2d::CCNode *child, int zOrder, int tag);// 其中child參數為將要添加的節點。對于場景而言。添加的節點就是層，先添加的層會被置于后添加的層之下。// 如果想要指定先后次順，可以使用不同的zOrder，zOrder代表該節點下元素的先后次序，值越大顯示越靠上。// 默認值是0.tag是元素的標識號碼，如果子節點設置了tag值，就可以在它的父節點中利用tag值找到它var newGameNormal = cc.Sprite.create(s_menu, cc.rect(0, 0, 126, 33));var newGameSelected = cc.Sprite.create(s_menu, cc.rect(0, 33, 126, 33));var newGameDisabled = cc.Sprite.create(s_menu, cc.rect(0, 33 * 2, 126, 33));var gameSettingsNormal = cc.Sprite.create(s_menu, cc.rect(126, 0, 126, 33));var gameSettingsSelected = cc.Sprite.create(s_menu, cc.rect(126, 33, 126, 33));var gameSettingsDisabled = cc.Sprite.create(s_menu, cc.rect(126, 33 * 2, 126, 33));var aboutNormal = cc.Sprite.create(s_menu, cc.rect(252, 0, 126, 33));var aboutSelected = cc.Sprite.create(s_menu, cc.rect(252, 33, 126, 33));var aboutDisabled = cc.Sprite.create(s_menu, cc.rect(252, 33 * 2, 126, 33));var newGame = cc.MenuItemSprite.create(newGameNormal, newGameSelected, newGameDisabled, function () {this.onButtonEffect();flareEffect(this, this, this.onNewGame);}.bind(this));var gameSettings = cc.MenuItemSprite.create(gameSettingsNormal, gameSettingsSelected, gameSettingsDisabled, this.onSettings, this);var about = cc.MenuItemSprite.create(aboutNormal, aboutSelected, aboutDisabled, this.onAbout, this);//系統菜單var menu = cc.Menu.create(newGame, gameSettings, about);menu.alignItemsVerticallyWithPadding(10);this.addChild(menu, 1, 2);menu.setPosition(winSize.width / 2 , winSize.height / 2 - 80);//logo動畫this.bigImgLen = LLK.CONTAINER.BIGIMAGES.length;this._logo = cc.Sprite.createWithSpriteFrameName(LLK.CONTAINER.BIGIMAGES[Math.floor( Math.random()*this.bigImgLen)]);this._logo.setAnchorPoint(cc.p(0, 0));this._logo.setPosition(winSize.width/2 -100, 300);this.addChild(this._logo, 10, 1);var animFrames = []; // 將所有幀存入一個數組for (var i=0;i<this.bigImgLen;i++) {//采用循環添加動畫的每一幀var frame =this._logoFrameCache.getSpriteFrame(LLK.CONTAINER.BIGIMAGES[i]);if (frame) {animFrames.push(frame);}}// 創建動畫，設置播放間隔var animation = cc.Animation.create(animFrames, 1);// animation.setDelayPerUnit(0.1);//設置動畫播放完成是否保持在第一幀，true為保持在第一幀，false為保持在最后一幀//animation.setRestoreOriginalFrame(false);this._logo.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));
if (LLK.SOUND) {cc.AudioEngine.getInstance().setMusicVolume(0.7);cc.AudioEngine.getInstance().playMusic(s_mainMainMusic_mp3, true);}// this.schedule(this.update, 0.05);//schedule(callback_fn, interval, repeat, delay)// 里面四個參數對應的含義是：// callback_fn：調用的方法名// interval：間隔多久再進行調用 單位是秒// repeat：重復的次數// delay：延遲多久再進行調用bRet = true;}return bRet;},onNewGame:function (pSender) {//load resourcescc.Loader.preload(g_maingame, function () {var scene = cc.Scene.create();scene.addChild(GameLayer.create());scene.addChild(GameControlMenu.create());cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));}, this);},onSettings:function (pSender) {this.onButtonEffect();var scene = cc.Scene.create();scene.addChild(SettingsLayer.create());cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.0, scene));},onAbout:function (pSender) {this.onButtonEffect();var scene = cc.Scene.create();scene.addChild(AboutLayer.create());cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.0, scene));},onButtonEffect:function(){if (LLK.SOUND) {var s = cc.AudioEngine.getInstance().playEffect(s_buttonEffect_mp3);}} });SysMenu.create = function () {var sg = new SysMenu();if (sg && sg.init()) {return sg;}return null; };SysMenu.scene = function () {var scene = cc.Scene.create();var layer = SysMenu.create();scene.addChild(layer);return scene; }; 首先，在初始化方法里，我們把頁面需要的元素添加進去。在這里，我們是先加載了頁面動畫logo所需要的紋理集： this._logoFrameCache = cc.SpriteFrameCache.getInstance();this._logoFrameCache.addSpriteFrames(s_textureBigImage_plist);

再次是添加背景圖片，使用cc.Sprite.create(s_b01);來創建背景的sprite，然后設置錨點并把它添加到Layer：

var sp = cc.Sprite.create(s_b01); sp.setAnchorPoint(cc.p(0,0));//設置錨點左下角 this.addChild(sp, 0, 1);//addChild(cocos2d::CCNode *child, int zOrder, int tag);// 其中child參數為將要添加的節點。對于場景而言。添加的節點就是層，先添加的層會被置于后添加的層之下。// 如果想要指定先后次順，可以使用不同的zOrder，zOrder代表該節點下元素的先后次序，值越大顯示越靠上。// 默認值是0.tag是元素的標識號碼，如果子節點設置了tag值，就可以在它的父節點中利用tag值找到它

接著是添加菜單按鈕組，使用cc.MenuItemSprite.create創建各個菜單，這里需要添加他們各自的監聽方法，

//newGame菜單
var newGame = cc.MenuItemSprite.create(newGameNormal, newGameSelected, newGameDisabled, function () {this.onButtonEffect();flareEffect(this, this, this.onNewGame);}.bind(this));

使用cc.Menu.create創建菜單組把它們添加進去，之后添加到Layer,設置布局位置。

//系統菜單 var menu = cc.Menu.create(newGame, gameSettings, about); menu.alignItemsVerticallyWithPadding(10); this.addChild(menu, 1, 2); menu.setPosition(winSize.width / 2 , winSize.height / 2 - 80);

最后一個點就是logo動畫了，先創建logo，把它添加到Layer，之后創建動畫，并讓logo執行動畫。

//logo動畫
this.bigImgLen = LLK.CONTAINER.BIGIMAGES.length; this._logo = cc.Sprite.createWithSpriteFrameName(LLK.CONTAINER.BIGIMAGES[Math.floor( Math.random()*this.bigImgLen)]); this._logo.setAnchorPoint(cc.p(0, 0)); this._logo.setPosition(winSize.width/2 -100, 300); this.addChild(this._logo, 10, 1); var animFrames = []; // 將所有幀存入一個數組 for (var i=0;i<this.bigImgLen;i++) {//采用循環添加動畫的每一幀var frame =this._logoFrameCache.getSpriteFrame(LLK.CONTAINER.BIGIMAGES[i]);if (frame) {animFrames.push(frame);} } // 創建動畫，設置播放間隔 var animation = cc.Animation.create(animFrames, 1); // animation.setDelayPerUnit(0.1); //設置動畫播放完成是否保持在第一幀，true為保持在第一幀，false為保持在最后一幀 //animation.setRestoreOriginalFrame(false);this._logo.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));

?

?

下面是幾個主要功能的教程

用cocos2d-html5做的消除類游戲《英雄愛消除》——概述

用cocos2d-html5做的消除類游戲《英雄愛消除》(1)——系統主菜單

用cocos2d-html5做的消除類游戲《英雄愛消除》(2)——Block設計實現

用cocos2d-html5做的消除類游戲《英雄愛消除》(3)——游戲主界面

用cocos2d-html5做的消除類游戲《英雄愛消除》(4)——游戲結束

?

ps:概述中有完整源碼鏈接

轉載于:https://www.cnblogs.com/jackyWHJ/p/3777803.html

總結

以上是生活随笔為你收集整理的用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。