怎么将数据写活 -> 数据更新(不能仅仅是摆设好,却无法变更的数据)
最近写项目,频繁遇到的问题,可能是之前接口这块的知识接触的比较少,所以现在一旦涉及到这一方面相关,只要稍微复杂一点点,就会耽搁大量时间.经常踩坑的地方: 在一个外层类里面,单独操作一个共有类里面的某个数据
案例1. 找不同
案例需求:
- 总共60s的游戏时间,时间归零游戏终止
- 关卡数会随玩家进行游戏,发生对应的变更.总共13个关卡,如果在60s之内完成13关,时间停留在完成13关的那个时间段,游戏终止
- 点击盛放唯一一个不同内容的小方格,方块阵整体左滑消失在界面,并且会出现新的一个方块阵,小方格的数量同步增多,到6*6则不再增加
最终效果
遇到的问题:
- 怎么将有旗子的图标的刚好摆放在没有摆放车子的小方格里面???
/* --------- 单独操作Data里面的公共类 -> 卡车 ---------*/
private carArr = ["car1_png", "car2_png", "car3_png", "car4_png", "car5_png", "car6_png", "car7_png", "car8_png",
"car9_png", "car10_png", "car11_png", "car12_png", "car13_png"];
private roleArr = ["role1_png", "role2_png", "role3_png", "role4_png", "role5_png", "role6_png", "role7_png",
"role8_png", "role9_png", "role10_png", "role11_png", "role12_png", "role13_png"];
private digit: number; // 随机数,所有卡车方块里随机一个位置上出现一个人物方块
private all: number; // -> 小方块的总数 (4)
private index: number = 0; // 模拟翻页下标
private getData() {
this.all = this._row * this._col;
this.digit = Math.round(Math.random() * (this.all - 1)); // (0 1 2 3)
// console.log("人物随机数: " + this.digit);
for (var i = 0; i < this.len; i++) {
this.all -= 1; // (3 2 1 0)
if (this.all == this.digit) { // -> 出现人物 摆放问题: 如何让它刚好摆放在没有放车的方块里面? 重复利用Data里面存放资源的公共类!!!
// var role: egret.Bitmap = new egret.Bitmap(); // -> 跑偏,重建很难确认人物摆放的坐标
// role.texture = RES.getRes(this.roleArr[this.index]);
// role.width = role.height = 75;
// role.x = 230 + 84 * i;
// role.y = 550 + 84 * j;
// this.container.addChild(role);
this.squareArr[i].carRes = this.roleArr[this.index];
console.log("随机数all: " + this.all, "随机数digit: " + this.digit, i);
this.squareArr[i].touchEnabled = true;
this.squareArr[i].once(egret.TouchEvent.TOUCH_TAP, this.onClick, this);
} else { // -> 出现卡车
var car: Data = this.squareArr[i];
car.carRes = this.carArr[this.index];
this.container.addChild(car);
}
// console.log("进入次数: " + i);
}
}
- 怎样在不影响其他元素的情况下,将页面中央的整个方块阵区域进行替换???
思路: 将页面中央需要替换的所有元素全部放在一个容器里面,触发点击事件的时候,操作容器就可以了!
/* --------- 左滑效果开关 -> 关键点: container的基点 ---------*/
wy.Tools.center(this.container);
console.log("容器x: " + this.container.x);
this.container.x = 82;
/* --------- 点击人物图标 -> 可以达到划过效果 ---------*/
private onClick() {
if (startPage._level >= 13) {
wy.changeView(endPage);
this.levelText.text = "LEVEL 13";
this.timer.stop();
return;
}
// 容器整体左滑效果 -> 页面中央重新布局
egret.Tween.get(this.container).to({ x: -640 }, 200).call((val) => {
this._row++; // -> 每点击一次,布局行列自增1
this._col++;
if (this._row >= 6 && this._col >= 6) {
this._row = this._col = 6;
}
console.log(this.all, this.digit);
startPage._level++; // -> 每点击一次,关卡增1
this.levelText.text = `LEVEL ${startPage._level}`;
this.index++;
this.changeCount(); // 重新渲染一次方格布局 -> (踩坑:一定要记得将里面原有的元素全部移除!!!)
}, this, [this.container])
console.log("容器x: " + this.container.x);
}
- 点击事件发生后,方块阵替换过程中,图标摆放出错 -> 主要体现在: 有旗子的图标时有时没有
出现问题的原因: 重新渲染一次方格布局的时候,并没有将上一次的内容清除掉
解决办法: 将里面原有的元素全部移除或清空
this.squareArr.length = 0;
this.container.removeChildren(); // -> 清空container容器下所有子元素
案例二. 旅游景点排序
图为案例布局 注意: 图中数据都为写死的数据
案例需求:
景区按实时热度进行排名(取决于进度条的百分比值)
遇到的问题:
- 如何让单个景点里面的所有信息跟随整个大背景一起滚动?
思考方向: 将大背景与单个景点里面的元素统一放到一个容器里面,直接操作该容器进行滚动!
lightPage文件为 -> 主文件, Spots文件为 -> 共有相同元素的数据文件
滚动效果
- 怎么从后台接收动态数据(如:各景点图/进度条/百分比数值等)并渲染出来?
关键点: 逻辑一定要非常非常清楚,再写之前就要想好这一块的逻辑关系,先后顺序!不然很容易越写越乱!!!
- 关于
Spots文件里面的代码逻辑 ?
一. 静态数据 => 全部统一存放在init类里面, 一开始就会在当前文件入口函数里面调用
1)元素的类型 -> (位图/文本等类型)
2)元素的位置在项目中不会存在变动 -> (x,y位置是固定的)
3)元素的样式 -> (大小/颜色等)
二. 动态数据 => 根据业务逻辑单独存放在不同的类里面,在需要调用的时候才会调用
1)景点排序位置
2)百分比数值
3)进度条长短
4)星星的点击状态
【详情见可见下方示意代码】
/* --------- 需要二次操作的动态数据 --------- */
private bg: egret.Bitmap;
private _bg;
public set spotBg(val: string){
this._bg = val;
/* ------ 各景点背景动态数据 (纹理) ------ */
// this.bg = new egret.Bitmap(); // -> 不能写在这里,是因为先后顺序,会将上面的元素覆盖,这类静止的元素位置可以全部写在init里面!!!
this.bg.texture = RES.getRes(val);
// this.bg.x = this.bg.y = 0;
// this.addChild(this.bg);
}
public get spotBg(): string{
return this._bg;
}
private _num: number; // -> 当前点击人数
private _numAll: number; // -> 总点击人数
/* ------ 进度条/百分比部分(踩坑点:分别再写两个类,在新的类里面设置) -> 动态数据 ------ */
public set Num(val: number){
this._num = val;
}
public get Num(): number{
return this._num;
}
public set numAll(val: number){
this._numAll = val;
this.line.graphics.beginFill(0xf2ce3e);
if(this._numAll == 0){
this.line.graphics.drawRoundRect(209, 124, 100, 12, 10, 10);
this.txt.text = '0';
}else{
this.line.graphics.drawRoundRect(209, 124, this._num/this._numAll*400, 12, 10, 10);
this.txt.text = `${(this._num/this._numAll*100).toFixed(2)}`;
}
this.line.graphics.endFill();
}
public get numAll(): number{
return this._numAll;
}
- 关于怎么在
lightSpots文件里面调用Spots文件里面的数据?
1.一般情况下可以直接在lightPage文件里面实例化Spots类
此处通过实例化展示出来的一般是Spots文件里面的静态数据部分
2.动态数据部分,需要将后台返回的动态数据与Spots文件里面动态数据进行相应替换
此处一般会涉及到接口部分的知识【详情见可见下方示意代码】
private params = "&phone=12569873288";
private changePart(){
/* --------- 接口 -> 获取后台返回数据 (当前人数/总人数)--------- */
var url = XXX + this.params;
wy.Tools.GET_Request(url,(e:egret.Event)=>{
console.log("返回数据" + e.target.data);
var data = JSON.parse(e.target.data);
var array = data.data.list; // 后台返回的数组
if(data.error == 0){
for(var i = 0; i < array.length; i++){
/* --------- 关键代码 --------- */
this.spotArr[i].spotBg = this.obgArr[data.data.list[i].id];
this.spotArr[i].Num = data.data.list[i].number;
this.spotArr[i].numAll = data.data.allnumber;
}
}else{
console.log("报错信息" + data.info)
}
},this)
}
网友评论