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

完善代码

parent 1228ad51
......@@ -17,3 +17,8 @@
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 {
//当前课程
curPractice;
//当前练习题正确答案个数
curRightAnswerNum = 0;
nextPracticeIndex = 0;
//气球间隔宽度
......@@ -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 {
this.renderArr = [];
this.restartArr = [];
this.initRestartData();
}
......@@ -663,8 +732,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.endPageArr = [];
this.restartArr = [];
this.nextPracticeIndex = 0;
this.curPractice = {};
......@@ -680,10 +747,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curPractice = {};
this.ballon_temp_arr = [];
this.ballon_mapx_arr = [];
this.temp_max_ballon = this.max_ballon;
this.initPracticeRender();
......@@ -760,7 +823,7 @@ export class PlayComponent implements OnInit, OnDestroy {
restart_pic.init(this.images.get('restart'));
restart_pic.alpha = 0;
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);
this.restartArr.push(restart_pic);
......@@ -814,21 +877,22 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化练习题
*/
initPracticePic(){
if(!this.data.practices){
return;
}
//结束整个练习则不再初始化
if(this.nextPracticeIndex == this.data.practices.length){
return;
}
this.canTouch = false;
//初始化练习题渲染内容
this.initPracticeRender();
//如果下一个索引与练习题相等,则为最后一道题,则播放结束画面
if(this.nextPracticeIndex == this.data.practices.length){
this.playEnd(true);
return;
}
//获取需要渲染的练习题
this.curPractice = this.data.practices[this.nextPracticeIndex];
......@@ -843,22 +907,43 @@ export class PlayComponent implements OnInit, OnDestroy {
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});
}
//启动气球生产者
this.ballonProducer();
console.log('curanswers', this.curanswers);
//改变下一道练习题索引:当前练习题增加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(() => {
this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1));
}, 100);
//启动气球生产者
this.ballonProducer(true);
//改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1;
//渲染完成
this.canTouch = true;
......@@ -894,34 +979,20 @@ export class PlayComponent implements OnInit, OnDestroy {
/**
*
*/
ballonProducer(){
ballonProducer(firset:Boolean, mapX = null){
//练习结束
if(this.practiceEnd){
return;
}
//如果气球全部退出屏幕,则重新显示
if(this.checkAllOut()){
//重置气球临时数组
this.ballon_temp_arr = [];
//设置当前气球显示索引,最大为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);
//第一次填满
if(firset){
//取出气球显示
for(let i = 0; i < this.temp_max_ballon; ++ i){
let answer = this.getShowAnswer(this.ballon_temp_arr);
let answer = this.getShowAnswer();
if(answer){
......@@ -935,10 +1006,22 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
}
else{
let answer = this.getShowAnswer();
if(answer){
//设置坐标
answer.pic.x = mapX;
this.ballon_temp_arr.push(answer);
//显示气球
this.ballonRose(answer);
}
}
setTimeout(() => {
this.ballonProducer();
}, 100);
}
/**
......@@ -963,24 +1046,26 @@ export class PlayComponent implements OnInit, OnDestroy {
return check;
}
getShowAnswer(showArr){
getShowAnswer(){
let answer;
while(true){
let answer = this.getRandomItemFromArr(this.curanswers);
answer = this.getRandomItemFromArr(this.curanswers);
if(!answer){
return;
break;
}
let index = showArr.indexOf(answer);
let index = this.ballon_temp_arr.indexOf(answer);
//没有重复的,则返回
if(index == -1){
return answer;
break;
}
}
return answer;
}
getRandomItemFromArr(arr){
......@@ -1011,21 +1096,24 @@ export class PlayComponent implements OnInit, OnDestroy {
answer.show = true;
setTimeout(() => {
let out = this.canvasHeight - answer.suspendY;
let speed = this.getRandomSpeed();
tweenChange(answer.pic, {y: out}, speed, () => {
let tween = tweenChange(answer.pic, {y: out}, speed, () => {
if(!answer.hited){
this.ballonSuspension(answer);
}
},null, (a,b)=>{
this.shakeBallon(tween, answer);
});
//从小变到大
tweenChange(answer.pic, {scaleX:this.mapScale, scaleY:this.mapScale}, 4, ()=>{
answer.canHit = true;
});
}, 20);
}
......@@ -1035,25 +1123,80 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
ballonSuspension(answer){
answer.suspension = true;
//悬浮时晃动气球
shake(answer.pic, this.suspension_time/1000, null, 0.3);
this.shake(answer.pic, this.suspension_time/1000, ()=>{
//悬停
setTimeout(() => {
answer.suspension = false;
let out = - answer.pic.height * this.mapScale;
let speed = this.getRandomSpeed();
tweenChange(answer.pic, {y: out}, speed, ()=>{
let tween = tweenChange(answer.pic, {y: out}, speed, ()=>{
//设置未显示
answer.show = false;
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);
}
});
}
/**
* 晃动气球
* @param tween
* @param answer
*/
shakeBallon(tween, answer){
}, this.suspension_time);
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 {
//清空练习题内容
this.curPractice = {};
this.curRightAnswerNum = 0;
//清空气球x坐标
this.ballon_mapx_arr = [];
......@@ -1108,7 +1253,7 @@ export class PlayComponent implements OnInit, OnDestroy {
answerPic.setScaleXY(0.3);
answerPic.alpha = 0;
answerPic.y = this.canvasHeight + answerPic.height * this.mapScale;
console.log('answer.pic_url', answer);
//console.log('answer.pic_url', answer);
//图片存在,则渲染图片
if(answer.pic_url){
......@@ -1132,25 +1277,32 @@ export class PlayComponent implements OnInit, OnDestroy {
answer_pic.y = -35*this.mapScale;
answerPic.addChild(answer_pic);
console.log('answer.pic_url', answer_pic);
//console.log('answer.pic_url', answer_pic);
}
else{
let answer_val = new Label();
answer_val.text = answer.val;
answer_val.textAlign='middle';
answer_val.fontSize = 50;
answer_val.fontName = "BRLNSDB";
answer_val.fontName = "ARIALBD";
answer_val.fontColor = "#FFFFFF";
answer_val.refreshSize();
this.setFontSize(answerPic.width, answer_val);
let changed = this.setFontSize(answerPic.width, answer_val);
answer_val.refreshSize();
answer_val.x = -answer_val.width/2;
answer_val.y = -35*this.mapScale;
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;
answerPic.addChild(answer_val);
}
......@@ -1167,6 +1319,8 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
let changed = false;
let w = answer.width;
let h = answer.height;
......@@ -1174,7 +1328,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let r = Math.sqrt( w * w + h * h)/2;
//如果宽度超过,则缩小字体
if(r > (parWidth - 30)/2){
if(r > (parWidth - 40)/2){
let fontSize = answer.fontSize;
......@@ -1188,8 +1342,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.setFontSize(parWidth, answer);
changed = true;
}
return changed;
}
/**
......@@ -1363,11 +1520,8 @@ export class PlayComponent implements OnInit, OnDestroy {
//武器按下弹起,则发射子弹
if (this.checkClickTarget(this.weapon_pic)) {
//如果未加载完成,则不发射子弹
if(!this.checkCanShoot()){
return;
}
this.weaponTouch = false;
//显示武器发射状态
this.weapon_fire_pic.x = this.weapon_pic.x;
this.weapon_fire_pic.y = this.weapon_pic.y;
......@@ -1388,13 +1542,16 @@ export class PlayComponent implements OnInit, OnDestroy {
hit:false
};
setTimeout(() => {
let out = -bullet_pic.height;
tweenChange(bullet.pic, {y: out}, 1, ()=>{
removeItemFromArr(this.bulletRenderArr, bullet);
});
},null,()=>{
this.checkHit(bullet);
}, 100);
});
//显示武器准备状态
......@@ -1447,10 +1604,20 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
//已经击中,不检查
if(item.hit){
return;
}
let x = item.pic.x;
let y = item.pic.y;
//坐标出去后不检查
if(y < 0){
return;
}
for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
let answer = this.ballon_temp_arr[i];
......@@ -1480,19 +1647,29 @@ export class PlayComponent implements OnInit, OnDestroy {
answer.pic.scaleX = 0;
answer.pic.scaleY = 0;
answer.pic.visible = false;
this.showParticle(answer.pic);
this.playAudio('right');
this.curRightAnswerNum = this.curRightAnswerNum - 1;
//练习题结束,播放庆祝界面
if(this.checkEndPractice()){
if(this.curRightAnswerNum < 1){
this.practiceEnd = true;
//重置音频
const audio = this.audioObj['practice_' + (this.nextPracticeIndex - 1)];
audio.currentTime = 0;
this.pausePracticeAudio('practice_' + (this.nextPracticeIndex - 1));
//如果当前索引与练习题相等,则为最后一道题,则播放结束画面
if(this.nextPracticeIndex == this.data.practices.length){
this.playEnd(true);
//显示重新开始按钮
......@@ -1515,7 +1692,6 @@ export class PlayComponent implements OnInit, OnDestroy {
});
}, 1000);
return;
}
else{
......@@ -1524,39 +1700,31 @@ export class PlayComponent implements OnInit, OnDestroy {
}
else{
setTimeout(() => {
//removeItemFromArr(this.curAnswerArr, answer.pic);
removeItemFromArr(this.curAnswerArr, answer.pic);
console.log('answer hit index', this.curanswers.indexOf(answer));
//将命中的气球从当前答案中移出
removeItemFromArr(this.curanswers, answer);
}, 10);
}
console.log('answer hit index', this.ballon_temp_arr.indexOf(answer));
removeItemFromArr(this.ballon_temp_arr, answer);
this.ballonProducer(false, answer.pic.x);
}
}
else{
this.playAudio('wrong');
shake(answer.pic, 1);
//console.log('answer.suspension', answer.suspension);
answer.canShake = true;
}
break;
}
}
//坐标出去后不检查
if(y < 0){
return;
}
if(!item.hit){
setTimeout(() => {
this.checkHit(item);
}, 10);
}
}
......@@ -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() {
// ----------------------------------------------------------
......
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