Commit 50d6901d authored by Chen Jiping's avatar Chen Jiping

perf:完成模板开发

parent e88111f1
import {
MySprite, tweenChange,
ShapeRect
} from './Unit';
export class AudioAnimation {
private x = 0;
private y = 0;
images = new Map();
bg: ShapeRect;
playPic1;
playPic2;
playPic3;
playPic4;
curAudio;
playing = false;
hideFlag = true;
/**
* 设置播放帧图片
* @param images
*/
constructor(images) {
this.images = images;
}
setXY(x, y) {
this.x = x;
this.y = y;
}
/**
* 初始化图
* @param parent 图片显示父对象
* @param show 是否直接显示
*/
initPic(parent, show: boolean) {
if (!parent) {
return;
}
const bg = new ShapeRect();
const getAudioPic = (index) => {
const playPic = new MySprite();
playPic.init(this.images.get("btn_laba" + index));
playPic.alpha = 0;
playPic.x = playPic.getBoundingBox().width / 2;
playPic.y = playPic.getBoundingBox().height / 2;
bg.addChild(playPic);
return playPic;
};
const playPic1 = getAudioPic(1);
if (show) {
playPic1.alpha = 1;
this.hideFlag = false;
}
else {
playPic1.alpha = 0;
this.hideFlag = true;
}
this.playPic1 = playPic1;
const playPic2 = getAudioPic(2);
this.playPic2 = playPic2;
const playPic3 = getAudioPic(3);
this.playPic3 = playPic3;
const playPic4 = getAudioPic(4);
this.playPic4 = playPic4;
bg.setSize(playPic1.getBoundingBox().width, playPic1.getBoundingBox().height);
bg.alpha = 0;
this.bg = bg;
bg.x = this.x;
bg.y = this.y;
if (parent instanceof Array) {
parent.push(bg);
}
else {
parent.addChild(bg);
}
}
/**
* 显示播放状态
*/
showPlayStauts() {
this.hideFlag = false;
const setPause = () => {
if (this.hideFlag) {
this.playPic1.alpha = 0;
}
else {
this.playPic1.alpha = 1;
}
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
}
const show1 = () => {
if (this.playing) {
this.playPic1.alpha = 0;
this.playPic2.alpha = 1;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
setTimeout(() => {
show2();
}, 500);
}
else {
setPause();
}
};
const show2 = () => {
if (this.playing) {
this.playPic1.alpha = 0;
this.playPic2.alpha = 0;
this.playPic3.alpha = 1;
this.playPic4.alpha = 0;
setTimeout(() => {
show3();
}, 500);
}
else {
setPause();
}
};
const show3 = () => {
if (this.playing) {
this.playPic1.alpha = 0;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 1;
setTimeout(() => {
show4();
}, 500);
}
else {
setPause();
}
};
const show4 = () => {
if (this.playing) {
this.playPic1.alpha = 1;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
setTimeout(() => {
show1();
}, 500);
}
else {
setPause();
}
};
show1();
}
/**
*
* @param audio 播放音频
* @param callback
*/
playAudio(audio, callback = null) {
//console.log(audio);
if (!audio) {
return;
}
this.curAudio = audio;
audio.onended = () => {
this.playing = false;
if (callback) {
callback();
}
};
audio.play();
this.playing = true;
this.showPlayStauts();
}
/**
*
* @param reset 是否重置
* @param callback 暂停后执行方法
*/
pauseAudio(reset = false, callback = null) {
const audio = this.curAudio;
if (audio) {
this.playing = false;
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
/**
* 隐藏音频播放动画
* @param reset 是否重置
*/
hide(reset = false) {
this.hideFlag = true;
this.pauseAudio(reset);
this.playPic1.alpha = 0;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
}
/**
* 显示播放动画
*/
show() {
this.hideFlag = false;
this.playPic1.alpha = 1;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
}
}
\ No newline at end of file
/**
*
* @param audio 音频
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
export function playAudio(audio, now = false, callback = null) {
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
/**
* 暂停播放音频
* @param audio 音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
export function pauseAudio(audio, reset = false, callback = null) {
if (audio) {
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
\ No newline at end of file
import { playAudio } from './AudioUtil';
import { MySprite, ShapeRect, tweenChange } from './Unit';
export class Celebrate{
bg: ShapeRect;
images;
audioObj;
bigStar :MySprite;
smallStar : MySprite;
pic : MySprite;
init(images, audioObj){
this.images = images;
this.audioObj = audioObj;
const bg = new ShapeRect();
this.bg = bg;
bg.alpha = 0;
this.initPic();
}
initPic(){
const pic = new MySprite();
pic.init(this.images.get('bg_goodiob'), 0.5, 0.5);
pic.x = pic.width / 2;
pic.y = pic.height / 2;
this.bg.addChild(pic);
this.pic = pic;
this.bg.setSize(pic.width, pic.height);
;
const bigStar = new MySprite();
this.bigStar = bigStar
bigStar.init(this.images.get('icon_star2'), 0.5, 0.5);
bigStar.x = 49 + bigStar.width / 2;
bigStar.y = 94 + bigStar.height / 2;
this.bg.addChild(bigStar);
const smallStar = new MySprite();
this.smallStar = smallStar;
smallStar.init(this.images.get('icon_star1'));
smallStar.x = 474 + smallStar.width / 2;
smallStar.y = 143 + smallStar.height / 2;
this.bg.addChild(smallStar);
}
show(mapscale = 1, callback = null){
let tempScale = mapscale;
this.pic.setScaleXY(0);
this.smallStar.setScaleXY(0);
this.bigStar.setScaleXY(0);
playAudio(this.audioObj['celebrate'], true);
tweenChange(this.pic, {scaleX : tempScale, scaleY : tempScale}, 0.5, ()=>{
tweenChange(this.smallStar, {scaleX : tempScale * 1.3, scaleY : tempScale * 1.3}, 0.3, ()=>{
tweenChange(this.smallStar, {scaleX : tempScale, scaleY : tempScale}, 0.3)
});
tweenChange(this.bigStar, {scaleX : tempScale * 1.3, scaleY : tempScale * 1.3}, 0.3, ()=>{
tweenChange(this.bigStar, {scaleX : tempScale, scaleY : tempScale}, 0.3, callback)
});
})
}
}
\ No newline at end of file
import { MySprite, ShapeRect } from './Unit';
export class Answer {
bg: ShapeRect;
images;
audioObj;
data;
width = 394;
height = 490;
pic : MySprite;
init(data, images, audioObj) {
this.audioObj = audioObj;
this.images = images;
this.data = data;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
this.bg = bg;
this.initPic();
}
initPic() {
const setMaxScale = (target: MySprite, maxW, maxH) => {
const sx = maxW / target.width;
const sy = maxH / target.height;
const s = Math.min(sx, sy);
target.setScaleXY(Math.round(s * 1000) / 1000);
}
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
pic.x = this.width / 2;
pic.y = this.height / 2;
this.pic = pic;
setMaxScale(pic, this.width, this.height);
this.bg.addChild(pic);
}
}
\ No newline at end of file
import {
MySprite,
moveItem,
removeItemFromArr,
rotateItem
} from './Unit';
export class Petal {
renderArr = [];
images;
ctx;
playing = true;
tempRenderArr = [];
constructor(renderArr, images, ctx) {
this.renderArr = renderArr;
this.images = images;
this.ctx = ctx;
this.tempRenderArr = [];
}
stop(callback = null) {
this.playing = false;
const checkFinish = () => {
if (this.tempRenderArr.length == 0) {
if (callback) {
callback();
}
}
else {
setTimeout(() => {
checkFinish();
}, 100);
}
}
checkFinish();
}
/**
* 显示结束花瓣
* @param rect {x,y,width, height} 花瓣显示位置及大小
* @param mapScale
* @param timeout 花瓣显示间隔
* @param kinds 花瓣种类,即花瓣图片样式数组个数
*/
showPetal(rect, mapScale: number, timeout: number, kinds = 9) {
if (!this.playing) {
return;
}
const petal = this.getPetal(rect, mapScale, kinds);
this.renderArr.push(petal);
this.tempRenderArr.push(petal);
let toY = rect.y + rect.height;
moveItem(petal, petal.x, toY + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.renderArr, petal);
removeItemFromArr(this.tempRenderArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.showPetal(rect, mapScale, timeout);
}, timeout);
}
/**
* 得到花瓣
* @param rect
* @param mapScale
* @param kinds
*/
private getPetal(rect, mapScale, kinds) {
const petal = new MySprite(this.ctx);
const id = Math.ceil(Math.random() * kinds);
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = rect.x + Math.random() * rect.width;
petal.x = randomX;
petal.y = rect.y - petal.height / 2 * petal.scaleY;
const randomT = 0.5 + Math.random() * 2;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
}
\ No newline at end of file
import { AudioAnimation } from './AudioAnimation';
import { playAudio } from './AudioUtil';
import { Answer } from './Exercises';
import {
ShapeRect,
MySprite,
Label,
tweenChange
} from './Unit';
export class Stage {
bg: ShapeRect;
images;
audioObj;
data;
width = 1280;
height = 720;
lGuardPic1: MySprite;
lGuardPic2: MySprite;
rGuardPic1: MySprite;
rGuardPic2: MySprite;
numberPic: MySprite;
leftCrownPic: MySprite;
rightCrownPic: MySprite;
leftChoicePic: MySprite;
rightChoicePic: MySprite;
numberLabel: Label;
total: Number = 0;
iconRight: MySprite;
rightScroll: MySprite;
wrongScroll: MySprite;
nextPagePic: MySprite;
resultArr: Array<ExercisesResult> = [];
lastBtn: MySprite;
nextBtn: MySprite;
leftAnswer: Answer;
rightAnswer: Answer;
audioAni: AudioAnimation;
leftBg : ShapeRect;
rightBg : ShapeRect;
init(images, audioObj, data) {
console.log(data);
this.images = images;
this.audioObj = audioObj;
this.data = {};
if (data) {
this.data = data;
}
this.total = this.data.exercisesArr ? this.data.exercisesArr.length : 0;
this.bg = new ShapeRect();
this.bg.setSize(this.width, this.height);
this.bg.alpha = 0;
this.initPic();
this.initChoice();
this.initGuard();
this.initCrown();
}
initPic() {
const star = new MySprite();
star.init(this.images.get('bg_star'));
star.x = this.bg.getBoundingBox().width / 2;
star.y = star.getBoundingBox().height / 2;
this.bg.addChild(star);
const pic = new MySprite();
pic.init(this.images.get('bg_di'), 0.5, 1);
pic.x = this.bg.getBoundingBox().width / 2;
pic.y = this.bg.getBoundingBox().height + 22;
this.bg.addChild(pic);
const numberPic = new MySprite();
numberPic.init(this.images.get('bg_number'), 0.5, 0);
numberPic.x = this.bg.getBoundingBox().width / 2;
numberPic.y = 0;
this.bg.addChild(numberPic);
this.numberPic = numberPic;
const numberLabel = new Label();
this.numberLabel = numberLabel;
numberLabel.fontColor = "#af5954";
numberLabel.fontName = "CSMB";
numberLabel.fontSize = 50;
this.numberLabel.textAlign = 'center';
this.setNumber(0);
numberLabel.y = 29 + numberLabel.getBoundingBox().height / 2;
numberLabel.x = this.bg.getBoundingBox().width / 2;
this.bg.addChild(numberLabel);
this.lastBtn = new MySprite();
this.lastBtn.init(this.images.get('btn_last'), 0, 0);
this.lastBtn.x = 66;
this.lastBtn.y = 194;
this.lastBtn.alpha = 0;
this.bg.addChild(this.lastBtn);
this.nextBtn = new MySprite();
this.nextBtn.init(this.images.get('btn_next'), 1, 0);
this.nextBtn.x = this.bg.width - 66;
this.nextBtn.y = this.lastBtn.y;
this.nextBtn.alpha = 0;
this.bg.addChild(this.nextBtn);
const audioAni = new AudioAnimation(this.images);
audioAni.setXY(1129, 78);
audioAni.initPic(this.bg, true);
this.audioAni = audioAni;
}
initGuard() {
const lGuardPic1 = new MySprite();
lGuardPic1.init(this.images.get('bg_monkeyleft1'), 0, 1);
lGuardPic1.x = 4;
lGuardPic1.y = this.bg.getBoundingBox().height - 19;
this.bg.addChild(lGuardPic1);
this.lGuardPic1 = lGuardPic1;
const lGuardPic2 = new MySprite();
lGuardPic2.init(this.images.get('bg_monkeyleft2'), 0, 1);
lGuardPic2.x = lGuardPic1.x;
lGuardPic2.y = lGuardPic1.y;
lGuardPic2.alpha = 0;
this.bg.addChild(lGuardPic2);
this.lGuardPic2 = lGuardPic2;
const rGuardPic1 = new MySprite();
rGuardPic1.init(this.images.get('bg_monkeyright1'), 1, 1);
rGuardPic1.x = this.bg.getBoundingBox().width - 4;
rGuardPic1.y = this.bg.getBoundingBox().height - 19;
this.bg.addChild(rGuardPic1);
this.rGuardPic1 = rGuardPic1;
const rGuardPic2 = new MySprite();
rGuardPic2.init(this.images.get('bg_monkeyright2'), 1, 1);
rGuardPic2.x = rGuardPic1.x;
rGuardPic2.y = rGuardPic1.y;
rGuardPic2.alpha = 0;
this.bg.addChild(rGuardPic2);
this.rGuardPic2 = rGuardPic2;
}
initCrown() {
const leftCrownPic = new MySprite();
leftCrownPic.init(this.images.get('bg_fu'), 0, 0);
leftCrownPic.x = 351;
leftCrownPic.y = -20;
this.bg.addChild(leftCrownPic);
this.leftCrownPic = leftCrownPic;
const rightCrownPic = new MySprite();
rightCrownPic.init(this.images.get('bg_fu'), 1, 0);
rightCrownPic.x = this.bg.getBoundingBox().width - 351;
rightCrownPic.y = leftCrownPic.y;
this.bg.addChild(rightCrownPic);
this.rightCrownPic = rightCrownPic;
}
initChoice() {
const leftChoicePic = new MySprite();
leftChoicePic.init(this.images.get('bg_xuanxiang1'), 0.5, 0.5);
leftChoicePic.x = 200 + leftChoicePic.width / 2;
leftChoicePic.y = 112 + leftChoicePic.height / 2;
this.bg.addChild(leftChoicePic);
this.leftChoicePic = leftChoicePic;
this.leftBg = new ShapeRect();
this.leftBg.setSize(leftChoicePic.width, leftChoicePic.height);
this.leftBg.alpha = 0;
this.leftBg.x = 200;
this.leftBg.y = 112;
this.bg.addChild(this.leftBg);
const rightChoicePic = new MySprite();
rightChoicePic.init(this.images.get('bg_xuanxiang2'), 0.5, 0.5);
rightChoicePic.x = 640 + rightChoicePic.width / 2;
rightChoicePic.y = leftChoicePic.y;
this.bg.addChild(rightChoicePic);
this.rightChoicePic = rightChoicePic;
this.rightBg = new ShapeRect();
this.rightBg.setSize(rightChoicePic.width, rightChoicePic.height);
this.rightBg.alpha = 0;
this.rightBg.x = 640;
this.rightBg.y = this.leftBg.y;
this.bg.addChild(this.rightBg);
}
setNumber(val) {
let text = "";
if (!val) {
text += 0;
}
else {
text += val;
}
text += "/" + this.total;
this.numberLabel.text = text;
this.numberLabel.refreshSize();
}
hide() {
this.numberLabel.visible = false;
this.numberPic.visible = false;
this.leftChoicePic.visible = false;
this.rightChoicePic.visible = false;
this.lGuardPic1.visible = false;
this.lGuardPic2.visible = false;
this.rGuardPic1.visible = false;
this.rGuardPic2.visible = false;
this.leftCrownPic.visible = false;
this.rightCrownPic.visible = false;
this.audioAni.hide(true);
if (this.rightScroll) {
this.bg.removeChild(this.rightScroll);
this.rightScroll = null;
}
if (this.wrongScroll) {
this.bg.removeChild(this.wrongScroll);
this.wrongScroll = null;
}
if (this.leftAnswer) {
this.leftBg.removeChild(this.leftAnswer.bg);
this.leftAnswer = null;
}
if (this.rightAnswer) {
this.rightBg.removeChild(this.rightAnswer.bg);
this.rightAnswer = null;
}
if (this.iconRight) {
this.bg.removeChild(this.iconRight);
this.iconRight = null;
}
if (this.lastBtn) {
this.lastBtn.alpha = 0;
}
if (this.nextBtn) {
this.nextBtn.alpha = 0;
}
}
initPage() {
if (this.rightScroll) {
this.bg.removeChild(this.rightScroll);
}
if (this.wrongScroll) {
this.bg.removeChild(this.wrongScroll);
}
if (this.iconRight) {
this.bg.removeChild(this.iconRight);
}
this.numberLabel.visible = true;
this.numberPic.visible = true;
this.leftChoicePic.visible = true;
this.rightChoicePic.visible = true;
this.lGuardPic1.visible = true;
this.lGuardPic2.visible = true;
this.rGuardPic1.visible = true;
this.rGuardPic2.visible = true;
this.leftCrownPic.visible = true;
this.rightCrownPic.visible = true;
this.lGuardPic1.alpha = 1;
this.lGuardPic2.alpha = 0;
this.rGuardPic1.alpha = 1;
this.rGuardPic2.alpha = 0;
this.leftCrownPic.alpha = 1;
this.rightCrownPic.alpha = 1;
if (this.audioAni.hideFlag) {
this.audioAni.show();
}
}
showRight(flag, callback = null) {
const getIcon = () => {
const iconRight = new MySprite();
iconRight.init(this.images.get('icon_right'), 0.5, 1);
iconRight.y = this.bg.height - 320;
this.bg.addChild(iconRight);
return iconRight;
}
const getRightScroll = () => {
const rightScroll = new MySprite();
rightScroll.init(this.images.get('bg_right'), 0.5, 1);
rightScroll.y = 0;
this.bg.addChild(rightScroll);
return rightScroll;
}
this.iconRight = getIcon();
this.rightScroll = getRightScroll();
playAudio(this.audioObj['right'], true);
if (flag == 'L') {
this.iconRight.x = 43 + this.iconRight.getBoundingBox().width / 2;
this.leftCrownPic.alpha = 0;
this.rightScroll.x = this.leftCrownPic.x + this.rightScroll.width / 2;
}
else if (flag == 'R') {
this.iconRight.x = (this.bg.width - 43) - this.iconRight.getBoundingBox().width / 2;
this.rightCrownPic.alpha = 0;
this.rightScroll.x = this.rightCrownPic.x - this.rightScroll.width / 2;
}
tweenChange(this.rightScroll, { y: this.rightScroll.height }, 0.5, () => {
if (callback) {
callback();
}
})
}
showWrong(flag, callback = null) {
playAudio(this.audioObj['wrong'], true);
const getWrongScroll = () => {
const wrongScroll = new MySprite();
wrongScroll.init(this.images.get('bg_wrong'), 0.5, 1);
wrongScroll.y = 0;
this.bg.addChild(wrongScroll);
return wrongScroll;
}
this.wrongScroll = getWrongScroll();
if (flag == 'L') {
this.lGuardPic1.alpha = 0;
this.lGuardPic2.alpha = 1;
this.wrongScroll.x = this.leftCrownPic.x + this.wrongScroll.width / 2;
}
else if (flag == 'R') {
this.rGuardPic1.alpha = 0;
this.rGuardPic2.alpha = 1;
this.wrongScroll.x = this.rightCrownPic.x - this.wrongScroll.width / 2;
}
tweenChange(this.wrongScroll, { y: this.wrongScroll.height }, 0.5, () => {
if (callback) {
callback();
}
})
}
initSummary(start = 0, limit = 0) {
//隐藏其它内容
this.hide();
if (this.resultArr) {
for (let i = 0; i < this.resultArr.length; ++i) {
this.bg.removeChild(this.resultArr[i].bg);
}
}
this.resultArr = [];
var dW = 303;
var dH = 132;
let rows = 4;
var startX = 200;
var startY = 121;
var tempY = startY;
let total = this.data.exercisesArr.length;
console.log(start, limit);
if (start > total) {
start = total;
}
if (limit > total) {
limit = total;
}
for (let i = start; i < limit; ++i) {
let item = this.data.exercisesArr[i];
const result = new ExercisesResult();
this.resultArr.push(result)
result.init(this.images, this.audioObj, item);
result.bg.x = startX;
result.bg.y = startY;
//换行
if ((i + 1) % 4 != 0) {
startY += dH;
}
else {
startX += dW;
startY = tempY;
}
this.bg.addChild(result.bg);
}
//如果超过12个练习题,增加翻页按钮
if (!this.nextPagePic && total > 12) {
this.nextPagePic = new MySprite();
this.nextPagePic.init(this.images.get('btn_fanye'), 1, 1);
this.nextPagePic.x = this.bg.width - 78;
this.nextPagePic.y = this.bg.height - 58;
this.bg.addChild(this.nextPagePic);
}
if (this.nextPagePic) {
this.nextPagePic.visible = true;
}
}
hideSummary() {
if (this.resultArr) {
for (let i = 0; i < this.resultArr.length; ++i) {
this.bg.removeChild(this.resultArr[i].bg);
}
}
this.resultArr = [];
this.nextPagePic.visible = false;
}
setAnswer(leftAnswer: Answer, rightAnswer: Answer, callback = null) {
this.initPage();
let toY = 16;
leftAnswer.bg.x = 15;
leftAnswer.bg.y = toY;
rightAnswer.bg.x = 31;
rightAnswer.bg.y = toY;
if (this.leftAnswer) {
tweenChange(this.leftAnswer.pic, { alpha: 0 }, 0.5, () => {
this.leftBg.removeChild(this.leftAnswer.bg);
leftAnswer.pic.alpha = 0;
this.leftBg.addChild(leftAnswer.bg);
tweenChange(leftAnswer.pic, { alpha: 1 }, 0.5, () => {
this.leftAnswer = leftAnswer;
})
});
tweenChange(this.rightAnswer.pic, { alpha: 0 }, 0.5, () => {
this.rightBg.removeChild(this.rightAnswer.bg);
rightAnswer.pic.alpha = 0;
this.rightBg.addChild(rightAnswer.bg);
tweenChange(rightAnswer.pic, { alpha: 1 }, 0.5, () => {
this.rightAnswer = rightAnswer;
if (callback) {
callback();
}
})
})
}
else {
this.leftBg.addChild(leftAnswer.bg);
this.leftAnswer = leftAnswer;
this.rightBg.addChild(rightAnswer.bg);
this.rightAnswer = rightAnswer;
if (callback) {
callback();
}
}
}
}
export class ExercisesResult {
bg: ShapeRect;
pic: MySprite;
images;
audioObj;
exercises;
init(images, audioObj, exercises) {
this.images = images;
this.audioObj = audioObj;
this.exercises = exercises;
this.bg = new ShapeRect();
this.bg.alpha = 0;
this.initPic();
this.bg.setSize(this.pic.width, this.pic.height);
this.initIndexLabel();
this.showFlag();
}
initPic() {
const pic = new MySprite();
pic.init(this.images.get('btn_ti'), 0, 0);
pic.x = 0;
pic.y = 0;
this.pic = pic;
this.bg.addChild(this.pic);
}
initIndexLabel() {
const indexLabel = new Label();
indexLabel.fontColor = "#f8d591";
indexLabel.fontName = "BRLNSDB";
indexLabel.text = this.exercises.index + 1;
indexLabel.fontSize = 70;
indexLabel.refreshSize();
indexLabel.x = 29;
indexLabel.y = this.bg.height / 2;
this.bg.addChild(indexLabel);
}
showFlag() {
let isRight = this.exercises.isRight;
const icon = new MySprite();
if (isRight == "1") {
icon.init(this.images.get('icon_tiright'));
}
else {
icon.init(this.images.get('icon_tiwrong'));
}
icon.x = this.bg.width / 2;
icon.y = this.bg.height / 2;
this.bg.addChild(icon);
}
}
\ No newline at end of file
......@@ -69,6 +69,7 @@ export class MySprite extends Sprite {
img;
_z = 0;
_showRect;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
......@@ -86,6 +87,10 @@ export class MySprite extends Sprite {
this.anchorY = anchorY;
}
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
......@@ -176,7 +181,12 @@ export class MySprite extends Sprite {
if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY, this.width, this.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
......
......@@ -17,3 +17,8 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'CSMB';
src: url("../../assets/font/Comic Sans MS Bold.TTF") ;
}
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import {
Label,
MySprite, tweenChange,
MySprite, ShapeRect, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
import { res, resAudio } from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { getDefaultExercises } from '../bean/ExercisesBean';
import { Stage } from './Stage';
import { Answer } from './Exercises';
import { playAudio } from './AudioUtil';
import { Celebrate } from './Celebrate';
import { Petal } from './PetalUtil';
......@@ -22,8 +28,8 @@ import TWEEN from '@tweenjs/tween.js';
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据
data;
......@@ -52,6 +58,9 @@ export class PlayComponent implements OnInit, OnDestroy {
audioObj = {};
renderArr;
endRenderArr;
mapScale = 1;
canvasLeft;
......@@ -61,6 +70,20 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true;
stage: Stage;
answered = false;
/**当前练习题索引 */
curIndex = 0;
leftAnswer: Answer;
rightAnswer: Answer;
start = 0;
limit = 12;
@HostListener('window:resize', ['$event'])
onResize(event) {
......@@ -73,7 +96,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
......@@ -425,10 +448,15 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
if (!this.data.exercisesArr) {
this.data.exercisesArr = [];
for (let i = 0; i < 1; ++i) {
const exercises = getDefaultExercises();
this.data.exercisesArr.push(exercises);
}
}
}
......@@ -437,8 +465,18 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
const exercises = this.data.exercisesArr[i];
if (exercises.leftAnswer && exercises.leftAnswer.picUrl) {
this.addUrlToImages(exercises.leftAnswer.picUrl);
}
if (exercises.rightAnswer && exercises.rightAnswer.picUrl) {
this.addUrlToImages(exercises.rightAnswer.picUrl);
}
}
}
......@@ -447,13 +485,33 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.rawAudios.forEach((item, key) => {
// 音效
this.addUrlToAudioObj(key, this.rawAudios.get(key));
})
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
const exercises = this.data.exercisesArr[i];
if (exercises.audioUrl) {
this.addUrlToAudioObj('exercises_' + i, exercises.audioUrl);
}
if (exercises.leftAnswer && exercises.leftAnswer.audioUrl) {
this.addUrlToAudioObj('exercises_L_' + i, exercises.leftAnswer.audioUrl);
}
if (exercises.rightAnswer && exercises.rightAnswer.audioUrl) {
this.addUrlToAudioObj('exercises_R_' + i, exercises.rightAnswer.audioUrl);
}
}
}
......@@ -474,7 +532,17 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = [];
this.endRenderArr = [];
this.canTouch = false;
this.answered = false;
this.curIndex = 0;
this.start = 0;
this.limit = 12;
}
......@@ -485,23 +553,105 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initView() {
this.initBg();
this.initStage();
this.showNewExerices();
}
initBg() {
const bg1 = new MySprite();
bg1.init(this.images.get('bg_di2'));
bg1.x = this.canvasWidth / 2;
bg1.y = this.canvasHeight / 2;
bg1.setScaleXY(Math.max(this.canvasWidth / bg1.width, this.canvasHeight / bg1.height));
this.renderArr.push(bg1);
}
mapDown(event) {
initStage() {
this.stage = new Stage();
this.stage.init(this.images, this.audioObj, this.data);
this.stage.bg.setScaleXY(this.mapScale);
this.stage.bg.x = (this.canvasWidth - this.stage.bg.getBoundingBox().width) / 2;
this.stage.bg.y = this.canvasHeight - this.stage.bg.getBoundingBox().height;
this.renderArr.push(this.stage.bg);
}
mapDown(event) {
console.log(this.canTouch);
if (!this.canTouch) {
return;
}
if(this.checkClickTarget(this.stage.audioAni.bg)){
if(this.stage.audioAni.playing){
this.stage.audioAni.pauseAudio();
}
else{
const audio = this.audioObj['exercises_' + this.curIndex];
this.stage.audioAni.playAudio(audio);
}
return;
}
//答题完成,触发事件
if (this.answered) {
if (this.checkClickTarget(this.stage.lastBtn)) {
this.lastBtnClick();
return;
}
if (this.checkClickTarget(this.stage.nextBtn)) {
this.nextBtnClick();
return;
}
}
if (this.leftAnswer && this.checkClickTarget(this.leftAnswer.bg)) {
this.clickAnswer('L');
return;
}
if (this.rightAnswer && this.checkClickTarget(this.rightAnswer.bg)) {
this.clickAnswer('R');
return;
}
for(let i = 0; i < this.stage.resultArr.length ; ++ i){
let result = this.stage.resultArr[i];
if(this.checkClickTarget(result.bg)){
this.canTouch = false;
this.curIndex = result.exercises.index;
this.stage.hideSummary();
this.showNewExerices();
this.refreshBtnStatue();
return;
}
}
if(this.stage.nextPagePic && this.checkClickTarget(this.stage.nextPagePic)){
this.start = this.limit;
this.limit += this.limit;
this.stage.initSummary(this.start, this.limit);
}
}
mapMove(event) {
......@@ -512,6 +662,194 @@ export class PlayComponent implements OnInit, OnDestroy {
}
clickAnswer(flag){
this.canTouch = false;
const exercisesData = this.data.exercisesArr[this.curIndex];
const loadNext =() => {
const audio = this.audioObj['exercises_' + flag + "_" + this.curIndex];
if(audio){
this.playAudio('exercises_' + flag + "_" + this.curIndex, true, ()=>{
this.showEnd();
})
}
else{
this.showEnd();
}
};
if(this.stage.audioAni.playing){
this.stage.audioAni.pauseAudio();
}
if (exercisesData.right == flag) {
this.stage.showRight(flag, () => {
exercisesData.isRight = '1';
loadNext();
});
}
else {
this.stage.showWrong(flag, () => {
exercisesData.isRight = '0';
loadNext();
})
}
}
showEnd(){
//如果已经答完,则显示总结面板
if(this.curIndex == this.data.exercisesArr.length - 1){
this.leftAnswer = null;
this.rightAnswer = null;
setTimeout(() => {
//第一次答对, 撒花,显示庆祝
if(!this.answered){
const mask = new ShapeRect();
mask.setSize(this.canvasWidth, this.canvasHeight);
mask.alpha = 0.5;
mask.fillColor = "#000000";
mask.x = 0;
mask.y = 0;
this.endRenderArr.push(mask);
let celebrate = new Celebrate();
celebrate.init(this.images, this.audioObj);
celebrate.bg.setScaleXY(this.mapScale);
celebrate.bg.x = (this.canvasWidth - celebrate.bg.getBoundingBox().width) / 2;
celebrate.bg.y = (this.canvasHeight - celebrate.bg.getBoundingBox().height) / 2;
this.endRenderArr.push(celebrate.bg);
celebrate.show(this.mapScale);
let petal = new Petal(this.endRenderArr, this.images, this.ctx);
//显示花瓣
petal.showPetal({ x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight }, this.mapScale, 100, 8);
setTimeout(() => {
petal.stop(() => {
this.endRenderArr = [];
this.answered = true;
this.stage.initSummary(this.start, this.limit);
this.canTouch = true;
});
}, 2000);
}
else{
this.answered = true;
this.stage.initSummary(this.start, this.limit);
this.canTouch = true;
}
}, 1000);
}
else{
this.curIndex++;
setTimeout(() => {
this.showNewExerices();
}, 1000);
}
}
refreshBtnStatue() {
this.stage.lastBtn.alpha = 1;
this.stage.nextBtn.alpha = 1;
if (this.curIndex <= 0) {
this.stage.lastBtn.alpha = 0;
}
if (this.curIndex >= this.data.exercisesArr.length - 1) {
this.stage.nextBtn.alpha = 0;
}
}
lastBtnClick() {
if (this.curIndex <= 0) {
return;
}
this.canTouch = false;
this.curIndex--;
this.refreshBtnStatue();
this.showNewExerices();
}
nextBtnClick() {
if (this.curIndex >= this.data.exercisesArr.length - 1) {
return;
}
this.canTouch = false;
this.curIndex++;
this.refreshBtnStatue();
this.showNewExerices();
}
showNewExerices() {
this.leftAnswer = null;
this.rightAnswer = null;
this.stage.setNumber(this.curIndex + 1);
const exercisesData = this.data.exercisesArr[this.curIndex];
if (!exercisesData) {
this.canTouch = true;
return;
}
exercisesData.index = this.curIndex;
const leftAnswer = new Answer();
leftAnswer.init(exercisesData.leftAnswer, this.images, this.audioObj);
this.leftAnswer = leftAnswer;
const rightAnswer = new Answer();
rightAnswer.init(exercisesData.rightAnswer, this.images, this.audioObj);
this.rightAnswer = rightAnswer;
this.stage.setAnswer(leftAnswer, rightAnswer, () => {
this.canTouch = true;
const audio = this.audioObj['exercises_' + this.curIndex];
this.stage.audioAni.playAudio(audio);
if(this.curIndex != 0){
this.playAudio('switch', true);
}
});
}
update() {
......@@ -528,6 +866,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.renderArr);
this.updateArr(this.endRenderArr);
}
......
const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['bg_di', "assets/play/bg_di.png"],
['bg_di2', "assets/play/bg_di2.png"],
['bg_fu', "assets/play/bg_fu.png"],
['bg_goodiob', "assets/play/bg_goodiob.png"],
['bg_monkeyleft1', "assets/play/bg_monkeyleft1.png"],
['bg_monkeyleft2', "assets/play/bg_monkeyleft2.png"],
['bg_monkeyright1', "assets/play/bg_monkeyright1.png"],
['bg_monkeyright2', "assets/play/bg_monkeyright2.png"],
['bg_number', "assets/play/bg_number.png"],
['bg_right', "assets/play/bg_right.png"],
['bg_star', "assets/play/bg_star.png"],
['bg_wrong', "assets/play/bg_wrong.png"],
['bg_xuanxiang1', "assets/play/bg_xuanxiang1.png"],
['bg_xuanxiang2', "assets/play/bg_xuanxiang2.png"],
['btn_fanye', "assets/play/btn_fanye.png"],
['btn_laba1', "assets/play/btn_laba1.png"],
['btn_laba2', "assets/play/btn_laba2.png"],
['btn_laba3', "assets/play/btn_laba3.png"],
['btn_laba4', "assets/play/btn_laba4.png"],
['btn_last', "assets/play/btn_last.png"],
['btn_next', "assets/play/btn_next.png"],
['btn_ti', "assets/play/btn_ti.png"],
['icon_star1', "assets/play/icon_star1.png"],
['icon_star2', "assets/play/icon_star2.png"],
['icon_tiright', "assets/play/icon_tiright.png"],
['icon_tiwrong', "assets/play/icon_tiwrong.png"],
['icon_right', "assets/play/icon_right.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
['petal_4', "assets/play/petal_4.png"],
['petal_5', "assets/play/petal_5.png"],
['petal_6', "assets/play/petal_6.png"],
['petal_7', "assets/play/petal_7.png"],
['petal_8', "assets/play/petal_8.png"],
];
......@@ -12,7 +50,11 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['arrow', "assets/play/music/arrow.mp3"],
['celebrate', "assets/play/music/celebrate.mp3"],
['right', "assets/play/music/right.mp3"],
['switch', "assets/play/music/switch.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
];
export {res, resAudio};
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