用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

系统主菜单如下图所示：

首先，介绍下这个主菜单，它包含了一个动画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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/407688.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

推荐一篇文章，.net3.0新特性

推荐一篇文章，.net3.0新特性

推荐一篇文章&#xff0c;.net3.0新特性 http://www.codeproject.com/KB/cs/csharp3.aspx转载于:https://www.cnblogs.com/yukaizhao/archive/2007/12/21/net30.html
阅读更多...
一些实用却很少用到的css以及标签

一些实用却很少用到的css以及标签

1、p:first-letter p标签里的第一个字设置样式 p:first-letter { font-size:200%; color:#8A2BE2; }<p>My best friend is Mickey.</p>2、p:first-line p标签里的设置第一行样式 3、:not&#xff08;p&#xff09; 设置非 p元素的所有元素的背景色 4、<hr>…
阅读更多...
Vue基础之Vue列表渲染

Vue基础之Vue列表渲染

列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法&#xff0c; items 是源数据数组并且 item 是数组元素迭代的别名 基本用法&#xff1a; 在 v-for 块中&#xff0c;我们拥有对父作用域属性的完全访问权限。 v-f…
阅读更多...
Pro*c使用指示变量来处理NULL列值

Pro*c使用指示变量来处理NULL列值

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle使用指示变量(专门用来处理NULL值)指示变量专门用于处理数据库的NULL值&#xff0c;它是一种short类型的C语言变量。当执行内嵌SELECT语句或FETCH语句时&#xff0c;如果不引用指示变量&#xff0c;并且返回值为NULL&am…
阅读更多...
React开发（101）:样式处理

React开发（101）:样式处理

{title: 品牌信息,dataIndex: intro,render: (text, row) > {return (<div><div style{{ float: left }}><img src{row.logo} style{{ width: 100px, height: 100px }} /></div><div style{{ float: left, marginLeft: 24px }}><p>{row…
阅读更多...
三 JSP 技术

三 JSP 技术

一 JSP 概述 1. 本质&#xff1a;在 HTML 语言中混合 Java 程序代码&#xff0c;由服务器端 Java 语言引擎解释执行。其中&#xff0c;HTML 负责描述信息显示格式&#xff0c;JSP 负责描述处理逻辑。 2. JSP 代码运行环境&#xff1a;需要系统安装 JSP 引擎&#xff0c;最常用的…
阅读更多...
Don't Laugh!I'm An English Book笔记（五）——面部词语大总结加补充

Don't Laugh!I'm An English Book笔记（五）——面部词语大总结加补充

head hairscalp&#xff1a;头皮dandruff&#xff1a;头皮屑braincerebral deathforeheadwrinkleeyebroweyelideyeeyelashcrows feetdouble eyelidnosesnub nose strawberry noseaquiline nosenostrilvibrissa&#xff1a;鼻毛cheek earearlobe&#xff1a;耳唇facial hairmous…
阅读更多...
vue 3D旋转木马轮播图

vue 3D旋转木马轮播图

利用carousel-3d插件。 安装 npm install -S vue-carousel-3d全局引入 import Vue from vue import Carousel3d from vue-carousel-3d Vue.use(Carousel3d&#xff09;局部引入 import { Carousel3d, Slide } from "vue-carousel-3d";export default {components:…
阅读更多...
Vue基础之事件处理器

Vue基础之事件处理器

监听事件&#xff1a; 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码 示例 方法事件处理器&#xff1a; 许多事件处理的逻辑都很复杂&#xff0c;所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用 示例 内…
阅读更多...
React开发（102）:别写立即执行函数

React开发（102）:别写立即执行函数

<Buttontype"link"onClick{() > {this.handlePro(row.certificationImg);}}>查看</Button>
阅读更多...
删除windows换行符^M

删除windows换行符^M

有些内容从windows下拷贝到unix下后&#xff0c;发现文本文件中多了^M&#xff08;在vim中查看&#xff09;&#xff0c;那么如何删除这个字符呢。 在网上找了下答案&#xff0c;有好几种方法&#xff0c;但是我试了下&#xff0c;只有一种是成功的&#xff0c;那就是”tr -d &…
阅读更多...
React开发（103）:详细路径 不然找不到

React开发（103）:详细路径 不然找不到

import { BaseTabs, BaseUploadImage, BaseHighSearch, BaseTable } from /common/components; import BaseTables from /common/components/BaseTables;
阅读更多...
vmin、vmax用处

vmin、vmax用处

vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时&#xff0c;如果使用 vw、wh 设置字体大小&#xff08;比如 5vw&#xff09;&#xff0c;在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当…
阅读更多...
分享SharpZipLip使用代码

分享SharpZipLip使用代码

zip类public class ZipClass { /**//// <summary> /// 压缩方法 /// </summary> /// <param name"strPath">要压缩文件夹</param> /// <param name"strFileName">生成的文件名</p…
阅读更多...
Vue基础之表单控件绑定

Vue基础之表单控件绑定

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&#xff0c;但 v-model 本质上不过是语法糖&#xff0c;它负责监听用户的输入事件以更新数据&#xff0c;并特别处理一些极端的例子 基础用法&#xff1…
阅读更多...
Makefile函数使用

Makefile函数使用

使用函数 在Makefile中可以使用函数来处理变量&#xff0c;从而让我们的命令或是规则更为的灵活和具有智能。make所支持的函数也不算很多&#xff0c;不过已经足够我们的操作了。函数调用后&#xff0c;函数的返回值可以当做变量来使用。 [编辑] 函数的调用语法 函数调用&am…
阅读更多...
[LeetCode] Search in Rotated Sorted Array

[LeetCode] Search in Rotated Sorted Array

二分 : 判断条件 当a[left] < a[mid]时&#xff0c;可以肯定a[left..mid]是升序的 循环有序 一共有以下两种情况 第一种 / / / /　　　 /　 /　 条件&#xff1a; (A[mid] > A[low]) &#xff0c;low~mid 二分&#xff0c;mid~high 递归 第二种 /　 / / /　　 / /　 条件…
阅读更多...
React开发（104）:models文件不能大写

React开发（104）:models文件不能大写

dva.js中models文件不能大写
阅读更多...
失败者的特征

失败者的特征

1 狂妄自大型:自以为老子天下第一,认为自己的认识才是正确的,才是没有错误的,实际上这些人的知识大部分来自于道听途说或是妄自没有求证的猜测就下定论,并一棍子打死,还不允许其它人也相信.2 口是心非型:心里面还是相信有某种力量能够支配人生,甚至还会经常拿着彩票的轨迹图天天…
阅读更多...
@keyframes中translate和scale混用问题

@keyframes中translate和scale混用问题

当你动画的这个节点用到translate定位居中时&#xff0c;再使用动画scale就会出现不居中的问题 这时需要把keyframes中translate写在scale的前面就解决了 keyframes bubble-in {0% {transform:translateX(-50%) scale(0);}100% {transform:translateX(-50%) scale(1);} }
阅读更多...
最新文章

Copyright @ 2022~2023