Commit 8471fd16 authored by Chen Jiping's avatar Chen Jiping

完善代码

parent 1228ad51
...@@ -17,3 +17,8 @@ ...@@ -17,3 +17,8 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'ARIALBD';
src: url("../../assets/font/ARIALBD.TTF") ;
}
\ No newline at end of file
...@@ -113,6 +113,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -113,6 +113,9 @@ export class PlayComponent implements OnInit, OnDestroy {
//当前课程 //当前课程
curPractice; curPractice;
//当前练习题正确答案个数
curRightAnswerNum = 0;
nextPracticeIndex = 0; nextPracticeIndex = 0;
//气球间隔宽度 //气球间隔宽度
...@@ -570,7 +573,71 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -570,7 +573,71 @@ export class PlayComponent implements OnInit, OnDestroy {
// ======================================================编写区域========================================================================== // ======================================================编写区域==========================================================================
shake(item, time = 0.5, callback = null, rate = 1, update = null) {
if (item.shakeTween) {
return;
}
item.shakeTween = true;
const offX = 15 * item.scaleX * rate;
const offY = 15 * item.scaleX * rate;
const baseX = item.x;
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
const move4 = () => {
this.moveItem(item, baseX, baseY, time / 4, () => {
item.shakeTween = false;
if (callback) {
callback();
}
}, easing, update);
};
const move3 = () => {
this.moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
move4();
}, easing, update);
};
const move2 = () => {
this.moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
move3();
}, easing, update);
};
const move1 = () => {
this.moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
move2();
}, easing,update);
};
move1();
}
moveItem(item, x, y, time = 0.8, callBack = null, easing = null, update = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if(update){
tween.onUpdate( (a, b) => {
update(a, b, tween);
});
}
if (easing) {
tween.easing(easing);
}
tween.start();
return tween;
}
/** /**
...@@ -655,6 +722,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -655,6 +722,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = []; this.renderArr = [];
this.restartArr = [];
this.initRestartData(); this.initRestartData();
} }
...@@ -663,8 +732,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -663,8 +732,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.endPageArr = []; this.endPageArr = [];
this.restartArr = [];
this.nextPracticeIndex = 0; this.nextPracticeIndex = 0;
this.curPractice = {}; this.curPractice = {};
...@@ -680,10 +747,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -680,10 +747,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curPractice = {}; this.curPractice = {};
this.ballon_temp_arr = [];
this.ballon_mapx_arr = [];
this.temp_max_ballon = this.max_ballon; this.temp_max_ballon = this.max_ballon;
this.initPracticeRender(); this.initPracticeRender();
...@@ -760,7 +823,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -760,7 +823,7 @@ export class PlayComponent implements OnInit, OnDestroy {
restart_pic.init(this.images.get('restart')); restart_pic.init(this.images.get('restart'));
restart_pic.alpha = 0; restart_pic.alpha = 0;
restart_pic.x = this.canvasWidth / 2; restart_pic.x = this.canvasWidth / 2;
restart_pic.y = this.canvasHeight + restart_pic.height;; restart_pic.y = this.canvasHeight + restart_pic.height;
restart_pic.setScaleXY(this.mapScale); restart_pic.setScaleXY(this.mapScale);
this.restartArr.push(restart_pic); this.restartArr.push(restart_pic);
...@@ -814,21 +877,22 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -814,21 +877,22 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化练习题 * 初始化练习题
*/ */
initPracticePic(){ initPracticePic(){
if(!this.data.practices){ if(!this.data.practices){
return; return;
} }
//结束整个练习则不再初始化
if(this.nextPracticeIndex == this.data.practices.length){
return;
}
this.canTouch = false; this.canTouch = false;
//初始化练习题渲染内容 //初始化练习题渲染内容
this.initPracticeRender(); this.initPracticeRender();
//如果下一个索引与练习题相等,则为最后一道题,则播放结束画面
if(this.nextPracticeIndex == this.data.practices.length){
this.playEnd(true);
return;
}
//获取需要渲染的练习题 //获取需要渲染的练习题
this.curPractice = this.data.practices[this.nextPracticeIndex]; this.curPractice = this.data.practices[this.nextPracticeIndex];
...@@ -843,22 +907,43 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -843,22 +907,43 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curAnswerArr.push(answerPic); this.curAnswerArr.push(answerPic);
this.curanswers.push({correct:answer.correct,pic:answerPic, suspendY:suspendY, show:false}); //计算正确答案个数
if(answer.correct == 1){
this.curRightAnswerNum += 1;
}
this.curanswers.push({correct:answer.correct,pic:answerPic, suspendY:suspendY, show:false, practiceIndex: this.nextPracticeIndex});
} }
//启动气球生产者 console.log('curanswers', this.curanswers);
this.ballonProducer();
//改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1; //设置当前气球显示索引,最大为max_ballon个
if(this.curanswers.length < this.max_ballon){
this.temp_max_ballon = this.curanswers.length;
}
else{
this.temp_max_ballon = this.max_ballon;
}
let balloon_width = Math.floor(162 * this.mapScale) ;
this.ballon_mapx_arr = this.getMapX(balloon_width, this.interval_width, this.temp_max_ballon);
console.log('ballon_mapx_arr', this.ballon_mapx_arr);
//播放音频 //播放音频
setTimeout(() => { setTimeout(() => {
this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1)); this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1));
}, 100); }, 100);
//启动气球生产者
this.ballonProducer(true);
//改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1;
//渲染完成 //渲染完成
this.canTouch = true; this.canTouch = true;
...@@ -894,39 +979,40 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -894,39 +979,40 @@ export class PlayComponent implements OnInit, OnDestroy {
/** /**
* *
*/ */
ballonProducer(){ ballonProducer(firset:Boolean, mapX = null){
//练习结束
if(this.practiceEnd){
return;
}
//如果气球全部退出屏幕,则重新显示 //练习结束
if(this.checkAllOut()){ if(this.practiceEnd){
return;
}
//重置气球临时数组 //第一次填满
this.ballon_temp_arr = []; if(firset){
//取出气球显示
for(let i = 0; i < this.temp_max_ballon; ++ i){
//设置当前气球显示索引,最大为max_ballon个 let answer = this.getShowAnswer();
if(this.curanswers.length < this.max_ballon){
this.temp_max_ballon = this.curanswers.length;
}
else{
this.temp_max_ballon = this.max_ballon;
}
let balloon_width = Math.floor(162 * this.mapScale) ; if(answer){
this.ballon_mapx_arr = this.getMapX(balloon_width, this.interval_width, this.temp_max_ballon); //取出坐标
answer.pic.x = this.ballon_mapx_arr[i];
//取出气球显示 this.ballon_temp_arr.push(answer);
for(let i = 0; i < this.temp_max_ballon; ++ i){
let answer = this.getShowAnswer(this.ballon_temp_arr); //显示气球
this.ballonRose(answer);
}
}
}
else{
let answer = this.getShowAnswer();
if(answer){ if(answer){
//取出坐标 //设置坐标
answer.pic.x = this.ballon_mapx_arr[i]; answer.pic.x = mapX;
this.ballon_temp_arr.push(answer); this.ballon_temp_arr.push(answer);
...@@ -934,11 +1020,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -934,11 +1020,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.ballonRose(answer); this.ballonRose(answer);
} }
} }
}
setTimeout(() => {
this.ballonProducer();
}, 100);
} }
/** /**
...@@ -963,24 +1046,26 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -963,24 +1046,26 @@ export class PlayComponent implements OnInit, OnDestroy {
return check; return check;
} }
getShowAnswer(showArr){ getShowAnswer(){
let answer;
while(true){ while(true){
let answer = this.getRandomItemFromArr(this.curanswers); answer = this.getRandomItemFromArr(this.curanswers);
if(!answer){ if(!answer){
return; break;
} }
let index = showArr.indexOf(answer); let index = this.ballon_temp_arr.indexOf(answer);
//没有重复的,则返回
if(index == -1){ if(index == -1){
return answer; break;
} }
} }
return answer;
} }
getRandomItemFromArr(arr){ getRandomItemFromArr(arr){
...@@ -1011,21 +1096,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1011,21 +1096,24 @@ export class PlayComponent implements OnInit, OnDestroy {
answer.show = true; answer.show = true;
setTimeout(() => { let out = this.canvasHeight - answer.suspendY;
let out = this.canvasHeight - answer.suspendY; let speed = this.getRandomSpeed();
let speed = this.getRandomSpeed(); let tween = tweenChange(answer.pic, {y: out}, speed, () => {
if(!answer.hited){
tweenChange(answer.pic, {y: out}, speed, () => {
this.ballonSuspension(answer); this.ballonSuspension(answer);
}); }
},null, (a,b)=>{
this.shakeBallon(tween, answer);
});
//从小变到大 //从小变到大
tweenChange(answer.pic, {scaleX:this.mapScale, scaleY:this.mapScale}, 4, ()=>{ tweenChange(answer.pic, {scaleX:this.mapScale, scaleY:this.mapScale}, 4, ()=>{
answer.canHit = true; answer.canHit = true;
}); });
}, 20);
} }
...@@ -1035,25 +1123,80 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1035,25 +1123,80 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
ballonSuspension(answer){ ballonSuspension(answer){
answer.suspension = true;
//悬浮时晃动气球 //悬浮时晃动气球
shake(answer.pic, this.suspension_time/1000, null, 0.3); this.shake(answer.pic, this.suspension_time/1000, ()=>{
//悬停 answer.suspension = false;
setTimeout(() => {
let out = - answer.pic.height * this.mapScale; let out = - answer.pic.height * this.mapScale;
let speed = this.getRandomSpeed(); let speed = this.getRandomSpeed();
tweenChange(answer.pic, {y: out}, speed, ()=>{ let tween = tweenChange(answer.pic, {y: out}, speed, ()=>{
//设置未显示 //设置未显示
answer.show = false; answer.show = false;
answer.pic.alpha = 0; answer.pic.alpha = 0;
//console.log('can rose:', !this.practiceEnd && answer.practiceIndex == (this.nextPracticeIndex -1));
//练习未结束
if(!this.practiceEnd && answer.practiceIndex == (this.nextPracticeIndex -1)){
if(!answer.hited){
//console.log('play next ballon', answer.pic.x);
//移除气球
removeItemFromArr(this.ballon_temp_arr, answer);
//产生下一个气球
this.ballonProducer(false, answer.pic.x);
}
}
},null,()=>{
this.shakeBallon(tween, answer);
}); });
}, 1, (a, b, tween)=>{
if(answer.canShake){
answer.pic.shakeTween = false;
tween.pause();
shake(answer.pic, 1.3, ()=>{
answer.pic.shakeTween = true;
answer.canShake = false;
tween.resume();
}, .5);
}
});
}
}, this.suspension_time); /**
* 晃动气球
* @param tween
* @param answer
*/
shakeBallon(tween, answer){
if(answer.canShake){
answer.canShake = false;
tween.pause();
shake(answer.pic, 1.3, ()=>{
tween.resume();
}, .5);
}
} }
...@@ -1079,6 +1222,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1079,6 +1222,8 @@ export class PlayComponent implements OnInit, OnDestroy {
//清空练习题内容 //清空练习题内容
this.curPractice = {}; this.curPractice = {};
this.curRightAnswerNum = 0;
//清空气球x坐标 //清空气球x坐标
this.ballon_mapx_arr = []; this.ballon_mapx_arr = [];
...@@ -1108,7 +1253,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1108,7 +1253,7 @@ export class PlayComponent implements OnInit, OnDestroy {
answerPic.setScaleXY(0.3); answerPic.setScaleXY(0.3);
answerPic.alpha = 0; answerPic.alpha = 0;
answerPic.y = this.canvasHeight + answerPic.height * this.mapScale; answerPic.y = this.canvasHeight + answerPic.height * this.mapScale;
console.log('answer.pic_url', answer); //console.log('answer.pic_url', answer);
//图片存在,则渲染图片 //图片存在,则渲染图片
if(answer.pic_url){ if(answer.pic_url){
...@@ -1132,26 +1277,33 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1132,26 +1277,33 @@ export class PlayComponent implements OnInit, OnDestroy {
answer_pic.y = -35*this.mapScale; answer_pic.y = -35*this.mapScale;
answerPic.addChild(answer_pic); answerPic.addChild(answer_pic);
console.log('answer.pic_url', answer_pic); //console.log('answer.pic_url', answer_pic);
} }
else{ else{
let answer_val = new Label(); let answer_val = new Label();
answer_val.text = answer.val; answer_val.text = answer.val;
answer_val.textAlign='middle'; answer_val.textAlign='middle';
answer_val.fontSize = 50; answer_val.fontSize = 50;
answer_val.fontName = "BRLNSDB"; answer_val.fontName = "ARIALBD";
answer_val.fontColor = "#FFFFFF"; answer_val.fontColor = "#FFFFFF";
answer_val.refreshSize(); answer_val.refreshSize();
this.setFontSize(answerPic.width, answer_val); let changed = this.setFontSize(answerPic.width, answer_val);
answer_val.refreshSize(); answer_val.refreshSize();
answer_val.x = -answer_val.width/2; if(changed){
answer_val.x = -Math.floor((answer_val.width + 20)* this.mapScale)/2;
}
else{
answer_val.x = -Math.floor(answer_val.width* this.mapScale)/2;
}
console.log('answer_val', answer_val.x);
answer_val.y = -35*this.mapScale; answer_val.y = -35*this.mapScale;
answerPic.addChild(answer_val); answerPic.addChild(answer_val);
} }
...@@ -1167,6 +1319,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1167,6 +1319,8 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
let changed = false;
let w = answer.width; let w = answer.width;
let h = answer.height; let h = answer.height;
...@@ -1174,7 +1328,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1174,7 +1328,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let r = Math.sqrt( w * w + h * h)/2; let r = Math.sqrt( w * w + h * h)/2;
//如果宽度超过,则缩小字体 //如果宽度超过,则缩小字体
if(r > (parWidth - 30)/2){ if(r > (parWidth - 40)/2){
let fontSize = answer.fontSize; let fontSize = answer.fontSize;
...@@ -1188,8 +1342,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1188,8 +1342,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.setFontSize(parWidth, answer); this.setFontSize(parWidth, answer);
changed = true;
} }
return changed;
} }
/** /**
...@@ -1363,11 +1520,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1363,11 +1520,8 @@ export class PlayComponent implements OnInit, OnDestroy {
//武器按下弹起,则发射子弹 //武器按下弹起,则发射子弹
if (this.checkClickTarget(this.weapon_pic)) { if (this.checkClickTarget(this.weapon_pic)) {
//如果未加载完成,则不发射子弹
if(!this.checkCanShoot()){
return;
}
this.weaponTouch = false; this.weaponTouch = false;
//显示武器发射状态 //显示武器发射状态
this.weapon_fire_pic.x = this.weapon_pic.x; this.weapon_fire_pic.x = this.weapon_pic.x;
this.weapon_fire_pic.y = this.weapon_pic.y; this.weapon_fire_pic.y = this.weapon_pic.y;
...@@ -1388,13 +1542,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1388,13 +1542,16 @@ export class PlayComponent implements OnInit, OnDestroy {
hit:false hit:false
}; };
setTimeout(() => { let out = -bullet_pic.height;
let out = -bullet_pic.height; tweenChange(bullet.pic, {y: out}, 1, ()=>{
tweenChange(bullet.pic, {y: out}, 1, ()=>{
removeItemFromArr(this.bulletRenderArr, bullet); removeItemFromArr(this.bulletRenderArr, bullet);
});
},null,()=>{
this.checkHit(bullet); this.checkHit(bullet);
}, 100);
});
//显示武器准备状态 //显示武器准备状态
...@@ -1447,10 +1604,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1447,10 +1604,20 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
//已经击中,不检查
if(item.hit){
return;
}
let x = item.pic.x; let x = item.pic.x;
let y = item.pic.y; let y = item.pic.y;
//坐标出去后不检查
if(y < 0){
return;
}
for(let i = 0; i < this.ballon_temp_arr.length; ++ i){ for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
let answer = this.ballon_temp_arr[i]; let answer = this.ballon_temp_arr[i];
...@@ -1479,20 +1646,30 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1479,20 +1646,30 @@ export class PlayComponent implements OnInit, OnDestroy {
answer.pic.scaleX = 0; answer.pic.scaleX = 0;
answer.pic.scaleY = 0; answer.pic.scaleY = 0;
answer.pic.visible = false;
this.showParticle(answer.pic); this.showParticle(answer.pic);
this.playAudio('right'); this.playAudio('right');
this.curRightAnswerNum = this.curRightAnswerNum - 1;
//练习题结束,播放庆祝界面 //练习题结束,播放庆祝界面
if(this.checkEndPractice()){ if(this.curRightAnswerNum < 1){
this.practiceEnd = true; this.practiceEnd = true;
//重置音频
const audio = this.audioObj['practice_' + (this.nextPracticeIndex - 1)];
audio.currentTime = 0;
this.pausePracticeAudio('practice_' + (this.nextPracticeIndex - 1)); this.pausePracticeAudio('practice_' + (this.nextPracticeIndex - 1));
//如果当前索引与练习题相等,则为最后一道题,则播放结束画面 //如果当前索引与练习题相等,则为最后一道题,则播放结束画面
if(this.nextPracticeIndex == this.data.practices.length){ if(this.nextPracticeIndex == this.data.practices.length){
this.playEnd(true); this.playEnd(true);
//显示重新开始按钮 //显示重新开始按钮
...@@ -1515,7 +1692,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1515,7 +1692,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
}, 1000); }, 1000);
return;
} }
else{ else{
...@@ -1524,39 +1700,31 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1524,39 +1700,31 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
else{ else{
setTimeout(() => { removeItemFromArr(this.curAnswerArr, answer.pic);
//removeItemFromArr(this.curAnswerArr, answer.pic); console.log('answer hit index', this.curanswers.indexOf(answer));
console.log('answer hit index', this.curanswers.indexOf(answer)); //将命中的气球从当前答案中移出
removeItemFromArr(this.curanswers, answer);
//将命中的气球从当前答案中移出 console.log('answer hit index', this.ballon_temp_arr.indexOf(answer));
removeItemFromArr(this.curanswers, answer); removeItemFromArr(this.ballon_temp_arr, answer);
}, 10); this.ballonProducer(false, answer.pic.x);
} }
} }
else{ else{
this.playAudio('wrong'); this.playAudio('wrong');
shake(answer.pic, 1); //console.log('answer.suspension', answer.suspension);
answer.canShake = true;
} }
break; break;
} }
} }
//坐标出去后不检查
if(y < 0){
return;
}
if(!item.hit){
setTimeout(() => {
this.checkHit(item);
}, 10);
}
} }
...@@ -1618,27 +1786,6 @@ startGame(){ ...@@ -1618,27 +1786,6 @@ startGame(){
} }
/**
* 检查当前练习题是否已经结束
*/
checkEndPractice(){
let end = true;
//循环判断
for(let i = 0; i < this.curanswers.length; ++ i){
let answer = this.curanswers[i];
if(answer.correct == "1" && !answer.hited){
end = false;
break;
}
}
return end;
}
update() { update() {
// ---------------------------------------------------------- // ----------------------------------------------------------
......
src/assets/play/play.png

21.5 KB | W: | H:

src/assets/play/play.png

21.5 KB | W: | H:

src/assets/play/play.png
src/assets/play/play.png
src/assets/play/play.png
src/assets/play/play.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