Commit 649fd3cf authored by 李维's avatar 李维

dev commit

parent 8d0fbb3e
...@@ -128,7 +128,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -128,7 +128,12 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------ // ------------ 游戏逻辑数据 ------------
m_openShift: boolean = false;
m_blockGroup = null;
m_blockFirstSubmit = null;
m_submitTimes = null;
m_wordAll = null;
m_allBlocks = [];
// ------------------------------------ // ------------------------------------
...@@ -188,11 +193,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -188,11 +193,13 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log(this.g_formData); console.log(this.g_formData);
this.initBackground(); this.initBackground();
this.initTitle(); this.initTitle();
this.initQuestion() this.initQuestion();
this.initKeyboard();
this.initOutputWindow();
} }
cleanGameVar(){ cleanGameVar(){
} }
startGame(){ startGame(){
...@@ -241,7 +248,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -241,7 +248,7 @@ export class PlayComponent implements OnInit, OnDestroy {
initQuestion() { initQuestion() {
let element = this.g_cartoon.createCartoonElementImageFunc("question_container", "bg_question", (w, h)=>{ let element = this.g_cartoon.createCartoonElementImageFunc("question_container", "bg_question", (w, h)=>{
return { return {
sx: 2408*this.g_mapScale / w, sx: 2048*this.g_mapScale / w,
sy: 240*this.g_mapScale / h, sy: 240*this.g_mapScale / h,
} }
}, (w, h)=>{ }, (w, h)=>{
...@@ -263,6 +270,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -263,6 +270,18 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
}) })
let btnNextShadow = this.g_cartoon.createCartoonElementImageFunc("question_next_shadow", "buttonShadow", (w, h)=>{
return {
sx: 169 / w,
sy: 166 / h,
}
}, (w, h)=>{
return {
x: 1010,
y: 35
}
})
let btnPre = this.g_cartoon.createCartoonElementImageFunc("question_pre", "btn_pre", (w, h)=>{ let btnPre = this.g_cartoon.createCartoonElementImageFunc("question_pre", "btn_pre", (w, h)=>{
return { return {
sx: 136 / w, sx: 136 / w,
...@@ -274,6 +293,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -274,6 +293,18 @@ export class PlayComponent implements OnInit, OnDestroy {
y: 0 y: 0
} }
}) })
let btnPreShadow = this.g_cartoon.createCartoonElementImageFunc("question_pre_shadow", "buttonShadow", (w, h)=>{
return {
sx: 169 / w,
sy: 166 / h,
}
}, (w, h)=>{
return {
x: -1010,
y: 35
}
})
let labelIndex = this.g_cartoon.createCartoonElementLabelFunc("question_index", "", "Aileron-Bold", "#3e9b31", 48, (w, h)=>{ let labelIndex = this.g_cartoon.createCartoonElementLabelFunc("question_index", "", "Aileron-Bold", "#3e9b31", 48, (w, h)=>{
return { return {
...@@ -294,509 +325,310 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -294,509 +325,310 @@ export class PlayComponent implements OnInit, OnDestroy {
element.ref.addChild(labelIndex.ref) element.ref.addChild(labelIndex.ref)
element.ref.addChild(questionText.ref) element.ref.addChild(questionText.ref)
element.ref.addChild(btnNextShadow.ref)
element.ref.addChild(btnPreShadow.ref)
element.ref.addChild(btnNext.ref) element.ref.addChild(btnNext.ref)
element.ref.addChild(btnPre .ref) element.ref.addChild(btnPre.ref)
this.render(element.ref) this.render(element.ref)
} }
initTitle_Part(){ initKeyboard() {
let element = this.g_cartoon.createCartoonElementImageFunc("part-title", "bg_title_part", (w, h)=>{ const createWord = (letter, x, y) => {
return { let container = this.g_cartoon.createCartoonElementImageFunc(`key_${letter}_click`, "bg_letter_target", (w, h)=>{
sx: 57*this.g_mapScale / w, return {
sy: 65*this.g_mapScale / h, sx: 80 / w,
} sy: 80 / h,
}, (w, h)=>{ }
return { }, (w, h)=>{
x: 53*this.g_mapScale + (57*this.g_mapScale)/2, return {
y: (65*this.g_mapScale)/2 x: x,
} y: y
}) }
element.ref.x = this.g_partTitle_x - 20 * this.g_mapScale + (57*this.g_mapScale)/2; })
let text = this.g_cartoon.createLabel(this.g_formData.title.NO?this.g_formData.title.NO:"C", "Berlin Sans FB Demi Bold", "#facf46", 48)
element.ref.addChild(text)
let partBG = this.g_cartoon.createCartoonElementImageFunc("part-title-background", "part_number_bg", (w, h)=>{ let text = this.g_cartoon.createCartoonElementLabelFunc(`key_${letter}`, letter, "Aileron-Bold", "#3e9b31", 72, (w, h)=>{
return {
x: 0,
y: 0,
}
})
container.ref.addChild(text.ref);
return container
}
let element = this.g_cartoon.createCartoonElementImageFunc("keyboard_container", "bg_container", (w, h)=>{
return { return {
sx: 121*this.g_mapScale / w, sx: 855*this.g_mapScale / w,
sy: 69*this.g_mapScale / h, sy: 820*this.g_mapScale / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return { return {
x: (121*this.g_mapScale)/2, x: this.g_canvasWidth / 2 + 855*this.g_mapScale / 2 + 118 * this.g_mapScale,
y: (69*this.g_mapScale)/2 y: this.g_canvasHeight / 2 + 150*this.g_mapScale
} }
}) })
this.render(partBG.ref) let letttes = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
this.render(element.ref) let allLetterRefs = []
} let baseX = -855 / 2;
let baseY = -820 / 2;
initTitle_Main(){ for(let i=1; i<=letttes.length; i++) {
let labelWidth = 0 let le = createWord(letttes[i-1], baseX, baseY)
let text = this.g_cartoon.createCartoonElementLabelFunc("main-title", this.g_formData.title.mainText, "FuturaBT Medium", "#000000", 36, (w, h)=>{ this.subscribeMapDownEvent(le.id, ()=>{
labelWidth = w/2 jelly(le.ref)
return { if(this.m_openShift) {
x: this.g_partTitle_x - 20 * this.g_mapScale + labelWidth * this.g_mapScale, console.log(letttes[i-1].toUpperCase())
y: 5*this.g_mapScale + (65*this.g_mapScale) / 2 } else {
console.log(letttes[i-1].toLocaleLowerCase())
}
this.g_enableMapDown = true;
})
allLetterRefs.push(le.ref.children[1])
element.ref.addChild(le.ref)
if(i%6==0) {
baseX = -855 / 2;
baseY += 80 + 98;
} else {
baseX += 80 + 85;
} }
}) }
text.ref.fontWeight = 900
text.ref.setScaleXY(this.g_mapScale) // shfit按键
let btnShift = this.g_cartoon.createCartoonElementImageFunc("keyboard_shfit", "btn_shift", (w, h)=>{
let background = this.g_cartoon.createCartoonElementImageFunc("main-title-background", "_bg_50_20", (w, h)=>{
return { return {
sx: labelWidth*2 / w, sx: 420 / w,
sy: 50*this.g_mapScale / h, sy: 128 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return { return {
x: this.g_partTitle_x + labelWidth + 60 * this.g_mapScale, x: baseX + 350,
y: 5*this.g_mapScale + (65*this.g_mapScale) / 2 y: baseY
} }
}) })
let btnShiftShadow = this.g_cartoon.createCartoonElementImageFunc("keyboard_shfit_shadow", "btn_shift_shadow", (w, h)=>{
text.ref.x = this.g_partTitle_x + 60 * this.g_mapScale
text.ref.textAlign = "left"
this.subscribeMapDownEvent(background.id, ()=>{
this.g_cartoon.stopAllAudio()
this.g_cartoon.playAudio(this.g_formData.title.mainTextAudio_url);
this.resetLongAudio();
this.g_enableMapDown = true;
})
this.render(background.ref)
this.render(text.ref)
}
initCards() {
let cardContainer = this.g_cartoon.createCartoonElementImageFunc(`background_card_container`, "_bg_1280_720", (w, h)=>{
return { return {
sx: 1280*this.g_mapScale * 0.94 / w, sx: 428 / w,
sy: 720*this.g_mapScale * 0.94 / h, sy: 141 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return { return {
x: this.g_canvasWidth / 2, x: baseX + 350,
y: this.g_canvasHeight / 2 y: baseY + 50
} }
}) })
this.render(cardContainer.ref) element.ref.addChild(btnShiftShadow.ref)
element.ref.addChild(btnShift.ref)
const len = this.g_formData.dataArray.length<=4?"4":"6"; this.subscribeMapDownEvent(btnShift.id, ()=>{
this.m_openShift = !this.m_openShift;
const pos = { if(this.m_openShift) {
"4": { allLetterRefs.forEach(le=>{
cards: [ le.text = le.text.toUpperCase()
{x: -270, y: -142}, {x: 270, y: -142}, {x: -270, y: 142}, {x: 270, y: 142}
],
icon: {x: -230, y: -105},
textMain: {x: 0, y: -72},
textLeft: {x: -140, y: 82},
textRight: {x: 140, y: 82},
targetLeft: {x: -260, y: 10},
targetRight: {x: 0, y: 10},
radioLeft: {x: -140, y: 10},
radioRight: {x: 140, y: 10},
circleSize: {w: 316, h: 292},
circleLeft: {x: -80, y: 0},
circleRight: {x: 80, y: 0}
},
"6": {
cards: [
{x: -270, y: -185}, {x: 270, y: -185}, {x: -270, y: 0}, {x: 270, y: 0}, {x: -270, y: 185}, {x: 270, y: 185}
],
icon: {x: -230, y: -60},
textMain: {x: 0, y: -40},
textLeft: {x: -140, y: 72},
textRight: {x: 140, y: 72},
targetLeft: {x: -260, y: 0},
targetRight: {x: 0, y: 0},
radioLeft: {x: -140, y: 20},
radioRight: {x: 140, y: 20},
circleSize: {w: 300, h: 220},
circleLeft: {x: -80, y: 0},
circleRight: {x: 80, y: 0}
}
}
this.g_formData.dataArray.forEach((dataItem, i) => {
let bgCard = null
if(len=="4") {
bgCard = this.g_cartoon.createCartoonElementImageFunc(`background_card_${i}`, `bg_card_4_${i+1}`, (w, h)=>{
return {
sx: 520 / w,
sy: 267 / h,
}
}, (w, h)=>{
return pos[len].cards[i]
}) })
} else { } else {
bgCard = this.g_cartoon.createCartoonElementImageFunc(`background_card_${i}`, `bg_card_6_${i+1}`, (w, h)=>{ allLetterRefs.forEach(le=>{
return { le.text = le.text.toLocaleLowerCase()
sx: 520 / w,
sy: 168 / h,
}
}, (w, h)=>{
return pos[len].cards[i]
}) })
} }
jelly(btnShift.ref)
this.g_enableMapDown = true;
})
this.render(element.ref)
}
let numIcon = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_numIcon`, `num_icon_${i+1}`, (w, h)=>{ initOutputWindow() {
const createBlock = (letter, questionIndex, li, x, y, width=80, height=80)=> {
let container = this.g_cartoon.createCartoonElementImageFunc(`block_${x}_${y}`, "bg_letter_target", (w, h)=>{
return { return {
sx: 60 / w, sx: 80 / w * width / 80,
sy: 60 / h, sy: 80 / h * height / 80,
} }
}, (w, h)=>{ }, (w, h)=>{
return pos[len].icon
})
bgCard.ref.addChild(numIcon.ref)
let textMainContainer = this.g_cartoon.createCartoonElementShapeRect(`popup-text-back-main-${i}-container`, 386, 100, "#FFFF00");
bgCard.ref.addChild(textMainContainer.ref);
textMainContainer.ref.alpha = 0;
let baseX = 0;
for(let wi=0; wi<dataItem.letters_main.length; wi++) {
let letter = this.g_cartoon.createLabel(dataItem.letters_main[wi].letter_val, "Century Gothic Bold", dataItem.letters_main[wi].letter_color, 48 * 1, baseX, 50, "left")
let bd = letter.getBoundingBox();
baseX += bd.width + 1
textMainContainer.ref.addChild(letter)
}
textMainContainer.ref.width = baseX;
textMainContainer.ref.x = - (pos[len].textMain.x + baseX) / 2;
textMainContainer.ref.y = pos[len].textMain.y - 50;
let textLeftContainer = this.g_cartoon.createCartoonElementShapeRect(`popup-text-back-left-${i}-container`, 386, 100, "#FFFF00");
let lettersSpecLeft = []
let lettersLeft = []
bgCard.ref.addChild(textLeftContainer.ref);
textLeftContainer.ref.alpha = 0;
baseX = 0;
for(let wi=0; wi<dataItem.letters_left.length; wi++) {
let letter = this.g_cartoon.createLabel(dataItem.letters_left[wi].letter_val, "FuturaBT-Bold", "#363333", 42 * 1, baseX, 50, "left")
let bd = letter.getBoundingBox();
baseX += bd.width + 1
textLeftContainer.ref.addChild(letter);
if(dataItem.letters_left[wi].letter_color=="#c8161e") {
lettersSpecLeft.push(letter)
}
lettersLeft.push(letter)
}
textLeftContainer.ref.width = baseX;
textLeftContainer.ref.x = pos[len].textLeft.x - baseX / 2;
textLeftContainer.ref.y = pos[len].textLeft.y - 50;
let textRightContainer = this.g_cartoon.createCartoonElementShapeRect(`popup-text-back-right-${i}-container`, 386, 100, "#FFFF00");
let lettersSpecRight = []
let lettersRight = [];
bgCard.ref.addChild(textRightContainer.ref);
textRightContainer.ref.alpha = 0;
baseX = 0;
for(let wi=0; wi<dataItem.letters_right.length; wi++) {
let letter = this.g_cartoon.createLabel(dataItem.letters_right[wi].letter_val, "FuturaBT-Bold", "#363333", 42 * 1, baseX, 50, "left")
let bd = letter.getBoundingBox();
baseX += bd.width + 1
textRightContainer.ref.addChild(letter)
if(dataItem.letters_right[wi].letter_color=="#c8161e") {
lettersSpecRight.push(letter)
}
lettersRight.push(letter)
}
textRightContainer.ref.width = baseX;
textRightContainer.ref.x = pos[len].textRight.x - baseX / 2;
textRightContainer.ref.y = pos[len].textRight.y - 50;
// let textLeft = this.g_cartoon.createLabel(dataItem.text_left, "FuturaBT-Bold", "#363333", 42, pos[len].textLeft.x, pos[len].textLeft.y, null, 225)
// bgCard.ref.addChild(textLeft)
// let textRight = this.g_cartoon.createLabel(dataItem.text_right, "FuturaBT-Bold", "#363333", 42, pos[len].textRight.x, pos[len].textRight.y, null, 225)
// bgCard.ref.addChild(textRight)
let targetLeft = this.g_cartoon.createCartoonElementShapeRect(`card_${i}_target_left`, 260, 110, "#FFFF00")
targetLeft.ref.x = pos[len].targetLeft.x;
targetLeft.ref.y = pos[len].targetLeft.y;
bgCard.ref.addChild(targetLeft.ref)
targetLeft.ref.alpha = 0;
let targetRight = this.g_cartoon.createCartoonElementShapeRect(`card_${i}_target_right`, 260, 110, "#FFFF00")
targetRight.ref.x = pos[len].targetRight.x;
targetRight.ref.y = pos[len].targetRight.y;
bgCard.ref.addChild(targetRight.ref)
targetRight.ref.alpha = 0;
let radioButtonLeft_out = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_radio_left`, "radio_out", (w, h)=>{
return { return {
sx: 38 / w, x: x,
sy: 38 / h, y: y
} }
}, (w, h)=>{
return pos[len].radioLeft
}) })
bgCard.ref.addChild(radioButtonLeft_out.ref)
let radioButtonLeft_inner = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_radio_left_inner`, "radio_inner", (w, h)=>{ let bgInit = this.g_cartoon.createCartoonElementImageFunc(`block_${x}_${y}_container_init`, "bg_block_init", (w, h)=>{
return { return {
sx: 20 / w, sx: 80 / w,
sy: 20 / h, sy: 80 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return {x: 0, y: 0} return {
x: 0,
y: 0
}
}) })
radioButtonLeft_out.ref.addChild(radioButtonLeft_inner.ref)
let radioButtonRight_out = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_radio_right`, "radio_out", (w, h)=>{ let bgDisable = this.g_cartoon.createCartoonElementImageFunc(`block_${x}_${y}_container_disable`, "bg_block_disable", (w, h)=>{
return { return {
sx: 38 / w, sx: 80 / w,
sy: 38 / h, sy: 80 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return pos[len].radioRight return {
x: 0,
y: 0
}
}) })
bgCard.ref.addChild(radioButtonRight_out.ref) bgDisable.ref.alpha = 0;
let radioButtonRight_inner = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_radio_right_inner`, "radio_inner", (w, h)=>{ let bgRight = this.g_cartoon.createCartoonElementImageFunc(`block_${x}_${y}_container_right`, "bg_block_right", (w, h)=>{
return { return {
sx: 20 / w, sx: 80 / w,
sy: 20 / h, sy: 80 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return {x: 0, y: 0} return {
x: 0,
y: 0
}
}) })
radioButtonRight_out.ref.addChild(radioButtonRight_inner.ref) bgRight.ref.alpha = 0;
let circleLeft = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_circle_left`, "circle_l", (w, h)=>{ let bgFocus = this.g_cartoon.createCartoonElementImageFunc(`block_${x}_${y}_container_focus`, "bg_block_focus", (w, h)=>{
return { return {
sx: pos[len].circleSize.w / w, sx: 80 / w,
sy: pos[len].circleSize.h / h, sy: 80 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return pos[len].circleLeft return {
x: 0,
y: 0
}
}) })
bgCard.ref.addChild(circleLeft.ref) bgFocus.ref.alpha = 0;
circleLeft.ref.alpha = 0;
let circleRight = this.g_cartoon.createCartoonElementImageFunc(`card_${i}_circle_right`, "circle_r", (w, h)=>{ let bgWrong = this.g_cartoon.createCartoonElementImageFunc(`block_${x}_${y}_container_wrong`, "bg_block_wrong", (w, h)=>{
return { return {
sx: pos[len].circleSize.w / w, sx: 80 / w,
sy: pos[len].circleSize.h / h, sy: 80 / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return pos[len].circleRight return {
x: 0,
y: 0
}
}) })
bgCard.ref.addChild(circleRight.ref) bgWrong.ref.alpha = 0;
circleRight.ref.alpha = 0;
container.ref.addChild(bgInit.ref)
radioButtonLeft_inner.ref.alpha = 0; container.ref.addChild(bgDisable.ref)
radioButtonRight_inner.ref.alpha = 0; container.ref.addChild(bgRight.ref)
bgCard.switchSelect = (type) => { container.ref.addChild(bgFocus.ref)
switch(type) { container.ref.addChild(bgWrong.ref)
case "left":
radioButtonLeft_inner.ref.alpha = 255; container.switchStatus = (status) => {
radioButtonRight_inner.ref.alpha = 0; switch(status) {
case "init":
bgInit.ref.alpha = 1;
bgDisable.ref.alpha = 0;
bgRight.ref.alpha = 0;
bgFocus.ref.alpha = 0;
bgWrong.ref.alpha = 0;
break;
case "disable":
bgInit.ref.alpha = 0;
bgDisable.ref.alpha = 1;
bgRight.ref.alpha = 0;
bgFocus.ref.alpha = 0;
bgWrong.ref.alpha = 0;
break; break;
case "right": case "right":
radioButtonLeft_inner.ref.alpha = 0; bgInit.ref.alpha = 0;
radioButtonRight_inner.ref.alpha = 255; bgDisable.ref.alpha = 0;
bgRight.ref.alpha = 1;
bgFocus.ref.alpha = 0;
bgWrong.ref.alpha = 0;
break;
case "focus":
bgInit.ref.alpha = 0;
bgDisable.ref.alpha = 0;
bgRight.ref.alpha = 0;
bgFocus.ref.alpha = 1;
bgWrong.ref.alpha = 0;
break;
case "wrong":
bgInit.ref.alpha = 0;
bgDisable.ref.alpha = 0;
bgRight.ref.alpha = 0;
bgFocus.ref.alpha = 0;
bgWrong.ref.alpha = 1;
break; break;
default:
radioButtonLeft_inner.ref.alpha = 0;
radioButtonRight_inner.ref.alpha = 0;
} }
} }
this.subscribeMapDownEvent(textMainContainer.id, ()=>{ this.subscribeMapDownEvent(container.id, ()=>{
if(dataItem.audio_url_main) { container.switchStatus("wrong")
this.g_cartoon.playAudio(dataItem.audio_url_main, false, ()=>{ this.g_enableMapDown = true;
this.g_enableMapDown = true;
})
} else {
this.g_enableMapDown = true;
}
})
this.subscribeMapDownEvent(textLeftContainer.id, ()=>{
if(dataItem.audio_url_left) {
this.g_cartoon.playAudio(dataItem.audio_url_left, false, ()=>{
this.g_enableMapDown = true;
})
} else {
this.g_enableMapDown = true;
}
})
this.subscribeMapDownEvent(textRightContainer.id, ()=>{
if(dataItem.audio_url_right) {
this.g_cartoon.playAudio(dataItem.audio_url_right, false, ()=>{
this.g_enableMapDown = true;
})
} else {
this.g_enableMapDown = true;
}
})
bgCard.selected = false;
this.subscribeMapDownEvent(radioButtonRight_out.id, ()=>{
if(!bgCard.selected) {
bgCard.switchSelect("right")
if(dataItem.rightSide == "right") {
this.g_cartoon.playAudio("sm-correct", false, ()=>{
this.g_enableMapDown = true;
})
circleRight.ref.alpha = 255;
lettersSpecRight.forEach(le=>{
le.fontColor = "#c8161e"
})
lettersRight.forEach(le=>{
le.fontSize = 48
})
bgCard.selected = true;
} else {
this.g_cartoon.playAudio("sm-wrong", false, ()=>{
this.g_enableMapDown = true;
})
}
} else {
this.g_enableMapDown = true;
}
})
this.subscribeMapDownEvent(radioButtonLeft_out.id, ()=>{
if(!bgCard.selected) {
bgCard.switchSelect("left")
if(dataItem.rightSide == "left") {
this.g_cartoon.playAudio("sm-correct", false, ()=>{
this.g_enableMapDown = true;
})
circleLeft.ref.alpha = 255;
lettersSpecLeft.forEach(le=>{
le.fontColor = "#c8161e"
})
lettersLeft.forEach(le=>{
le.fontSize = 48
})
bgCard.selected = true;
} else {
this.g_cartoon.playAudio("sm-wrong", false, ()=>{
this.g_enableMapDown = true;
})
}
} else {
this.g_enableMapDown = true;
}
}) })
return container
}
cardContainer.ref.addChild(bgCard.ref) let element = this.g_cartoon.createCartoonElementImageFunc("output_container", "bg_container_left", (w, h)=>{
});
}
initAudioPlayerAll(){
let element = this.g_cartoon.createCartoonElementImageFunc(`audio-all`, "icon_audio_container", (w, h)=>{
return { return {
sx: 76 * this.g_mapScale / w, sx: 900*this.g_mapScale / w,
sy: 77 * this.g_mapScale / h, sy: 900*this.g_mapScale / h,
} }
}, (w, h)=>{ }, (w, h)=>{
return { return {
x: this.g_canvasWidth - 66 * this.g_mapScale, x: this.g_canvasWidth / 2 - 900*this.g_mapScale / 2 - 32*this.g_mapScale,
y: this.g_canvasHeight - 50 * this.g_mapScale, y: this.g_canvasHeight / 2 + 150*this.g_mapScale
} }
}) })
element.ref.setScaleXY(0)
let play = this.g_cartoon.createCartoonElementImageFunc(`audio-all-play`, "icon_paly", (w, h)=>{
return {
sx: 76 / w,
sy: 77 / h,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
let pause = this.g_cartoon.createCartoonElementImageFunc(`audio-all-pause`, "icon_pause", (w, h)=>{
return {
sx: 76 / w,
sy: 77 / h,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
pause.ref.visible = false;
element.playIcon = play
element.pauseIcon = pause
element.ref.addChild(element.playIcon.ref)
element.ref.addChild(element.pauseIcon.ref)
element.isPlaying = false
element.audio = this.g_cartoon.audio.get(this.g_formData.long_audio.audio_url)
if(element.audio){
element.audio.onended = ()=>{
element.pause()
}
}
element.play = ()=>{ let rolNum = this.g_formData.grid.length;
if(!element.audio){ let colNum = this.g_formData.grid[0].length;
return console.log(rolNum, colNum)
}
element.isPlaying = true; let width = 900;
this.g_cartoon.stopAllAudio() let height = 900;
element.audio.play()
element.playIcon.ref.visible = false; let sX = -1*width/2 + width/colNum/2
element.pauseIcon.ref.visible = true; let sY = - height/2 + height/rolNum/2
let step = (width/colNum)<(height/rolNum)?(width/colNum):(height/rolNum);
this.m_blockGroup = new Array(this.g_formData.dataArray.length);
this.m_blockFirstSubmit = new Array(this.g_formData.dataArray.length);
this.m_submitTimes = new Array(this.g_formData.dataArray.length).fill(0);
this.m_wordAll = new Array(this.g_formData.dataArray.length).fill("");
for(let i=0; i<this.g_formData.dataArray.length; i++) {
this.m_blockGroup[i] = []
this.m_blockFirstSubmit[i] = true;
} }
element.pause = ()=>{ for(let j=0; j<rolNum; j++) {
if(!element.audio){ for(let i=0; i<colNum; i++) {
return let qi = this.g_formData.grid[j][i].index
if(qi>=0) {
let newBlock = createBlock(this.g_formData.grid[j][i].text, qi, i, sX+i*step, sY+j*step, 900/colNum-5, 900/colNum-5)
this.m_wordAll[qi] += this.g_formData.grid[j][i].text
this.m_allBlocks.push(newBlock)
element.ref.addChild(newBlock.ref)
this.m_blockGroup[qi].push(newBlock)
}
} }
element.isPlaying = false;
element.audio.pause()
element.playIcon.ref.visible = true;
element.pauseIcon.ref.visible = false;
} }
element.enable = false
element.out = ()=>{
element.enable = true;
tweenChange(element.ref, {scaleX: element.initScaleX, scaleY: element.initScaleY}, 0.2, ()=>{
this.showJellyAnimation(element.id)
})
}
this.subscribeMapDownEvent(element.id, ()=>{
if(!element.audio || !element.enable){
this.g_enableMapDown = true;
return
}
if(element.isPlaying){
element.pause()
}else{
element.play()
}
this.g_enableMapDown = true;
})
if(this.g_formData.long_audio.audio_url) {
element.out()
}
this.render(element.ref, 99)
}
resetLongAudio(){
let audio = this.g_cartoon.getCartoonElement(`audio-all`)
if(audio.enable){ this.render(element.ref)
audio.pause()
}
} }
......
...@@ -38,8 +38,19 @@ const localImages = { ...@@ -38,8 +38,19 @@ const localImages = {
'btn_next': 'assets/play/btn_next.png', 'btn_next': 'assets/play/btn_next.png',
'btn_pre': 'assets/play/btn_pre.png', 'btn_pre': 'assets/play/btn_pre.png',
'bg_main_mask': 'assets/play/bg_main_mask.png', 'bg_main_mask': 'assets/play/bg_main_mask.png',
}; 'buttonShadow': 'assets/play/buttonShadow.png',
'bg_container': 'assets/play/bg_container.png',
'bg_container_left': 'assets/play/bg_container_left.png',
'bg_letter_target': 'assets/play/bg_letter_target.png',
'btn_shift': 'assets/play/btn_shift.png',
'btn_shift_shadow': 'assets/play/btn_shift_shadow.png',
'bg_block_right': 'assets/play/bg_block_right.png',
'bg_block_disable': 'assets/play/bg_block_right_disable.png',
'bg_block_init': 'assets/play/bg_block_init.png',
'bg_block_focus': 'assets/play/bg_block_focus.png',
'bg_block_wrong': 'assets/play/bg_block_wrong.png',
};
const localAudios = { const localAudios = {
'sm-back': "assets/default/audio/sm-back.mp3", 'sm-back': "assets/default/audio/sm-back.mp3",
......
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