这一节,我将实现游戏的选关界面,游戏50关,每一屏15关,总共4屏,左滑动可切换到上一屏,右滑动可切换到下一屏;
效果如下;
开始进入选关界面;
滑动到最后一屏;
点击关卡,进入主界面;
代码下载:http://www.kuaipan.cn/file/id_25348935635745079.htm?source=1
首先新建,GameSelectLayer.ccbx,GameSelectLayer.js,指定控制器让两个文件关联;设计选关场景如下,调节参数
创建每个单元格关卡GameSelectItemSprite.ccbx,这是一个小精灵层,如下图;
设计完成后,打开MainLayer.js,编写如下:
- GAME_LEVEL = 0;
- var GameSelectLayer = function () {
- cc.log("GameSelectLayer");
- this.levelScrollPanel = this.levelScrollPanel || {};
- this.pageIndex = 0;
- this.pageMax = 4;
- this.dotNode = this.dotNode || {};
- this.start = false;
- };
- GameSelectLayer.prototype.onDidLoadFromCCB = function () {
- if (sys.platform == 'browser') {
- this.onEnter();
- }
- else {
- this.rootNode.onEnter = function () {
- this.controller.onEnter();
- };
- }
- this.rootNode.onExit = function () {
- this.controller.onExit();
- };
- this.rootNode.onTouchesBegan = function (touches, event) {
- this.controller.onTouchesBegan(touches, event);
- return true;
- };
- this.rootNode.onTouchesMoved = function (touches, event) {
- this.controller.onTouchesMoved(touches, event);
- return true;
- };
- this.rootNode.onTouchesEnded = function (touches, event) {
- this.controller.onTouchesEnded(touches, event);
- return true;
- };
- this.rootNode.setTouchEnabled(true);
- };
- GameSelectLayer.prototype.onEnter = function () {
- this.maxColumns = 3;
- this.columnSize = 177;
- this.maxRows = 5;
- this.rowSize = 104;
- cc.log("GameSelectLayer");
- this.itemDatas = [];
- var itemName = "";
- var levelPan = cc.Layer.create();
- var currentLevel = sys.localStorage.getItem("pb_level");
- if (currentLevel == null) {
- currentLevel = 0;
- }
- sys.localStorage.setItem("pb_level_score_1", "S");
- currentLevel = 3;
- for (var i = 0; i < 50; i++) {
- var xIndex = Math.floor(i % 3) + Math.floor(i / 15) * 3;
- var yIndex = Math.floor(i / 3 % 5);
- var levelScore = "A"
- if (i < currentLevel) {
- levelScore = sys.localStorage.getItem("pb_level_score_" + i);
- if (levelScore == null || levelScore == '') {
- levelScore = "A";
- }
- if ("S" == levelScore) {
- itemName = "GameSelectItemScoreS";
- }
- else {
- itemName = "GameSelectItemScore";
- }
- }
- else if (i == currentLevel) {
- itemName = "GameSelectItemLevel";
- }
- else {
- itemName = "GameSelectItemLocked";
- }
- var itemData = {
- xIndex: xIndex,
- yIndex: yIndex,
- index: i,
- type: itemName,
- onItemAction: function () {
- cc.log("onItemAction");
- var action = cc.ScaleBy.create(0.5, 0.8);
- this.rootNode.runAction(cc.Sequence.create(
- action, action.reverse(), cc.DelayTime.create(2)
- // cc.CallFunc.create(this.onItemClicked())
- ));
- },
- onItemClicked: function () {
- cc.log("onItemClicked");
- GAME_LEVEL = (this.index + 1);
- require("MainLayer.js");
- cc.BuilderReader.runScene("", "MainLayer");
- },
- onLockOpened: function () {
- }
- };
- var item = cc.BuilderReader.loadAsNodeFrom("", "GameSelectItemSprite", itemData);
- if (item == null) {
- continue;
- }
- item.setPosition(cc.p(this.columnSize * xIndex, this.rowSize * (4 - yIndex)));
- item.setZOrder(11);
- itemData.rootNode = item;
- itemData.controller = this;
- this.itemDatas.push(itemData);
- itemData.levelNum.setString("" + (i + 1));
- levelPan.addChild(item);
- }
- levelPan.setContentSize(cc.size(this.columnSize * 12, this.rowSize * 5));
- this.levelScrollPanel.setTouchEnabled(false);
- this.levelScrollPanel.setBounceable(true);
- this.levelScrollPanel.setContainer(levelPan);
- this.levelScrollPanel.setTouchPriority(-99999);
- this.pageDots(0);
- }
- GameSelectLayer.prototype.onUpdate = function () {
- }
- GameSelectLayer.prototype.onExit = function () {
- }
- GameSelectLayer.prototype.onTouchesBegan = function (touches, event) {
- cc.log("onTouchesBegan");
- this.beganPosition = touches[0].getLocation();
- }
- GameSelectLayer.prototype.onTouchesMoved = function (touches, event) {
- this.movePosition = touches[0].getLocation();
- }
- GameSelectLayer.prototype.onTouchesEnded = function (touches, event) {
- cc.log("onTouchesEnded");
- var loc = touches[0].getLocation();
- var distanceX = this.beganPosition.x - loc.x;
- var x = this.levelScrollPanel.getContentOffset().x;
- var y = this.levelScrollPanel.getContentOffset().y;
- this.levelScrollPanel.unscheduleAllCallbacks();
- if (distanceX > 50) {
- if (this.pageIndex < 4) {
- this.pageIndex += 1;
- }
- this.pageDots(this.pageIndex);
- }
- else if (distanceX < -50) {
- if (this.pageIndex > 0) {
- this.pageIndex -= 1;
- }
- this.pageDots(this.pageIndex);
- }
- else {
- this.onItemClicked(loc);
- }
- this.levelScrollPanel.setContentOffsetInDuration(cc.p(-this.columnSize * 3 * this.pageIndex, y), 0.5);
- }
- GameSelectLayer.prototype.onItemClicked = function (location) {
- var x = location.x;
- var y = location.y;
- if (!isInScroll(location)) {
- cc.log("out");
- return;
- }
- var scrollPanelRect = this.levelScrollPanel.getBoundingBox();
- var xIndex = Math.floor((x - 110) / this.columnSize) + this.pageIndex * 3;
- var yIndex = 4 - Math.floor((y - 385) / this.rowSize);
- cc.log("scrollX==" + scrollPanelRect.x + ",scrollY==" + scrollPanelRect.y);
- cc.log("xIndex==" + xIndex + ",yIndex==" + yIndex);
- for (var i = 0; i < this.itemDatas.length; i++) {
- if (this.itemDatas[i].xIndex == xIndex && this.itemDatas[i].yIndex == yIndex) {
- cc.log("click i=" + i);
- this.itemDatas[i].onItemClicked();
- break;
- }
- }
- }
- GameSelectLayer.prototype.pageDots = function (position) {
- this.dotNode.removeAllChildren();
- for (var i = 0; i < 4; i++) {
- var dots = ["s_point.png", "s_point_s.png"];
- var type = 0;
- if (position == i) {
- type = 1;
- }
- var dotSprite = cc.Sprite.createWithSpriteFrameName(dots[type]);
- dotSprite.setAnchorPoint(cc.p(0, 1));
- dotSprite.setPosition(cc.p(30 * i, 60));
- dotSprite.setZOrder(100);
- this.dotNode.addChild(dotSprite);
- }
- }
- function isInScroll(location) {
- var x = location.x;
- var y = location.y;
- if (x > 110 && x < (110 + 510) && y > 385 && y < (385 + 500)) {
- return true;
- }
- return false
- }
同时修改Main.js,加入,require("GameSelectLayer.js");;
然后修改StartLayer.js,让点击开始后跳转到GameSelectLayer.js;
- //
- // CleanerScoreScene class
- //
- var StartLayer = function () {
- cc.log("StartLayer")
- };
- StartLayer.prototype.onDidLoadFromCCB = function () {
- // this.rootNode.onUpdate = function (dt)
- // {
- // this.controller.onUpdate();
- // };
- // this.rootNode.schedule(this.rootNode.onUpdate);
- if (sys.platform == 'browser') {
- this.onEnter();
- }
- else {
- this.rootNode.onEnter = function () {
- this.controller.onEnter();
- };
- }
- this.rootNode.onExit = function () {
- this.controller.onExit();
- };
- };
- StartLayer.prototype.onEnter = function () {
- }
- StartLayer.prototype.onUpdate = function () {
- }
- StartLayer.prototype.onPlayClicked = function () {
- cc.BuilderReader.runScene("", "GameSelectLayer");
- }
- StartLayer.prototype.onExit = function () {
- }
完成后运行,ok,效果最上面;
下一篇文章 我会介绍cocos2d-x editor的串联游戏流程 笔者(李元友)
资料来源:cocos2d-x editor
相关推荐
资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...
资源名称:大富翁手机游戏开发实战基于Cocos2d-x3.2引擎内容简介:李德国编著的《大富翁手机游戏开发实战(基于 Cocos2d-x3.2引擎)》使用Cocos2d-x游戏引擎技术,带领读者一步一步从零开始进行大富翁移动游戏的开发...
Cocos2d-x是移动跨平台开发最流行的游戏引擎,而本书是一本很全面的、比较‘接地气’的游戏开发教程。书中汇聚了热门手机游戏《捕鱼达人》开发的实战经验,作者从最基础的内容开始,逐步深入地介绍了Cocos2d-x的相关...
精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发
cocos2d-x-2.1.5
资源名称:Cocos2D-X游戏开发技术精解内容简介:Cocos2D-X是一款支持多平台的 2D手机游戏引擎,支持iOS、Android、BlackBerry等众多平台。当前,很多移动平台流行的游戏,都是基于Cocos2D-X开发的。 《Cocos2D-X...
在使用cocos2d-x开发游戏的过程中,为了实现逻辑和显示相分离。 在下通宵了一个晚上,写出了该事件类。 谨记,该事件只能用于cocos2d-x中。 事件发送者需要继承EventDispatcher类 事件接收者需要继承EventHandle类...
Cocos2d-x-3.x游戏开发之旅-钟迪龙著 全新pdf版和附书代码(代码为工程文件,可复制) 附带目录标签
Cocos2d-x 3.x游戏开发实战pdf含目录,内容详细,强烈推荐给大家。
《Cocos2D-X游戏开发技术精解》详细介绍如何使用Cocos2D-X引擎开发自己的移动平台游戏。全书共15章,主要内容包括:Cocos2D-X引擎简介;如何建立跨平台的开发环境;引擎的核心模块——渲染框架;如何实现动态画面和...
cocos2d-x实战项目 01.cocos2d-x原理及环境配置.rar 03.cocostudio使用方法及UI控制.rar 04.XML文件读取与骨骼动画.rarcocos2d-x实战项目 01.cocos2d-x原理及环境配置.rar 03.cocostudio使用方法及UI控制.rar 04.XML...
使用cocos2d-x编写的ui编辑器(界面编辑器),实现了ui的可视化编辑,支持sprite、button、label、scale9sprite等等,导出配置文件格式为json格式-Cocos2d-x prepared ui interface editor, ui visual editing ...
cocos2d-x-3.2下载,不多说。或者可以下载另一个资源 cocos引擎老版本集合(cocos2d-x-2.2.1 - 3.5) http://download.csdn.net/download/crazymagicdc/9982656
一线资深游戏开发工程师根据Cocos2D-X 最新版本撰写,Cocos2D-X创始人王哲、CSDN创始人蒋涛联袂推荐 完全通过真实游戏案例驱动,不仅将Cocos2D-X的各种功能、原理、技巧融入其中,而且还详细讲解了空战类、塔防类、...
本书是《Cocos2d-x 游戏开发之旅》的升级版,修改了2.0版进阶到3.0版后的一些内容,新增了对CocoStudio、UI编辑器、Cocos2d-x 3.0新特性以及网络方面的知识点。主要介绍常用的API使用方式;介绍如何通过官方Demo获取...
Cocos2d-x高级开发教程:制作自己的《捕鱼达人》 图书简介: 《Cocos2d-x高级开发教程:制作自己的《捕鱼达人》》是国内第一本全面深入讲解Cocos2d-x进阶内容的图书,Cocos2d-x创始人王哲作序推荐,《捕鱼达人》开发...
Cocos2d-x实战 JS卷 Cocos2d-JS开发 PDF 电子书完整版本
Cocos2d-x 3.2 大富翁游戏项目开发关卡选择scrollview界面
李德国编著的《大富翁手机游戏开发实战(基于 Cocos2d-x3.2引擎)》使用Cocos2d-x游戏引擎技术,带领读者一步一步从零开始进行大富翁移动游戏的开发。本书根据大富翁项目一一展开讲解游戏开发过程中涉及的各方面内容...
精通Cocos2d-x游戏开发(进阶卷)源代码 精通Cocos2d-x游戏开发(进阶卷)源代码 精通Cocos2d-x游戏开发(进阶卷)源代码