cocos-creator使用记录19_根据当前关卡自动调整的滚动区

1.适用的情况
左右滑动式滚动区的关卡界面

2.实现的思路
关卡按钮使用预制文件，在进入关卡时动态生成。
根据关卡总数计算滚动区的大小。
根据当前关卡序号设置滚动区的位置和表示分页的点的显示。

3.控件布局
Canvas
--scrollView
--view
--content
--pointNode
--point1
--red
--black
--point2
--point3
--point4
--point5
--point6

4.代码
Common.js-------------------
module.exports = {
currentLevel: 1, //当前关卡
maxLevel: 29, //关卡总数
};
Level.js-------------------
var common = require('zqddn_zhb_Common');
cc.Class({
extends: cc.Component,

properties: {
scrollViewNode: cc.Node, //滚动区节点
scrollViewContentNode: cc.Node, //滚动区内容节点
linePrefab: cc.Prefab, //线预制
levelBtnPrefab: cc.Prefab, //关卡按钮预制
pointNode: { default: [], type: cc.Node }, //点节点
},

onLoad: function() {
this.first = true; //第1次
this.only1 = true; //只一次
this.only2 = true;
this.only3 = true;
this.currentPageIndex = 0; //当前滚动页序号
this.direction = 0; //滚动方向(0默认，1左，2右)
this.startOffset = 0; //开始滚动时第1帧
this.endOffset = 0; //开始滚动时第2帧

//根据关卡数设置滚动区大小
this.pageCount = Math.ceil(common.maxLevel / 12);
this.scrollViewContentNode.width = 750 * this.pageCount;
//添加线
for(var i = 0; i < this.pageCount; i++){
for(var j = 0; j < 4; j++){
var line = cc.instantiate(this.linePrefab);
this.scrollViewContentNode.addChild(line);
line.setPosition(375 + 750 * i, 460 - j * 255);
}
}
//添加关卡按钮
var currentLevel = cc.sys.localStorage.getItem('zqddn_zhb_currentLevel') || 1; //当前关卡
//currentLevel = common.currentLevel; //测试用
common.currentLevel = currentLevel;
var pos = [[140, 372], [375, 381], [613, 390], [140, 118], [375, 126], [613, 134], [140, -136], [375, -129], [613, -121], [140, -390], [375, -384], [613, -375]];
for(var i = 0; i < common.maxLevel; i++){
var btnNode = cc.instantiate(this.levelBtnPrefab);
this.scrollViewContentNode.addChild(btnNode);
btnNode.setPosition(pos[i % 12][0] + 750 * Math.floor(i / 12), pos[i % 12][1]);
//设置按钮
if(i < currentLevel - 1){ //已过关
btnNode.getChildByName("select").active = false;
btnNode.getChildByName("image1").active = false;
btnNode.getChildByName("num").active = true;
btnNode.getChildByName("num").getComponent(cc.Label).string = (i + 1 < 10) ? ("0" + (i + 1)) : (i + 1);
btnNode.getChildByName("star0").active = true;
btnNode.getChildByName("star1").active = false;
btnNode.getChildByName("lock").active = false;
}else if(i == currentLevel - 1){ //当前关
btnNode.getChildByName("select").active = true;
btnNode.getChildByName("image1").active = false;
btnNode.getChildByName("num").active = true;
btnNode.getChildByName("num").getComponent(cc.Label).string = (i + 1 < 10) ? ("0" + (i + 1)) : (i + 1);
btnNode.getChildByName("star0").active = false;
btnNode.getChildByName("star1").active = true;
btnNode.getChildByName("lock").active = false;
}else{ //未解锁
btnNode.getChildByName("select").active = false;
btnNode.getChildByName("image1").active = true;
btnNode.getChildByName("num").active = false;
btnNode.getChildByName("num").getComponent(cc.Label).string = (i + 1 < 10) ? ("0" + (i + 1)) : (i + 1);
btnNode.getChildByName("star0").active = false;
btnNode.getChildByName("star1").active = false;
btnNode.getChildByName("lock").active = true;
}
//绑定事件
var clickEventHandler = new cc.Component.EventHandler();
clickEventHandler.target = this.node;
clickEventHandler.component = "zqddn_zhb_Level";
clickEventHandler.handler = "onLevelBtn";
clickEventHandler.customEventData = (i + 1).toString();
var btn = btnNode.getComponent(cc.Button);
btn.clickEvents.push(clickEventHandler);
}
//设置点位置(目前只添加了6个点，以后根据需要再添加)
for(var i = 0; i < this.pointNode.length; i++){
this.pointNode[i].active = i < this.pageCount ? true : false;
}
var isEvenNumber = this.pageCount % 2 == 0 ? true : false;
if(isEvenNumber){ //偶数
var half = Math.floor(this.pageCount / 2);
for(var i = 0; i < this.pageCount; i++){
this.pointNode[i].x = -(half - i - 1) * 40 - 20;
}
}else{ //奇数
var half = Math.ceil(this.pageCount / 2);
for(var i = 0; i < this.pageCount; i++){
this.pointNode[i].x = -(half - i - 1) * 40;
}
}
//设置滚动区为当前关按钮所在页面
for(var i = 0; i < this.pageCount; i++){
if(currentLevel - 1 >= i * 12 && currentLevel - 1 <= (i + 1) * 12 - 1){
this.currentPageIndex = i;
break;
}
}
console.log("currentPageIndex=" + this.currentPageIndex);
this.scheduleOnce(function(){ //延迟到滚动区设置完毕(不延迟会出现页面一直在第1页)
this.scrollToPage(this.currentPageIndex); //滚动到指定百分比位置
}, 0.1);

if(cc.sys.platform === cc.sys.WECHAT_GAME){ //微信平台
this.scheduleOnce(function(){
this.setMoreGameBtnImage();
}, 0.1); //延迟0.1秒
}

this.scrollViewNode.on("scrolling", function(){ //滚动中事件
if(this.only3 && !this.first){
this.only3 = false;
this.startOffset = this.scrollViewContentNode.x;
}
}, this);
this.scrollViewNode.on("scroll-ended", function(){ //滚动结束事件
if(this.only2 && !this.first){
this.only2 = false;
this.scrollToTarget();
}
}, this);
},

scrollToTarget: function(){
this.endOffset = this.scrollViewContentNode.x;
var t = Math.ceil(Math.abs(this.endOffset)) % 750;
if(t >= 0 && t <= 10){ //太小的滚动，直接忽略
this.only2 = true;
this.only3 = true;
return;
}
this.direction = this.endOffset - this.startOffset < 0 ? 1 : 2;
if(this.direction == 1){ //向左
this.currentPageIndex = this.currentPageIndex + 1 <= (this.pageCount - 1) ? (this.currentPageIndex + 1) : this.pageCount - 1;
}else if(this.direction == 2){ //向右
this.currentPageIndex = this.currentPageIndex - 1 >= 0 ? (this.currentPageIndex - 1) : 0;
}
this.scrollToPage(this.currentPageIndex); //滚动到指定百分比位置
},

scrollToPage: function(pageIndex){
this.only2 = this.only3 = false;
var percent = 0;
if(this.pageCount == 1){ //滚动区只有1页
return;
}else if(this.pageCount == 2){ //滚动区只有2页
percent = pageIndex;
}else if(this.pageCount >= 3){ //滚动区有超过3页
if(pageIndex == 0){ //第1页
percent = 0;
}else if(pageIndex == this.pageCount - 1){ //最后一页
percent = 1;
}else{
percent = pageIndex / (this.pageCount - 1);
}
}
console.log("percent=" + percent);
this.scrollViewNode.getComponent(cc.ScrollView).scrollToPercentHorizontal(percent, 0.2); //滚动到指定百分比位置
for(var i = 0; i < this.pageCount; i++){
this.pointNode[i].getChildByName("black").active = pageIndex == i ? false : true; //黑色点
}
this.scheduleOnce(function(){ //初始化
this.only2 = this.only3 = true;
this.direction = 0;
this.first = false;
}, 0.2);
},
});

cocos-creator使用记录19_根据当前关卡自动调整的滚动区

猜你喜欢