diff --git a/src/app/play/Unit.ts b/src/app/play/Unit.ts index 6e3717b8679deb40ced75f9104c9ab4ac1bd91c3..a07e0bc61f02ab5c816e40727c0c2f51a7500540 100644 --- a/src/app/play/Unit.ts +++ b/src/app/play/Unit.ts @@ -141,6 +141,8 @@ export class MySprite extends Sprite { const index = this.children.indexOf(child); if (index !== -1) { this.children.splice(index, 1); + }else{ + console.warn("Can not delete child!") } } diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts index 804b3ee145cda3f25a1c866b23b996831ea54f5e..ebc1f5e2464e374c9a6c6381b4c5f4f3acdd5b9c 100644 --- a/src/app/play/play.component.ts +++ b/src/app/play/play.component.ts @@ -56,15 +56,8 @@ const zIndexMap = { startButton: 120, drum: 30, hand: 35, - answerCard: 45, - questionCard: 50, - mainQuestionImage: 35, - imageContainer:35, - imageBackground: 36, - shortAudio: 40, animation: 80, - popUp: 90, - buttons: 100 + EndPatal: 90 } @Component({ @@ -119,7 +112,7 @@ export class PlayComponent implements OnInit, OnDestroy { m_mapMoveArray = [] //移动事件处ç†é˜Ÿåˆ— m_mapMoveObject = [] - m_endPageArr; + m_endPageArr = []; // 花瓣 m_showPetalFlag; m_elementPetalArr; m_showElementPetalFlag; @@ -130,6 +123,7 @@ export class PlayComponent implements OnInit, OnDestroy { m_setTimeoutIDs = []; m_setIntervalIDs = []; m_moveAsstantIntervalId = null; + m_frontCurtainArr = []; // å‰ç½®å¹•布 // ------------------------------------ @@ -216,7 +210,6 @@ export class PlayComponent implements OnInit, OnDestroy { cleanGameVar(){ this.m_startGame = false; - this.m_allDrums = [] } startGame(){ @@ -225,17 +218,15 @@ export class PlayComponent implements OnInit, OnDestroy { restartGame(){ this.cleanGameVar(); + this.stopEndPatal(); this.startGame(); - this.initDrum(); + this.randomAllDrum(); } endGame(){ + this.showEndPatal() this.g_enableMapDown = false; - this.curtainContral(false, ()=>{ - this.g_cartoon.getCartoonElement("restart-button").in() - this.g_cartoon.getCartoonElement("boy").reset() - this.g_enableMapDown = true; - }) + this.g_cartoon.getCartoonElement("restart-button").in() } initBackground(){ @@ -324,15 +315,14 @@ export class PlayComponent implements OnInit, OnDestroy { this.render(element.play, zIndexMap.boy) element.startReadyAni = ()=>{ - console.log("Start ready ani") element.play.play() element.ref.visible = false element.play.visible = true element.isPlay = true; + element.firstClick = true; } element.endReadyAni = ()=>{ - console.log("End ready ani") element.play.stop() element.ref.visible = true element.play.visible = false @@ -485,9 +475,8 @@ export class PlayComponent implements OnInit, OnDestroy { }else{ element.currentSide = "left" } - - element.updateHandPos(); + element.currentSide = element.currentSide? element.currentSide: "left" if(element.firstClick){ element.endReadyAni() @@ -514,6 +503,12 @@ export class PlayComponent implements OnInit, OnDestroy { element.beatAnimate.play() } + element.backToReady = () => { + element.ref.x = standPos[this.g_formData.dataArray.length][0].x + element.currentPosition = 0; + element.updateHandPos(); + } + element.beatReset = (callback) => { element.beatAnimate.visible = false; this.deleteElementInRender(element.beatAnimate.id) @@ -545,7 +540,6 @@ export class PlayComponent implements OnInit, OnDestroy { y: this.g_canvasHeight / 2 } }) - this.render(A.ref, zIndexMap.Curtain_A) A.open = ()=>{ this.m_setTimeoutIDs.push(setTimeout(() => { tweenChange(A.ref, {x: (-357 / 2 + 100) * this.g_mapScale}, 3) @@ -554,8 +548,8 @@ export class PlayComponent implements OnInit, OnDestroy { } A.close = ()=>{ this.m_setTimeoutIDs.push(setTimeout(() => { - tweenChange(A.ref, {x: A.initX}, 3) - }, 3000)) + tweenChange(A.ref, {x: A.initX}, 2.5) + }, 1500)) } let B = this.g_cartoon.createCartoonElementImageFunc("Curtain-B", "lianzil", (w ,h)=>{ @@ -569,7 +563,6 @@ export class PlayComponent implements OnInit, OnDestroy { y: this.g_canvasHeight / 2 } }) - this.render(B.ref, zIndexMap.Curtain_B) B.open = ()=>{ this.m_setTimeoutIDs.push(setTimeout(() => { tweenChange(B.ref, {x: this.g_canvasWidth + (357 / 2 - 100) * this.g_mapScale}, 3) @@ -577,8 +570,8 @@ export class PlayComponent implements OnInit, OnDestroy { } B.close = ()=>{ this.m_setTimeoutIDs.push(setTimeout(() => { - tweenChange(B.ref, {x: B.initX}, 3) - }, 3000)) + tweenChange(B.ref, {x: B.initX}, 2.5) + }, 1500)) } let C = this.g_cartoon.createCartoonElementImageFunc("Curtain-C", "lianzi4", (w ,h)=>{ @@ -592,12 +585,11 @@ export class PlayComponent implements OnInit, OnDestroy { y: this.g_canvasHeight / 2 } }) - this.render(C.ref, zIndexMap.Curtain_C) C.open = ()=>{ tweenChange(C.ref, {x: -this.g_canvasWidth / 4}, 7) } C.close = ()=>{ - tweenChange(C.ref, {x: C.initX}, 7) + tweenChange(C.ref, {x: C.initX}, 4) } let D = this.g_cartoon.createCartoonElementImageFunc("Curtain-D", "lianzi3", (w ,h)=>{ @@ -611,12 +603,11 @@ export class PlayComponent implements OnInit, OnDestroy { y: this.g_canvasHeight / 2 } }) - this.render(D.ref, zIndexMap.Curtain_D) D.open = ()=>{ tweenChange(D.ref, {x: this.g_canvasWidth + this.g_canvasWidth / 4}, 7) } D.close = ()=>{ - tweenChange(D.ref, {x: D.initX}, 7) + tweenChange(D.ref, {x: D.initX}, 4) } let E = this.g_cartoon.createCartoonElementImageFunc("Curtain-E", "lianzi0", (w ,h)=>{ @@ -630,24 +621,35 @@ export class PlayComponent implements OnInit, OnDestroy { y: (95 / 2) * this.g_mapScale } }) - this.render(E.ref, zIndexMap.Curtain_E) + + this.m_frontCurtainArr.push(C.ref) + this.m_frontCurtainArr.push(D.ref) + this.m_frontCurtainArr.push(A.ref) + this.m_frontCurtainArr.push(B.ref) + this.m_frontCurtainArr.push(E.ref) } curtainContral(status, callback?){ let all = ["Curtain-A", "Curtain-B", "Curtain-C", "Curtain-D"] + this.g_cartoon.playAudio("tongshenghuanhu") + this.m_setTimeoutIDs.push(setTimeout(() => { + this.g_cartoon.playAudio("gusheng_kaitou") + }, 2000)) if(status){ all.forEach(item=>{ this.g_cartoon.getCartoonElement(item).open() }) + this.m_setTimeoutIDs.push(setTimeout(()=>{ + callback && callback() + }, 7000)) }else{ all.forEach(item=>{ this.g_cartoon.getCartoonElement(item).close() }) + this.m_setTimeoutIDs.push(setTimeout(()=>{ + callback && callback() + }, 4000)) } - - this.m_setTimeoutIDs.push(setTimeout(()=>{ - callback && callback() - }, 7000)) } initStartButton(){ @@ -662,9 +664,10 @@ export class PlayComponent implements OnInit, OnDestroy { y: this.g_canvasHeight / 2 + 250 * this.g_mapScale } }) - this.render(element.ref, zIndexMap.startButton) - + + this.m_frontCurtainArr.push(element.ref) this.subscribeMapDownEvent(element.id, ()=>{ + this.g_cartoon.playAudio("dianji") this.showJellyAnimation(element.id, ()=>{ tweenChange(element.ref, {x: this.g_canvasWidth + 331 * this.g_mapScale}, 0.5) }) @@ -686,11 +689,11 @@ export class PlayComponent implements OnInit, OnDestroy { }, (w, h)=>{ return { x: this.g_canvasWidth / 2 + 450 * this.g_mapScale, - y: this.g_canvasHeight / 2 + 250 * this.g_mapScale + y: this.g_canvasHeight / 2 } }) element.ref.x = this.g_canvasWidth + 331 * this.g_mapScale - this.render(element.ref, zIndexMap.startButton) + this.m_frontCurtainArr.push(element.ref) element.in = (callback?)=>{ tweenChange(element.ref, {x: element.initX}, 0.5, ()=>{ @@ -708,15 +711,25 @@ export class PlayComponent implements OnInit, OnDestroy { this.showJellyAnimation(element.id, ()=>{ element.out() }) - this.restartGame() - this.g_cartoon.getCartoonElement("boy").startReadyAni() - this.curtainContral(true, ()=>{ - this.g_enableMapDown = true; + this.g_cartoon.playAudio("jiazigu_changgusheng") + this.m_setTimeoutIDs.push(setTimeout(() => { + this.g_cartoon.playAudio("guzhang") + }, 1000)) + this.curtainContral(false, ()=>{ + this.g_cartoon.getCartoonElement("boy").reset() + this.g_cartoon.getCartoonElement("boy").startReadyAni() + this.restartGame() + this.curtainContral(true, ()=>{ + this.g_enableMapDown = true; + }) }) - }) + + return true + }, 100) } initDrum(){ + console.log("initDrum") if(this.g_formData.dataArray.length == 0){ return } @@ -772,58 +785,73 @@ export class PlayComponent implements OnInit, OnDestroy { } element.content = null; - if(data.type == "Image"){ - element.imageContainer = this.g_cartoon.createImage("card_bg", (w, h)=>{ - return { - sx: 261 / w, - sy: 178 / h - } - }, (w, h)=>{ - return { - x: 0, - y: 60 - } - }) - element.imageContainer.visible = false; - element.imageContainer.setScaleXY(0) - element.content = element.imageContainer - element.ref.addChild(element.imageContainer) - - element.image = this.g_cartoon.createImage(data.image_url, (w, h)=>{ - let sx = 261 / w - let sy = 178 / w - let s = Math.min(sx, sy) - return { - sx: s, - sy: s - } - }, (w, h)=>{ - return { - x: 0, - y: 0 - } - }) - element.imageContainer.addChild(element.image) - }else{ - element.textContainer = this.g_cartoon.createImage("card_bg", (w, h)=>{ - return { - sx: 261 / w, - sy: 178 / h - } - }, (w, h)=>{ - return { - x: 0, - y: 60 + element.imageContainer = null; + element.textContainer = null; + element.resetContent = (contentData)=>{ + element.isOpen = false; + if(contentData.type == "Image"){ + if(element.content){ + element.ref.removeChild(element.content) } - }) - element.textContainer.visible = false; - element.textContainer.setScaleXY(0) - element.content = element.textContainer - element.ref.addChild(element.textContainer) + element.imageContainer = this.g_cartoon.createImage("card_bg", (w, h)=>{ + return { + sx: 261 / w, + sy: 178 / h + } + }, (w, h)=>{ + return { + x: 0, + y: 60 + } + }) + element.imageContainer.visible = false; + element.imageContainer.setScaleXY(0) + element.content = element.imageContainer + + element.image = this.g_cartoon.createImage(contentData.image_url, (w, h)=>{ + let sx = 261 / w + let sy = 178 / w + let s = Math.min(sx, sy) + return { + sx: s, + sy: s + } + }, (w, h)=>{ + return { + x: 0, + y: 0 + } + }) - element.text = this.g_cartoon.createLabel(data.text, "GOTHICB_1", "#FF0", 32) - element.textContainer.addChild(element.text) + element.ref.addChild(element.imageContainer) + element.imageContainer.addChild(element.image) + }else{ + if(element.content){ + element.ref.removeChild(element.content) + } + element.textContainer = this.g_cartoon.createImage("card_bg", (w, h)=>{ + return { + sx: 261 / w, + sy: 178 / h + } + }, (w, h)=>{ + return { + x: 0, + y: 60 + } + }) + element.textContainer.alpha = 0; + element.textContainer.visible = false; + element.textContainer.setScaleXY(0) + element.content = element.textContainer + element.text = this.g_cartoon.createLabel(contentData.text, "BerlinSansFBDemi-Bold", "#b94918", 84) + element.text.outline = 15; + + element.ref.addChild(element.textContainer) + element.textContainer.addChild(element.text) + } } + element.resetContent(data, true) element.highlight = () => { @@ -833,6 +861,7 @@ export class PlayComponent implements OnInit, OnDestroy { element.light.ref.visible = false; this.setRenderZIndex(element.ref, zIndexMap.drum) this.checkAllOpen() + this.g_cartoon.getCartoonElement("boy").backToReady() this.g_enableMapDown = true; }) }, 2000)) @@ -844,8 +873,9 @@ export class PlayComponent implements OnInit, OnDestroy { this.g_enableMapDown = true; return } + this.g_cartoon.playAudio(`gusheng_${index+1}`) this.setRenderZIndex(element.ref, zIndexMap.drum + 1) - tweenChange(element.ref, {scaleX: element.initScaleX * 1.2, scaleY: element.initScaleY * 1.2}, 0.2, ()=>{ + tweenChange(element.ref, {scaleX: element.initScaleX * 1.1, scaleY: element.initScaleY * 1.1}, 0.2, ()=>{ if(element.content){ element.content.visible = true; tweenChange(element.content, {scaleX: element.content.initScaleX, scaleY: element.content.initScaleY}, 0.2) @@ -856,11 +886,21 @@ export class PlayComponent implements OnInit, OnDestroy { element.highlight() }) }) - }) - + }) return element } + randomAllDrum(){ + let drum = null; + this.m_dataArrayNew = this.randomArray_shuffle(this.g_formData.dataArray) + let _this = this + this.m_allDrums.forEach(function(item, index){ + drum = _this.g_cartoon.getCartoonElement(item) + drum.resetContent(_this.m_dataArrayNew[index]) + }) + console.log(this.g_cartoon.getAllCartoonElement()) + } + checkAllOpen(){ let endGame = true for(let index = 0; index<this.m_allDrums.length; index++){ @@ -1030,12 +1070,12 @@ export class PlayComponent implements OnInit, OnDestroy { if (!this.g_enableMapDown) { return; } - console.log("All click event subscribers:", this.m_mapDownArray) + // console.log("All click event subscribers:", this.m_mapDownArray) this.m_mapDownArray.forEach((item)=>{ if(!myStopPropagation){ if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(item.id))) { this.g_enableMapDown = false; - console.log("Click event - target id:["+item.id+"]") + // console.log("Click event - target id:["+item.id+"]") if(item.callback()){ myStopPropagation = true; } @@ -1097,6 +1137,7 @@ export class PlayComponent implements OnInit, OnDestroy { this.updateArr(this.m_renderArr); this.updateArr(this.m_endPageArr); this.updateArr(this.m_elementPetalArr); + this.updateArr(this.m_frontCurtainArr) } @@ -1347,6 +1388,7 @@ export class PlayComponent implements OnInit, OnDestroy { this.m_renderArr = []; this.m_renderObject = []; + this.m_frontCurtainArr = []; this.g_enableMapDown = true; this.g_ctx = this.canvas.nativeElement.getContext("2d"); @@ -1391,20 +1433,6 @@ export class PlayComponent implements OnInit, OnDestroy { } render(ele, zIndex?:number){ - // let exist = false; - // let index = 0 - // this.m_renderObject.forEach((item, i) => { - // if(item.element.id == ele.id){ - // console.warn("Exist in render array!") - // exist = true - // index = i - // } - // }); - - // if(exist){ - // this.m_renderObject.splice(index, 1) - // } - this.m_renderObject.push({element:ele, zIndex:zIndex?zIndex:1}) this.m_renderObject.sort((a,b)=>{ return a.zIndex - b.zIndex