Commit 00a8b820 authored by 李维's avatar 李维

dev commit

parent 7f59084d
...@@ -355,7 +355,7 @@ export class Cartoon { ...@@ -355,7 +355,7 @@ export class Cartoon {
} }
createCartoonElementShapeRect(id: string, width, height, fillColor = "#FFFF00") { createCartoonElementShapeRect(id: string, width, height, fillColor = "#FFFF00") {
let element = this.createCartoonElement(id, "ShapeRect") let element = this.createCartoonElement(id, "ShapeRectNew")
element.ref.setSize(width, height); element.ref.setSize(width, height);
element.ref.fillColor = fillColor; element.ref.fillColor = fillColor;
return element return element
......
...@@ -407,6 +407,7 @@ export class Label extends MySprite { ...@@ -407,6 +407,7 @@ export class Label extends MySprite {
maxWidth; maxWidth;
outline = 0; outline = 0;
outlineColor = "#ffffff"; outlineColor = "#ffffff";
lineNum = 1;
maxSingalLineWidth = 0; maxSingalLineWidth = 0;
baseY = 0 baseY = 0
...@@ -449,14 +450,14 @@ export class Label extends MySprite { ...@@ -449,14 +450,14 @@ export class Label extends MySprite {
if (testWidth > this.maxSingalLineWidth && n > 0) { if (testWidth > this.maxSingalLineWidth && n > 0) {
// this.ctx.fillText(line, 0, this._warpLineY); // this.ctx.fillText(line, 0, this._warpLineY);
line = words[n] + ' '; line = words[n] + ' ';
// this._warpLineY += this.fontSize; this._warpLineY += this.fontSize;
index++ index++
console.log(index)
height += this.fontSize; height += this.fontSize;
}else { }else {
line = testLine; line = testLine;
} }
} }
this.lineNum = index;
this._height = height; this._height = height;
} }
...@@ -548,6 +549,7 @@ export class Label extends MySprite { ...@@ -548,6 +549,7 @@ export class Label extends MySprite {
var words = this.text.split(' '); var words = this.text.split(' ');
var line = ''; var line = '';
this._warpLineY = 0; this._warpLineY = 0;
let index = 0;
for (var n = 0; n < words.length; n++) { for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' '; var testLine = line + words[n] + ' ';
var metrics = this.ctx.measureText(testLine); var metrics = this.ctx.measureText(testLine);
...@@ -555,13 +557,15 @@ export class Label extends MySprite { ...@@ -555,13 +557,15 @@ export class Label extends MySprite {
if (testWidth > this.maxSingalLineWidth && n > 0) { if (testWidth > this.maxSingalLineWidth && n > 0) {
this.ctx.fillText(line, 0, this._warpLineY); this.ctx.fillText(line, 0, this._warpLineY);
line = words[n] + ' '; line = words[n] + ' ';
this._warpLineY += this.fontSize; index++;
this._warpLineY += this.warpLineHeight?this.warpLineHeight:this.fontSize;
} }
else { else {
line = testLine; line = testLine;
} }
} }
this.y = this.baseY // + this._warpLineY this.lineNum = index;
this.y = this.baseY + this._warpLineY
this.ctx.fillText(line, 0, this._warpLineY); this.ctx.fillText(line, 0, this._warpLineY);
} else { } else {
this.ctx.fillText(this.text, 0, 0); this.ctx.fillText(this.text, 0, 0);
...@@ -602,7 +606,6 @@ export class ShapeRectNew extends MySprite { ...@@ -602,7 +606,6 @@ export class ShapeRectNew extends MySprite {
const width = this.width; const width = this.width;
const height = this.height; const height = this.height;
const radius = this.radius; const radius = this.radius;
ctx.save(); ctx.save();
ctx.beginPath(0); ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI // 从右下角顺时针绘制,弧度从0到1/2PI
......
...@@ -130,8 +130,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -130,8 +130,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------ // ------------ 游戏逻辑数据 ------------
m_openShift: boolean = false; m_openShift: boolean = false;
m_blockGroup = null; m_blockGroup = null;
m_blockFirstSubmit = null;
m_submitTimes = null;
m_wordAll = null; m_wordAll = null;
m_allBlocks = []; m_allBlocks = [];
m_currentInput = ""; m_currentInput = "";
...@@ -210,6 +208,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -210,6 +208,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initKeyboard(); this.initKeyboard();
this.initSubmit(); this.initSubmit();
this.initOutputWindow(); this.initOutputWindow();
this.initCheckPannel();
this.initSlider();
this.switchQuestion(0, 0); this.switchQuestion(0, 0);
} }
...@@ -346,6 +346,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -346,6 +346,12 @@ export class PlayComponent implements OnInit, OnDestroy {
}) })
questionText.ref.text = "a fish whose head look like those of a horse" questionText.ref.text = "a fish whose head look like those of a horse"
element.out = (callback)=> {
return tweenChange(element.ref, {y: -1000}, 1, ()=>{
callback && callback()
})
}
this.subscribeMapDownEvent(btnNext.id, async ()=>{ this.subscribeMapDownEvent(btnNext.id, async ()=>{
this.switchQuestion(this.m_currentQuestionIndex, this.m_currentQuestionIndex + 1); this.switchQuestion(this.m_currentQuestionIndex, this.m_currentQuestionIndex + 1);
await this.buttonPressAnimation(btnNext.id, btnNextShadow.id) await this.buttonPressAnimation(btnNext.id, btnNextShadow.id)
...@@ -403,6 +409,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -403,6 +409,12 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
}) })
element.out = (callback)=> {
return tweenChange(element.ref, {x: this.g_canvasWidth + 1000}, 1, ()=>{
callback && callback()
})
}
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'] 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']
let allLetterRefs = [] let allLetterRefs = []
let baseX = -855 / 2; let baseX = -855 / 2;
...@@ -625,7 +637,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -625,7 +637,6 @@ export class PlayComponent implements OnInit, OnDestroy {
if(status) { if(status) {
container.switchStatus("focus") container.switchStatus("focus")
} else { } else {
console.log("3f")
container.switchStatus("right") container.switchStatus("right")
} }
if(status) { if(status) {
...@@ -658,7 +669,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -658,7 +669,6 @@ export class PlayComponent implements OnInit, OnDestroy {
container.active(false); container.active(false);
if(letter != container.getContentText()) { if(letter != container.getContentText()) {
this.m_hasErrorLetter = true; this.m_hasErrorLetter = true;
console.log(this.m_currentQuestionIndex, groupIndex)
if(this.m_currentQuestionIndex == groupIndex) { if(this.m_currentQuestionIndex == groupIndex) {
if(!this.m_hasActiveBlock) { if(!this.m_hasActiveBlock) {
container.switchStatus("focus"); container.switchStatus("focus");
...@@ -666,7 +676,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -666,7 +676,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.m_currentInputIndex = groupIndex; this.m_currentInputIndex = groupIndex;
container.active(true) container.active(true)
} else { } else {
console.log("R")
container.switchStatus("wrong"); container.switchStatus("wrong");
} }
} else { } else {
...@@ -675,7 +684,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -675,7 +684,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} else { } else {
container.isCorrect = true; container.isCorrect = true;
if(this.m_currentInputIndex == groupIndex) { if(this.m_currentInputIndex == groupIndex) {
console.log("V")
container.switchStatus("right") container.switchStatus("right")
} else { } else {
container.switchStatus("disable") container.switchStatus("disable")
...@@ -685,16 +693,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -685,16 +693,13 @@ export class PlayComponent implements OnInit, OnDestroy {
container.checkWhenSwitchQuestion = (withRed, fromIndex, groupIndex, contentSaved?) => { container.checkWhenSwitchQuestion = (withRed, fromIndex, groupIndex, contentSaved?) => {
// container.active(false); // container.active(false);
console.log(groupIndex, this.m_currentQuestionIndex)
if(groupIndex!= this.m_currentQuestionIndex) { if(groupIndex!= this.m_currentQuestionIndex) {
if(container.getContentText() == "") { if(container.getContentText() == "") {
container.switchStatus("init") container.switchStatus("init")
} else { } else {
if(this.m_submitedTimes == 0) { if(this.m_submitedTimes == 0) {
console.log("DVDVDVDV")
container.switchStatus("disable") container.switchStatus("disable")
} else { } else {
console.log("modified", container.modified)
if(container.isCorrect || container.modified) { if(container.isCorrect || container.modified) {
container.switchStatus("disable") container.switchStatus("disable")
} else { } else {
...@@ -703,7 +708,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -703,7 +708,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
} else { } else {
console.log("A")
if(this.m_submitedTimes == 0 ) { if(this.m_submitedTimes == 0 ) {
container.switchStatus("right") container.switchStatus("right")
if(!this.m_hasActiveBlock) { if(!this.m_hasActiveBlock) {
...@@ -766,13 +770,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -766,13 +770,10 @@ export class PlayComponent implements OnInit, OnDestroy {
let step = (width/colNum)<(height/rolNum)?(width/colNum):(height/rolNum); let step = (width/colNum)<(height/rolNum)?(width/colNum):(height/rolNum);
this.m_blockGroup = new Array(this.g_formData.dataArray.length); 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(""); this.m_wordAll = new Array(this.g_formData.dataArray.length).fill("");
for(let i=0; i<this.g_formData.dataArray.length; i++) { for(let i=0; i<this.g_formData.dataArray.length; i++) {
this.m_blockGroup[i] = [] this.m_blockGroup[i] = []
this.m_blockFirstSubmit[i] = true;
} }
let indexArr = new Array(this.g_formData.dataArray.length).fill(0) let indexArr = new Array(this.g_formData.dataArray.length).fill(0)
...@@ -791,6 +792,458 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -791,6 +792,458 @@ export class PlayComponent implements OnInit, OnDestroy {
this.render(element.ref) this.render(element.ref)
} }
initCheckPannel() {
// let element = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_container`, "btn_submit", (w, h)=>{
// return {
// sx: 888 * this.g_mapScale / w,
// sy: 160 * this.g_mapScale / h,
// }
// }, (w, h)=>{
// return {
// x: this.g_canvasWidth / 2 + 855 * this.g_mapScale / 2 + 118 * this.g_mapScale,
// y: this.g_canvasHeight / 2 + 700 * this.g_mapScale
// }
// })
let element = this.g_cartoon.createCartoonElementShapeRect("checkpannel_container", this.g_canvasWidth / 2, this.g_canvasHeight, "#FFF")
element.ref.x = this.g_canvasWidth + 1000;
element.ref.y = 0;
element.ref.alpha = 0;
element.in = (callback) => {
return tweenChange(element.ref, {x: this.g_canvasWidth / 2}, 1, ()=> {
callback && callback()
})
}
// 背景 上:canvas高-中 中:985 下:canvas高-中-上
let bgMiddle = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_bg_middle`, "bg_check_middle", (w, h)=>{
return {
sx: this.g_canvasWidth / 2 / w,
sy: 985 * this.g_mapScale / h,
}
}, (w, h)=>{
return {
x: this.g_canvasWidth / 4,
y: this.g_canvasHeight / 2
}
})
element.ref.addChild(bgMiddle.ref)
let bgTop = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_bg_top`, "bg_check_top", (w, h)=>{
return {
sx: this.g_canvasWidth / 2 / w,
sy: (this.g_canvasHeight - 985 * this.g_mapScale) / 2 / h,
}
}, (w, h)=>{
return {
x: this.g_canvasWidth / 4,
y: (this.g_canvasHeight - 985 * this.g_mapScale) / 4
}
})
element.ref.addChild(bgTop.ref)
let bBottom = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_bg_bottom`, "bg_check_bottom", (w, h)=>{
return {
sx: this.g_canvasWidth / 2 / w,
sy: (this.g_canvasHeight - 985 * this.g_mapScale) / 2 / h,
}
}, (w, h)=>{
return {
x: this.g_canvasWidth / 4,
y: this.g_canvasHeight - (this.g_canvasHeight - 985 * this.g_mapScale) / 4
}
})
element.ref.addChild(bBottom.ref)
let bgMiddleMask = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_bg_middle_mask`, "bg_check_middle_mask", (w, h)=>{
return {
sx: this.g_canvasWidth / 2 / w,
sy: 985 * this.g_mapScale / h,
}
}, (w, h)=>{
return {
x: this.g_canvasWidth / 4,
y: this.g_canvasHeight / 2
}
})
element.ref.addChild(bgMiddleMask.ref)
let checkMiddle = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_checnk_middle`, "check_middle", (w, h)=>{
return {
sx: 1 * bgMiddle.ref.scaleX,
sy: 1,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
bgMiddle.ref.addChild(checkMiddle.ref)
let checkTop = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_checnk_top`, "check_top", (w, h)=>{
return {
sx: 1 * bgMiddleMask.ref.scaleX,
sy: 186 / h,
}
}, (w, h)=>{
return {
x: 0,
y: -985/2 - 186 / 2
}
})
bgMiddleMask.ref.addChild(checkTop.ref)
let checkBottom = this.g_cartoon.createCartoonElementImageFunc(`checkpannel_checnk_bottom`, "check_bottom", (w, h)=>{
return {
sx: 1 * bgMiddleMask.ref.scaleX,
sy: 79 / h,
}
}, (w, h)=>{
return {
x: 0,
y: 985/2 + 79 / 2
}
})
bgMiddleMask.ref.addChild(checkBottom.ref)
// 滚动面板
let scrollContent = this.g_cartoon.createCartoonElementShapeRect("check_scroll_pannel", 880, 985 * 5, "#FFFFFF");
scrollContent.ref.y = -985 / 2
scrollContent.ref.x = -880 / 2
scrollContent.ref.alpha = 0;
checkMiddle.ref.addChild(scrollContent.ref)
this.render(element.ref)
let clickSY = null;
let baseY = null;
scrollContent.canScroll = true;
scrollContent.topY = -985 / 2
scrollContent.currentY = 0;
scrollContent.windowHeight = 985;
this.subscribeMapDragEvent(scrollContent.id, ()=>{
if(!scrollContent.canScroll) {
this.g_enableMapUp = true;
this.g_enableMapDown = true;
return;
}
clickSY = this.g_clickY;
baseY = scrollContent.ref.y;
}, ()=>{
if(!scrollContent.canScroll) {
return
}
let dis = (clickSY - this.g_clickY) / this.g_mapScale;
let _t = scrollContent.topY - (scrollContent.currentY - scrollContent.windowHeight) - scrollContent.ref.height
if(scrollContent.topY <= (baseY - dis)) {
// console.log("已经滚动到顶部")
scrollContent.ref.y = scrollContent.topY
} else {
if((baseY - dis) <= _t) {
// console.log("已经滚动到底部")
scrollContent.ref.y = _t
} else {
// console.log("滚动")
scrollContent.ref.y = baseY - dis
}
}
let total = scrollContent.topY - _t;
let current = scrollContent.topY - scrollContent.ref.y
let progress = Math.floor(current / total * 100) / 100;
if(progress<0) {
progress = 0
}
if(progress>1) {
progress = 1
}
this.g_cartoon.getCartoonElement("slider-background").initSlider(scrollContent.windowHeight, 985*5, progress)
}, ()=>{
this.g_enableMapUp = true;
this.g_enableMapDown = true;
})
}
initSlider() {
const updateSlider = (len) => {
let top = this.g_cartoon.getCartoonElement("slider-top");
let body = this.g_cartoon.getCartoonElement("slider-body");
let bottom = this.g_cartoon.getCartoonElement("slider-bottom");
body.update(len);
top.update();
bottom.update();
}
const setProgress = (scale) => {
sliderBG.currentProgress = scale;
// let scrollPannel = this.g_cartoon.getCartoonElement("check_scroll_pannel")
let totalHeight = LineHeight;
let pix = totalHeight / sliderBG.fullHeight; // 整体高度的一个单位 对应多少滚动条高度
let empty = (sliderBG.fullHeight - sliderBG.winHeight) * scale * pix; // 需要滚动的高度 乘以 进度 再换算成滚动条的高度
let top = this.g_cartoon.getCartoonElement("slider-top");
let body = this.g_cartoon.getCartoonElement("slider-body");
let bottom = this.g_cartoon.getCartoonElement("slider-bottom");
body.ref.y = -LineHeight / 2 + empty + body.ref.scaleY * sliderBodyHeight / 2 + sliderTopHeight;
top.update();
bottom.update();
// scrollPannel.ref.y = 78 * this.g_mapScale - (scrollPannel.currentY - (this.g_canvasHeight - 78 * this.g_mapScale)) * sliderBG.currentProgress;
}
//
const LineHeight = 985;
const LineWidth = 10;
const sliderTopHeight = 5;
const sliderBodyHeight = 5;
const sliderBottomHeight = 5;
const offSetY = 0;
let sliderBG = this.g_cartoon.createCartoonElementImageFunc("slider-background", "bgSlider", (w, h)=>{
return {
sx: LineWidth / w,
sy: LineHeight / h,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
// sliderBG.ref.scaleX = 0;
sliderBG.isShow = false;
sliderBG.show = () => {
if(!sliderBG.isShow) {
sliderBG.isShow = true;
tweenChange(sliderBG.ref, {scaleX: sliderBG.initScaleX}, 0.05)
}
}
sliderBG.hide = () => {
tweenChange(sliderBG.ref, {scaleX: 0}, 0.05)
}
sliderBG.initSlider = (windowHeight, fullHeight, current) => {
sliderBG.winHeight = windowHeight;
sliderBG.fullHeight = fullHeight;
let totalHeight = LineHeight;
let pix = totalHeight / fullHeight;
let fillHeight = windowHeight * pix
updateSlider(fillHeight)
setProgress(current)
}
sliderBG.winHeight = 0;
sliderBG.fullHeight = 0;
sliderBG.pix = 0;
sliderBG.currentProgress = 0;
sliderBG.getCurrentProgress = () => {
let emptyTop = (sliderTop.ref.y - 2) + 271;
let emptyDown = LineHeight / 2 - (sliderBottom.ref.y + 2)
let scale = emptyTop / (emptyTop + emptyDown)
let progress = Math.floor(scale * 100) / 100
return progress>0?progress:0
}
let sliderTop = this.g_cartoon.createCartoonElementImageFunc("slider-top", "slider_top", (w, h)=>{
return {
sx: LineWidth / w,
sy: sliderTopHeight / h,
}
}, (w, h)=>{
return {
x: 0,
y: sliderTopHeight / 2
}
})
sliderTop.update = () => {
let y = sliderBody.ref.y
let box = sliderBody.ref.getBoundingBox()
y -= box.height / 2 / this.g_mapScale + sliderTopHeight / 2;
if(y<(-LineHeight / 2)) {
// console.log("滑动已到最上", y)
return false;
} else {
sliderTop.ref.y = y;
return true;
}
}
let sliderBody = this.g_cartoon.createCartoonElementImageFunc("slider-body", "slider_body", (w, h)=>{
return {
sx: LineWidth / w,
sy: sliderBodyHeight / h,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
sliderBody.update = (len) => {
let y = sliderTop.ref.y + sliderTop.ref.height
sliderBody.ref.scaleY = len / sliderBodyHeight
y += len / 2;
sliderBody.ref.y = y
}
sliderBody.toEnd = () => {
let box = sliderBody.ref.getBoundingBox()
sliderBottom.ref.y = LineHeight / 2
sliderBody.ref.y = sliderBottom.ref.y - box.height / 2 / this.g_mapScale - 2;
sliderTop.update();
}
sliderBody.toTop = () => {
let box = sliderBody.ref.getBoundingBox()
sliderTop.ref.y = -LineHeight / 2
sliderBody.ref.y = sliderTop.ref.y + box.height / 2 / this.g_mapScale + 2;
sliderBottom.update();
}
let sliderBottom = this.g_cartoon.createCartoonElementImageFunc("slider-bottom", "slider_bottom", (w, h)=>{
return {
sx: LineWidth / w,
sy: sliderBottomHeight / h,
}
}, (w, h)=>{
return {
x: 0,
y: sliderBottomHeight / 2
}
})
sliderBottom.update = () => {
let y = sliderBody.ref.y
let box = sliderBody.ref.getBoundingBox()
y += box.height / 2 / this.g_mapScale + sliderBottomHeight / 2;
if(y>LineHeight / 2) {
// console.log("滑动已到最下", y)
return false;
} else {
sliderBottom.ref.y = y
return true;
}
}
sliderBG.ref.addChild(sliderBody.ref)
sliderBG.ref.addChild(sliderBottom.ref)
sliderBG.ref.addChild(sliderTop.ref)
let checkMiddle = this.g_cartoon.getCartoonElement("checkpannel_checnk_middle");
checkMiddle.ref.addChild(sliderBG.ref)
sliderBG.ref.x = checkMiddle.ref.width / 2 - 80 * this.g_mapScale;
sliderBG.ref.y = 0;
// let clickSY = 0
// let baseY = 0;
// const scrollPannel = this.g_cartoon.getCartoonElement("scroll-pannel")
// this.subscribeMapDragEvent(sliderBody.id, ()=>{
// clickSY = this.g_clickY;
// baseY = sliderBody.ref.y
// }, ()=>{
// let dis = clickSY - this.g_clickY
// let savedY = sliderBody.ref.y
// sliderBody.ref.y = baseY - dis
// let crTop = sliderTop.update()
// let crBottom = sliderBottom.update()
// if(!crTop) {
// sliderBody.toTop()
// sliderTop.update();
// sliderBottom.update();
// }
// if(!crBottom) {
// sliderBody.toEnd();
// sliderTop.update();
// sliderBottom.update();
// }
// scrollPannel.ref.y = 52 * this.g_mapScale - (scrollPannel.currentY - (this.g_canvasHeight - 52 * this.g_mapScale)) * sliderBG.getCurrentProgress()
// }, ()=>{
// this.g_enableMapUp = true;
// this.g_enableMapDown = true;
// })
}
showCheckPannel(checkResult) {
const creatItem = (height, withSplit, data) => {
let scrollContent = this.g_cartoon.getCartoonElement("check_scroll_pannel")
let totalHeight = height
let text = this.g_cartoon.createCartoonElementLabel("text", data.text, "DroidSansFallback", "#FFFFFF", 48)
text.ref.textAlign = "left";
text.ref.warpLineHeight = 64;
text.ref.maxSingalLineWidth = 800;
text.ref.refreshSize();
text.ref.x = 0
text.ref.baseY = totalHeight
totalHeight += (text.ref.lineNum + 1) * 64;
scrollContent.ref.addChild(text.ref)
let wordColorBG = this.g_cartoon.createCartoonElementShapeRect("eeeeee", 360, 64, data.right?"#007b3e":"#d71818");
wordColorBG.ref.radius = 10
wordColorBG.ref.y = totalHeight + 64
totalHeight += 64*2;
let word = this.g_cartoon.createCartoonElementLabel("text-label", data.word, "DroidSansFallback", "#FFFFFF", 44)
word.ref.x = 360 / 2
word.ref.y = 64 / 2 + 5
wordColorBG.ref.addChild(word.ref);
scrollContent.ref.addChild(wordColorBG.ref)
if(!data.right) {
let ele = this.g_cartoon.createCartoonElementImageFunc(`err`, "bg_wrong_ans", (w, h)=>{
return {
sx: 797 / w,
sy: 120 / h,
}
}, (w, h)=>{
return {
x: scrollContent.ref.width / 2,
y: totalHeight + 50 + 60
}
})
totalHeight += 150;
let word = this.g_cartoon.createCartoonElementLabel("text-label", data.rightWord, "DroidSansFallback", "#ffe9b1", 44)
word.ref.x = 0
word.ref.y = 0
ele.ref.addChild(word.ref)
scrollContent.ref.addChild(ele.ref)
}
if(withSplit) {
let splitLine = this.g_cartoon.createCartoonElementImageFunc(`splitline`, "check_pannel_split_line", (w, h)=>{
return {
sx: 880 / w,
sy: 10 / h,
}
}, (w, h)=>{
return {
x: 880 / 2,
y: totalHeight + 50
}
})
totalHeight += 60;
scrollContent.ref.addChild(splitLine.ref);
}
totalHeight += 20;
return totalHeight
}
let scrollContent = this.g_cartoon.getCartoonElement("check_scroll_pannel")
let sliderBG = this.g_cartoon.getCartoonElement("slider-background")
let totalHeight = 0;
let totalNum = checkResult.length;
checkResult.forEach((element, index) => {
totalHeight = creatItem(totalHeight, !(index==(totalNum-1)), element)
});
sliderBG.initSlider(scrollContent.windowHeight, 985*5, 0)
let checkPannel = this.g_cartoon.getCartoonElement("checkpannel_container");
checkPannel.in()
}
initSubmit() { initSubmit() {
let submit = this.g_cartoon.createCartoonElementImageFunc(`button_submit`, "btn_submit", (w, h)=>{ let submit = this.g_cartoon.createCartoonElementImageFunc(`button_submit`, "btn_submit", (w, h)=>{
return { return {
...@@ -815,10 +1268,28 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -815,10 +1268,28 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
const handleSubmit = () => { const handleSubmit = async () => {
this.m_submitedTimes++; this.m_submitedTimes++;
this.m_submitTimes[this.m_currentQuestionIndex]++; if(this.m_submitedTimes>=2) {
this.m_blockFirstSubmit[this.m_currentQuestionIndex] = false; let qp = this.g_cartoon.getCartoonElement("question_container")
let keyboard = this.g_cartoon.getCartoonElement("keyboard_container")
await qp.out()
await keyboard.out()
await this.showCheckPannel([
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: true, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"},
{text: "Across 1. running water flowing on the Earth", word: "storfish", right: false, rightWord: "Sea house"}
])
this.g_cartoon.getCartoonElement("background_mask").ref.alpha = 0
this.g_enableMapDown = true;
}
this.m_currentInputIndex = 0; this.m_currentInputIndex = 0;
let hasIncorrect = false; let hasIncorrect = false;
let status = false; let status = false;
...@@ -878,7 +1349,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -878,7 +1349,7 @@ export class PlayComponent implements OnInit, OnDestroy {
indexText.setIndex(toIndex); indexText.setIndex(toIndex);
let questionText = this.g_cartoon.getCartoonElement("QuestionText"); let questionText = this.g_cartoon.getCartoonElement("QuestionText");
questionText.setContent(this.g_formData.dataArray[toIndex].text) questionText.setContent(this.g_formData.dataArray[toIndex].text)
*/ */
let nextButton = this.g_cartoon.getCartoonElement("question_next") let nextButton = this.g_cartoon.getCartoonElement("question_next")
if(this.g_formData.dataArray.length>toIndex+1) { if(this.g_formData.dataArray.length>toIndex+1) {
nextButton.active(true) nextButton.active(true)
...@@ -897,7 +1368,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -897,7 +1368,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// submit响应事件,会标红错误 // submit响应事件,会标红错误
updateStatusByGroupIndex(index) { updateStatusByGroupIndex(index) {
console.log("DVDVDVVVVVVVVVVVVVVVVV")
let blocks = this.m_blockGroup[index]; let blocks = this.m_blockGroup[index];
this.m_hasErrorLetter = false; this.m_hasErrorLetter = false;
blocks.forEach((item, i) => { blocks.forEach((item, i) => {
...@@ -931,7 +1401,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -931,7 +1401,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.m_currentInput = null; this.m_currentInput = null;
this.m_currentInputIndex++; this.m_currentInputIndex++;
count++; count++;
console.log(blocks[this.m_currentInputIndex]?blocks[this.m_currentInputIndex].isCorrect:"-")
} while(count<blocks.length && this.m_currentInputIndex<blocks.length && blocks[this.m_currentInputIndex].isCorrect) } while(count<blocks.length && this.m_currentInputIndex<blocks.length && blocks[this.m_currentInputIndex].isCorrect)
} }
......
...@@ -46,13 +46,28 @@ const localImages = { ...@@ -46,13 +46,28 @@ const localImages = {
'btn_shift_shadow': 'assets/play/btn_shift_shadow.png', 'btn_shift_shadow': 'assets/play/btn_shift_shadow.png',
'bg_block_right': 'assets/play/bg_block_right.png', 'bg_block_right': 'assets/play/bg_block_right.png',
'bg_block_disable': 'assets/play/bg_block_right_disable.png', 'bg_check_middle': 'assets/play/bg_block_right_disable.png',
'bg_block_init': 'assets/play/bg_block_init.png', 'bg_block_init': 'assets/play/bg_block_init.png',
'bg_block_focus': 'assets/play/bg_block_focus.png', 'bg_block_focus': 'assets/play/bg_block_focus.png',
'bg_block_wrong': 'assets/play/bg_block_wrong.png', 'bg_block_wrong': 'assets/play/bg_block_wrong.png',
'bg_checkboard': 'assets/play/bg_checkboard.png', 'bg_checkboard': 'assets/play/bg_checkboard.png',
'btn_submit': 'assets/play/btn_submit.png', 'btn_submit': 'assets/play/btn_submit.png',
'btn_submit_outline': 'assets/play/btn_submit_outline.png', 'btn_submit_outline': 'assets/play/btn_submit_outline.png',
'bg_check_bottom': 'assets/play/bg_check_bottom.png',
'bg_check_middle': 'assets/play/bg_check_middle.png',
'bg_check_middle_mask': 'assets/play/bg_check_middle_mask.png',
'bg_check_top': 'assets/play/bg_check_top.png',
'check_bottom': 'assets/play/check_bottom.png',
'check_middle': 'assets/play/check_middle.png',
'check_top': 'assets/play/check_top.png',
'check_pannel_split_line': 'assets/play/check_pannel_split_line.png',
'bg_wrong_ans': 'assets/play/bg_wrong_ans.png',
'bgSlider': 'assets/play/bgSlider.png',
'slider_top': 'assets/play/slider_top.png',
'slider_body': 'assets/play/slider_body.png',
'slider_bottom': 'assets/play/slider_bottom.png'
}; };
const localAudios = { const localAudios = {
......
src/assets/play/bgSlider.png

1.82 KB | W: | H:

src/assets/play/bgSlider.png

1.96 KB | W: | H:

src/assets/play/bgSlider.png
src/assets/play/bgSlider.png
src/assets/play/bgSlider.png
src/assets/play/bgSlider.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/bg_check_bottom.png

114 KB | W: | H:

src/assets/play/bg_check_bottom.png

114 KB | W: | H:

src/assets/play/bg_check_bottom.png
src/assets/play/bg_check_bottom.png
src/assets/play/bg_check_bottom.png
src/assets/play/bg_check_bottom.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/bg_check_middle.png

331 KB | W: | H:

src/assets/play/bg_check_middle.png

331 KB | W: | H:

src/assets/play/bg_check_middle.png
src/assets/play/bg_check_middle.png
src/assets/play/bg_check_middle.png
src/assets/play/bg_check_middle.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/bg_check_top.png

107 KB | W: | H:

src/assets/play/bg_check_top.png

107 KB | W: | H:

src/assets/play/bg_check_top.png
src/assets/play/bg_check_top.png
src/assets/play/bg_check_top.png
src/assets/play/bg_check_top.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/bg_wrong_ans.png

784 Bytes | W: | H:

src/assets/play/bg_wrong_ans.png

5.29 KB | W: | H:

src/assets/play/bg_wrong_ans.png
src/assets/play/bg_wrong_ans.png
src/assets/play/bg_wrong_ans.png
src/assets/play/bg_wrong_ans.png
  • 2-up
  • Swipe
  • Onion skin
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