cocos2d-x JS（ScrollView）

最新推荐文章于 2023-12-21 15:44:59 发布
最新推荐文章于 2023-12-21 15:44:59 发布
阅读量1.6k 收藏
点赞数
分类专栏： JavaScript

这一节，我将实现游戏的选关界面，游戏50关，每一屏15关，总共4屏，左滑动可切换到上一屏，右滑动可切换到下一屏；

 

效果如下；

开始进入选关界面；

\

 

滑动到最后一屏；

\

 

点击关卡，进入主界面；

\

 

 

 

首先新建，GameSelectLayer.ccbx,GameSelectLayer.js,指定控制器让两个文件关联；设计选关场景如下，调节参数

\

 

创建每个单元格关卡GameSelectItemSprite.ccbx，这是一个小精灵层，如下图；

\

 

\

 

设计完成后，打开MainLayer.js,编写如下：

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
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;

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//
// 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：Cocos2d-x用户界面设计
kkchenjj的博客
09-24 895
Cocos2d-x提供了布局管理器，如Layout和Grid，用于组织和管理UI元素。在Cocos2d-x中，自定义UI组件是扩展游戏界面功能的关键。通过继承ui::Widget类，你可以创建出满足特定需求的UI元素。下面是一个自定义UI组件的示例，我们将创建一个简单的自定义按钮。// 自定义按钮类public:// 重写按钮的触摸事件if (!// 设置按钮的背景图片// 设置按钮的大小// 当按钮被触摸时，执行特定的逻辑// 例如，播放一个声音。
点、圆、矩形之间的简单碰撞检测
TPORL丶
03-27 3050
这里总结了一下点、圆、矩形之间的简单碰撞检测算法 (ps:矩形不包括旋转状态) 点和圆的碰撞检测： 1.计算点和圆心的距离 2.判断点与圆心的距离是否小于圆的半 isCollision: function(point, circle) { //点与圆心的距离 var distance = Math.sqrt(Math.pow(point.x -
Cocos2d-x 3.0 开发（十四）使用UIScrollView 实现大小不同物品拖动展示
热门推荐
阿修罗道
12-12 2万+
UI部分一直是cocos2d-x的弱项，而这种境况在3.0版本中将得到改善。让我们从一个曾经的坑入手——CCTableView，来看看这些新特性。先上个图......
cocos2d-x js学习
sh6842的专栏
07-02 1141
因为要求使用JS，所以着手使用JS进行学习，前端时间大概
关于cocos2dx -js中使用scrollview的心得
u013790419的专栏
04-26 4932
项目需要做一个滚动现实长图片的功能
cocos2d-x/js杂记
zhshuai1的专栏
09-15 282
cocos creator ​​​参见官方文档，目前有大量小型公司在使用cocos creator 进行游戏开发，这个对于非编程人员来说，确实更容易，开发效率也更高，并且对于团队来说，设计和开发分工也更容易，但是代码量基本不会少。但是对于开发来说，使用cocos2d-js更符合开发人员的习惯。对于cocos2d-x建议使用xcode/clion，对于cocos2d-js，建议使用webstorm。...
cocos2d-x中ScrollView的使用
01-09
在cocos2d-x游戏开发框架中，ScrollView是一个非常重要的组件，它允许用户在有限的显示区域内滚动查看超出范围的内容。ScrollView通常用于实现列表、菜单或者长内容的滚动浏览，对于移动设备尤其常见，因为屏幕空间...
cocos2d-x 游戏关卡选择的设计
10-19
在游戏开发领域，cocos2d-x 是一个广泛使用的开源跨平台2D游戏引擎，它支持多种编程语言，包括C++、Lua和JavaScript。在这个场景中，我们将专注于使用cocos2d-x v2.2.0来设计一个游戏的关卡选择系统。`CCTableView` ...
Cocos2d-JS中使用Cocos Studio资源03：设置界面
08-11
Cocos Studio是一款专为Cocos2d-x和Cocos2d-JS开发的游戏资源编辑工具，它提供了UI设计、动画编辑、音效管理等功能，使得开发者可以脱离代码，直观地设计游戏界面。 2. **导入Cocos Studio资源**： 在Cocos2d-JS...
魔塔-cocos2d-x-demo
11-04
在游戏开发领域，Cocos2d-x是一款广受欢迎的开源跨平台游戏引擎，它允许开发者使用C++、Lua或者JavaScript等语言来创建2D游戏。本篇将深入探讨如何利用Cocos2d-x框架制作一款经典的"魔塔"游戏，并通过具体的项目文件...
【cocos2d-x】利用CCScrollView, 实现帮助界面
java开发指南博客 【转载】
08-19 149
Cocos2d-x 2.0.1里面 集成了一些以前需要自己添加的控件，极大的方便作为开发者的我们。 今天给大家带来一个用CCScrollView 实现的帮主页面。 最终结果是这样的： 首先CCScrollView 在 Cocosd-x 的扩展库里面，要是使用的话，需要添加命名空间 using namespace cocos2d::extension; 或者是用cocos2...
Cocos2d-x Cocos2d-JS Cocos2d-lua概述
骑着蜗牛找马儿
08-23 5562
Cocos2d-x Cocos2d-JS Cocos2d-lua概述
cocos2d-x游戏 js开发前期准备
绥兮的博客
10-13 918
环境搭建 Python按机器版本正常下载安装即可， 按慕课网上找现在已经没有Cocos2d-Lua这个下载选项了 所以下载Cocos2d-x，创建项目的话用cmd命令行来跳转到解压目录，window的powershell可能会有问题。 ...
Cocos2d-x中jsb结构剖析
八里台行脚僧的专栏
08-14 3305
libs/javascript下有两部分bindings和spidermonkey。 其中spidermonkey为js虚拟机，暂时不去管它。 bindings下分为四部分，分别为主干部分，generated， js，obfuscate。 下面分别介绍。 1.主干部分，按照文件顺序一次介绍。     cocos2d_specifics.h声明一些回调和代理。包括触摸事件， sch
我们的cocos2dx-js规范
King的专栏
02-09 1578
我们的JavaScript规范，从整体上来说，是基于Airbnb的js规范，加上一些适用于cocos2dx-js和项目本身的自定义规则。 为什么选用Airbnb的js规范： 认可度高，该规范现在已经或者即将成为js国际标准了。看看Airbnb的Github，有恐怖的47000+的star官方提供Eslint插件支持。结合WebStorm，简直完美支持ES6、React等。虽然由
Cocos2d-x--安装程序步骤及.js脚本引擎问题
zlQQhs（莫落）的专栏
11-11 2684
1.安装前需准备VS2008或VS2010安装包，cocos2d-x安装包   VS2008下载：http://www.97sky.cn/soft/9916.html   cocos2d-x下载：http://cocos2d-x.googlecode.com/files/cocos2d-1.0.1-x-0.12.0.zip   2.下载VS2008到本地电脑，解压缩包，执行step.e
cocos2dx-js环境搭建
ubunrabbit各种笔记
02-28 476
在本文中，我将展示如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 开发环境。 下载必备的软件包 下载并安装WebStorm7。WebStorm7目前的稳定版本是7.0.3。为什么我们选择WebStorm？因为它提供了许多功能，如JavaScript代码的语法完成，调试，语法高亮，版本系统集成等，你可以去WebStorm的更多信息的官方网站。 ...
【终极教程】cocos2dx-js 分批次混淆压缩js文件
最新发布
2301_79527119的博客
12-21 234
说明:1> 由于我们当前游戏框架的结构是平台形式的就是一个大厅里面有若干个子游戏,所以在发布的时候得区分子游戏和大厅了解了一下 project.json 里面有一个 jsList 可以把所有放进去的js文件压缩混淆成一个大的文件但是我们游戏的子游戏非常多 这样子弄显然不合适，所以针对大厅和子游戏单独做压缩混淆2> 这里面主要采用的是ant + Closure Compile 方式1.先来看一下我们项目的结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值