Commit fd8e983a authored by 李维's avatar 李维

dev commit

parent aae59198
...@@ -47,7 +47,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -47,7 +47,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 全局数据 ------------ // ------------ 全局数据 ------------
g_stage; //中心舞台 g_stage; //中心舞台
g_enableTouch = true; // 触摸使能 g_enableMapDown = true; // 触摸使能
g_enableMapUp = true; // 抬起使能
g_enableMapMove = true; // 移动ss使能
g_canvasLeft; g_canvasLeft;
g_canvasTop; g_canvasTop;
g_animationId: any; g_animationId: any;
...@@ -68,7 +70,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -68,7 +70,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------------------------------ // ------------------------------------
// ------------ 私有数据 ------------ // ------------ 私有数据 ------------
m_clickQueue = {} //点击事件处理队列 m_mapDownQueue = {} //按下事件处理队列
m_mapUpQueue = {} //抬起事件处理队列
m_mapMoveQueue = {} //移动事件处理队列
m_endPageArr; m_endPageArr;
m_showPetalFlag; m_showPetalFlag;
m_elementPetalArr; m_elementPetalArr;
...@@ -121,13 +125,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -121,13 +125,10 @@ export class PlayComponent implements OnInit, OnDestroy {
initGame(){ initGame(){
this.initAnswerSheet() this.initAnswerSheet()
this.showAnswer() this.showAnswer()
this.initPuzzles()
} }
initAnswerSheet(){ initAnswerSheet(){
let element = this.g_cartoon.createCartoonElement("AnswerSheet", "MySprite") let element = this.g_cartoon.createCartoonElement("AnswerSheet", "MySprite")
element.ref.init(this.g_cartoon.images.get("answer-sheet")) element.ref.init(this.g_cartoon.images.get("answer-sheet"))
...@@ -135,41 +136,124 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -135,41 +136,124 @@ export class PlayComponent implements OnInit, OnDestroy {
element.ref.y = this.g_canvasHeight / 2 element.ref.y = this.g_canvasHeight / 2
element.ref.setScaleXY(this.g_mapScale) element.ref.setScaleXY(this.g_mapScale)
let quertionImage = this.g_cartoon.createCartoonElement("quertion-image-container", "MySprite") let element_t = this.g_cartoon.createCartoonElement("quertion-image-container", "MySprite")
quertionImage.ref.init(this.g_cartoon.images.get(this.g_formData.bgItem.url)) element_t.ref.init(this.g_cartoon.images.get(this.g_formData.bgItem.url))
element_t.contentScale = Math.min((200 / element_t.ref.width), (300 / element_t.ref.height))
if( (200 / quertionImage.ref.width) < (300 / quertionImage.ref.height) ){ element_t.originX = -(element_t.ref.width)/2
quertionImage.contentScale = 200 / quertionImage.ref.width element_t.originY = -(element_t.ref.height)/2
quertionImage.originX = 0 element_t.ref.x = 0 //this.g_canvasWidth / 2
quertionImage.originY = quertionImage.ref.height / 2 - (quertionImage.ref.height/2) * quertionImage.contentScale element_t.ref.y = 0 //this.g_canvasHeight / 2
element_t.ref.setScaleXY( element_t.contentScale )
}else{
quertionImage.originX = quertionImage.ref.width / 2 // this.subscribeMapDownEvent("quertion-image-container", ()=>{
quertionImage.originY = 0 // this.checkHotArray(this.g_clickX, this.g_clickY)
quertionImage.contentScale = 200 / quertionImage.ref.width // this.g_enableMapDown = true;
} // })
quertionImage.ref.setScaleXY( quertionImage.contentScale )
element.ref.addChild(quertionImage.ref) element.ref.addChild(element_t.ref)
this.render(element.ref) this.render(element.ref)
} }
showAnswer(){ showAnswer(){
let hotZoneItemArr = this.g_formData.hotZoneItemArr let hotZoneItemArr = this.g_formData.hotZoneItemArr
let parent = this.g_cartoon.getCartoonElement("quertion-image-container") let parent = this.g_cartoon.getCartoonElement("quertion-image-container")
let originX = -(parent.ref.width)/2
let originY = -(parent.ref.height)/2
hotZoneItemArr.forEach( (item,index) => { hotZoneItemArr.forEach( (item,index) => {
console.log(item) console.log(item)
let element = this.g_cartoon.createCartoonElement("quertion-image-puzzle-"+index, "MySprite") let element = this.g_cartoon.createCartoonElement("quertion-image-puzzle-"+index, "MySprite")
element.ref.init(this.g_cartoon.images.get(item.rect.src)) element.ref.init(this.g_cartoon.images.get(item.rect.src))
element.ref.scaleX = item.rect.width / (element.ref.width*parent.contentScale) element.ref.scaleX = item.rect.width / (element.ref.width*parent.contentScale)
element.ref.scaleY = item.rect.height / (element.ref.height*parent.contentScale) element.ref.scaleY = item.rect.height / (element.ref.height*parent.contentScale)
element.ref.x = originX + item.rect.x/parent.contentScale + (element.ref.width*element.ref.scaleX)/2 element.ref.x = parent.originX + item.rect.x/parent.contentScale + (element.ref.width*element.ref.scaleX)/2
element.ref.y = originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2) element.ref.y = parent.originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2)
this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref) this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref)
element.ref.alpha = 0;
element.show = ()=>{
tweenChange(element.ref, { alpha:1 } , 0.1)
}
this.subscribeMapUpEvent("quertion-image-puzzle-"+index, ()=>{
let rect = element.ref.getBoundingBox()
element.show()
this.g_cartoon.getCartoonElement("puzzle-card-"+0).enableMove = false;
this.g_cartoon.getCartoonElement("puzzle-card-"+0).moveTo(rect.x + rect.width/2, rect.y + rect.height/2)
this.g_cartoon.getCartoonElement("puzzle-card-"+0).hide()
this.g_enableMapUp = true;
})
}); });
} }
initPuzzles(){
let hotZoneItemArr = this.g_formData.hotZoneItemArr
let parent = this.g_cartoon.getCartoonElement("quertion-image-container")
// hotZoneItemArr.forEach( (item,index) => {
// console.log(item)
// let element = this.g_cartoon.createCartoonElement("quertion-image-puzzle-"+index, "MySprite")
// element.ref.init(this.g_cartoon.images.get(item.rect.src))
// element.ref.scaleX = item.rect.width / (element.ref.width*parent.contentScale)
// element.ref.scaleY = item.rect.height / (element.ref.height*parent.contentScale)
// element.ref.x = parent.originX + item.rect.x/parent.contentScale + (element.ref.width*element.ref.scaleX)/2
// element.ref.y = parent.originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2)
// this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref)
// element.ref.alpha = 0;
// element.show = ()=>{
// tweenChange(element.ref, { alpha:1 } , 0.1)
// }
// this.subscribeMapUpEvent("quertion-image-puzzle-"+index, ()=>{
// console.log("Up")
// element.show()
// this.g_enableMapUp = true;
// })
// });
let element = this.g_cartoon.createCartoonElement("puzzle-card-"+0, "MySprite")
element.ref.init(this.g_cartoon.images.get(hotZoneItemArr[0].rect.src))
element.ref.scaleX = 100 / element.ref.width
element.ref.scaleY = 100 / element.ref.height
element.ref.x = this.g_cartoon.getOrigin().x + 200
element.ref.y = this.g_cartoon.getOrigin().y + 200
element.enableMove = false;
element.ref.alpha = 1;
element.show = ()=>{
tweenChange(element.ref, { alpha:1 } , 0.1)
}
element.hide = ()=>{
tweenChange(element.ref, { alpha:0 } , 0.1)
}
element.moveTo = (x, y)=>{
tweenChange(element.ref, { x:x, y:y } , 0.1)
}
this.subscribeMapDownEvent("puzzle-card-"+0, ()=>{
element.enableMove= true;
this.g_enableMapDown = true;
})
this.subscribeMapMoveEvent("puzzle-card-"+0, ()=>{
if(element.enableMove){
element.ref.x = this.g_clickX
element.ref.y = this.g_clickY
}
this.g_enableMapMove = true;
})
this.subscribeMapUpEvent("puzzle-card-"+0, ()=>{
element.enableMove= false;
this.g_enableMapUp = true;
})
this.render(element.ref)
}
...@@ -318,24 +402,42 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -318,24 +402,42 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
mapDown(event) { mapDown(event) {
if (!this.g_enableTouch) { if (!this.g_enableMapDown) {
return; return;
} }
for(let cartoonID in this.m_clickQueue){ for(let cartoonID in this.m_mapDownQueue){
if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(cartoonID))) { if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(cartoonID))) {
this.g_enableTouch = false; this.g_enableMapDown = false;
this.m_clickQueue[cartoonID](); this.m_mapDownQueue[cartoonID]();
return;
} }
} }
} }
mapMove(event) {
if (!this.g_enableMapMove) {
return;
}
for(let cartoonID in this.m_mapMoveQueue){
if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(cartoonID))) {
this.g_enableMapMove = false;
this.m_mapMoveQueue[cartoonID]();
}
}
}
mapMove(event) {} mapUp(event) {
if (!this.g_enableMapUp) {
return;
mapUp(event) {} }
for(let cartoonID in this.m_mapUpQueue){
if (this.checkClickTarget(this.g_cartoon.getCartoonElementRef(cartoonID))) {
this.g_enableMapUp = false;
this.m_mapUpQueue[cartoonID]();
}
}
}
update() { update() {
...@@ -525,8 +627,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -525,8 +627,16 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
subscribeClickEvent(id,callback){ subscribeMapDownEvent(id,callback){
this.m_clickQueue[id] = callback this.m_mapDownQueue[id] = callback
}
subscribeMapUpEvent(id,callback){
this.m_mapUpQueue[id] = callback
}
subscribeMapMoveEvent(id,callback){
this.m_mapMoveQueue[id] = callback
} }
...@@ -546,7 +656,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -546,7 +656,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_cartoon.clientHeight = this.wrap.nativeElement.clientHeight; this.g_cartoon.clientHeight = this.wrap.nativeElement.clientHeight;
this.m_renderArr = []; this.m_renderArr = [];
this.g_enableTouch = true; this.g_enableMapDown = true;
this.g_ctx = this.canvas.nativeElement.getContext("2d"); this.g_ctx = this.canvas.nativeElement.getContext("2d");
this.canvas.nativeElement.width = this.g_canvasWidth; this.canvas.nativeElement.width = this.g_canvasWidth;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment