Commit a7b02fb0 authored by Chen Jiping's avatar Chen Jiping

完善

parent d1e900d8
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
moveItem, moveItem,
rotateItem, rotateItem,
showPopParticle, showPopParticle,
shake,
ShapeRect ShapeRect
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -83,7 +84,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -83,7 +84,7 @@ export class PlayComponent implements OnInit, OnDestroy {
weapon_fire_pic weapon_fire_pic
//当前练习题答案 //当前练习题答案:[{pic:spreat,correct:'',canHit:true|false,hited:true|false,show:true|false}]
curanswers = [] curanswers = []
canTouch = true; canTouch = true;
...@@ -124,8 +125,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -124,8 +125,6 @@ export class PlayComponent implements OnInit, OnDestroy {
//气球显示x坐标数组[{mapx:numuber,free:false}] //气球显示x坐标数组[{mapx:numuber,free:false}]
ballon_mapx_arr ballon_mapx_arr
//下一个显示气球答案索引
nextAnswerIndex = 0;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -640,7 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -640,7 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy {
bg_pic.init(this.images.get('bg')); bg_pic.init(this.images.get('bg'));
bg_pic.x = this.canvasWidth / 2; bg_pic.x = this.canvasWidth / 2;
bg_pic.y = this.canvasHeight / 2; bg_pic.y = this.canvasHeight / 2;
bg_pic.setScaleXY(maxW / bg_pic.width); bg_pic.setScaleXY(maxW/bg_pic.width);
this.renderArr.push(bg_pic); this.renderArr.push(bg_pic);
this.bg_pic = bg_pic; this.bg_pic = bg_pic;
...@@ -656,7 +655,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -656,7 +655,7 @@ export class PlayComponent implements OnInit, OnDestroy {
start_pic.init(this.images.get('start')); start_pic.init(this.images.get('start'));
start_pic.x = this.canvasWidth / 2; start_pic.x = this.canvasWidth / 2;
start_pic.y = this.canvasHeight - start_pic.height / 2;; start_pic.y = this.canvasHeight - start_pic.height / 2;;
start_pic.setScaleXY(maxW / bg_pic.width); start_pic.setScaleXY(this.mapScale);
this.renderArr.push(start_pic); this.renderArr.push(start_pic);
this.startPic = start_pic; this.startPic = start_pic;
...@@ -677,6 +676,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -677,6 +676,7 @@ export class PlayComponent implements OnInit, OnDestroy {
weapon.x = this.canvasWidth / 2; weapon.x = this.canvasWidth / 2;
weapon.y = this.canvasHeight - weapon.height / 2; weapon.y = this.canvasHeight - weapon.height / 2;
weapon.alpha = 0; weapon.alpha = 0;
weapon.setScaleXY(this.mapScale);
this.weapon_pic = weapon; this.weapon_pic = weapon;
this.renderArr.push(weapon); this.renderArr.push(weapon);
...@@ -684,6 +684,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -684,6 +684,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const weapon_fire = new MySprite(); const weapon_fire = new MySprite();
weapon_fire.init(this.images.get('weapon_fire')); weapon_fire.init(this.images.get('weapon_fire'));
weapon_fire.alpha = 0; weapon_fire.alpha = 0;
weapon_fire.setScaleXY(this.mapScale);
this.weapon_fire_pic = weapon_fire; this.weapon_fire_pic = weapon_fire;
...@@ -699,7 +700,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -699,7 +700,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const bullet = new MySprite(); const bullet = new MySprite();
bullet.init(this.images.get('bullet')); bullet.init(this.images.get('bullet'));
bullet.y = this.canvasHeight - this.weapon_pic.height - bullet.height/2; bullet.y = this.canvasHeight - this.weapon_pic.height - bullet.height/2;
bullet.setScaleXY(this.mapScale);
return bullet; return bullet;
} }
...@@ -722,8 +723,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -722,8 +723,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
//获取需要渲染的练习题 //获取需要渲染的练习题
this.curPractice = this.data.practices[this.nextPracticeIndex]; this.curPractice = this.data.practices[this.nextPracticeIndex];
...@@ -743,46 +742,41 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -743,46 +742,41 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
//启动气球生产者
this.ballonProducer();
//设置当前气球显示索引,最大为max_ballon个 //改变下一道练习题索引:当前练习题增加1
if(this.curanswers.length < this.max_ballon){ this.nextPracticeIndex = this.nextPracticeIndex + 1;
this.temp_max_ballon = this.curanswers.length;
} //渲染完成
else{ this.canTouch = true;
this.temp_max_ballon = this.max_ballon;
} }
console.log('this.curanswers', this.curanswers.length); /**
* 获取显示坐标
* @param spreat_width
* @param interval_width
* @param row
*/
getMapX(spreat_width, interval_width, row){
let balloon_width = Math.floor(162 * this.mapScale) ; let mapx_arr = [];
let row_width = this.temp_max_ballon * balloon_width + ( this.temp_max_ballon - 1) * this.interval_width; let row_width = row * spreat_width + ( row - 1) * interval_width;
//起始X坐标 //起始X坐标
let startX = (this.canvasWidth - row_width)/2 + balloon_width/2; let startX = (this.canvasWidth - row_width)/2 + spreat_width/2;
//初始化气球x坐标 //初始化气球x坐标
for(let i = 0; i < this.temp_max_ballon; ++ i){ for(let i = 0; i < this.temp_max_ballon; ++ i){
this.ballon_mapx_arr.push({mapx:startX,free:true}); mapx_arr.push(startX);
startX += balloon_width + this.interval_width; startX += spreat_width + interval_width;
} }
console.log('ballon_mapx_arr', this.ballon_mapx_arr); return mapx_arr;
//显示气球
this.showBallon();
//启动气球生产者
this.ballonProducer();
//改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1;
//渲染完成
this.canTouch = true;
} }
/** /**
...@@ -793,27 +787,41 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -793,27 +787,41 @@ export class PlayComponent implements OnInit, OnDestroy {
if(this.practiceEnd){ if(this.practiceEnd){
return; return;
} }
//如果到最后一个,则重新开始
if(this.nextAnswerIndex == this.curanswers.length){
console.log('nextAnswerIndex reset'); //如果气球全部退出屏幕,则重新显示
this.nextAnswerIndex = 0; 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;
} }
if(this.ballon_temp_arr.length < this.temp_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);
const answer = this.curanswers[this.nextAnswerIndex];
//下一个气球索引加1 //取出气球显示
this.nextAnswerIndex = this.nextAnswerIndex + 1; for(let i = 0; i < this.temp_max_ballon; ++ i){
let answer = this.getShowAnswer(this.ballon_temp_arr);
//如果气球未被击中,且未显示,则显示 if(answer){
if(!answer.hited && !answer.show){
//取出坐标
answer.pic.x = this.ballon_mapx_arr[i];
this.ballon_temp_arr.push(answer); this.ballon_temp_arr.push(answer);
}
//显示气球
this.ballonRose(answer);
}
}
} }
setTimeout(() => { setTimeout(() => {
...@@ -821,81 +829,76 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -821,81 +829,76 @@ export class PlayComponent implements OnInit, OnDestroy {
}, 100); }, 100);
} }
temp_mapx_modify = true;
/** /**
* 显示气球 * 检查已显示的气球是否全部移除屏幕
*/ */
showBallon(once:boolean = null){ checkAllOut(){
//练习结束 let check = true;
if(this.practiceEnd){
return;
}
if(this.ballon_temp_arr){ if(this.ballon_temp_arr){
for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
if(this.temp_mapx_modify){ let answer = this.ballon_temp_arr[i];
//置成不可修改
this.temp_mapx_modify = false;
let answer = this.ballon_temp_arr[0];
//如果存在,则气球上升
if(answer){
let free_mapx = -1;
//获取可用坐标
for(let i = 0; i < this.ballon_mapx_arr.length; ++ i){
let ballon_mapx = this.ballon_mapx_arr[i];
//如果空闲,则取出坐标
if(ballon_mapx.free){
ballon_mapx.free = false; if(answer.show){
free_mapx = ballon_mapx.mapx; check = false;
break; break;
} }
} }
}
if(free_mapx != -1){ return check;
}
answer.pic.x = free_mapx; getShowAnswer(showArr){
console.log(this.ballon_temp_arr.indexOf(answer)); while(true){
removeItemFromArr(this.ballon_temp_arr, answer);
this.ballonRose(answer); let answer = this.getRandomItemFromArr(this.curanswers);
} if(!answer){
return;
} }
//置成可修改 let index = showArr.indexOf(answer);
this.temp_mapx_modify = true;
//没有重复的,则返回
if(index == -1){
return answer;
} }
} }
if(!once){
//循环显示气球
setTimeout(() => {
this.showBallon();
}, 10);
} }
getRandomItemFromArr(arr){
if(!arr){
return;
}
let length = arr.length;
let index = Math.ceil(Math.random()*100000000)%length;
return arr[index];
} }
/** /**
* 气球答案上升 * 气球答案上升
* @param answer :{pic:spreat,correct:''} * @param answer
*/ */
ballonRose(answer){ ballonRose(answer){
//设置显示高度 //设置显示高度
answer.pic.y = this.canvasHeight + answer.pic.height * this.mapScale; answer.pic.y = this.canvasHeight + answer.pic.height * this.mapScale;
answer.pic.alpha = 1;
answer.pic.setScaleXY(0.3); answer.pic.setScaleXY(0.3);
answer.show = true;
setTimeout(() => { setTimeout(() => {
let out = this.canvasHeight - answer.suspendY; let out = this.canvasHeight - answer.suspendY;
...@@ -905,7 +908,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -905,7 +908,9 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
//从小变到大 //从小变到大
tweenChange(answer.pic, {scaleX:this.mapScale, scaleY:this.mapScale}, 6); tweenChange(answer.pic, {scaleX:this.mapScale, scaleY:this.mapScale}, 4, ()=>{
answer.canHit = true;
});
}, 20); }, 20);
} }
...@@ -915,6 +920,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -915,6 +920,10 @@ export class PlayComponent implements OnInit, OnDestroy {
* @param answer * @param answer
*/ */
ballonSuspension(answer){ ballonSuspension(answer){
//悬浮时晃动气球
shake(answer.pic, this.suspension_time/1000, null, 0.3);
//悬停 //悬停
setTimeout(() => { setTimeout(() => {
...@@ -925,50 +934,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -925,50 +934,18 @@ export class PlayComponent implements OnInit, OnDestroy {
//设置未显示 //设置未显示
answer.show = false; answer.show = false;
let mapx = answer.pic.x; answer.pic.alpha = 0;
this.resetMapx(mapx);
}); });
}, this.suspension_time); }, this.suspension_time);
} }
resetMapx(mapx:number, callback = null){
console.log('reset mapx:', mapx);
if(this.temp_mapx_modify){
this.temp_mapx_modify = false;
//将匹配坐标置成空闲
for(let i = 0; i < this.ballon_mapx_arr.length; ++ i){
if(mapx == this.ballon_mapx_arr[i].mapx){
this.ballon_mapx_arr[i].free = true;
break;
}
}
this.temp_mapx_modify = true;
if(callback){
callback();
}
}
else{
setTimeout(() => {
this.resetMapx(mapx);
}, 10);
}
}
/** /**
* 初始化练题渲染内容 * 初始化练题渲染内容
*/ */
initPracticeRender(){ initPracticeRender(){
this.nextAnswerIndex = 0;
//清空子弹 //清空子弹
this.bulletRenderArr = []; this.bulletRenderArr = [];
...@@ -992,9 +969,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -992,9 +969,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.practiceEnd = false; this.practiceEnd = false;
this.temp_mapx_modify = true;
this.temp_max_ballon = this.max_ballon; this.temp_max_ballon = this.max_ballon;
if(this.weapon_pic){
this.weapon_pic.x = this.canvasWidth / 2;
this.weapon_pic.y = this.canvasHeight - this.weapon_pic.height / 2 * this.mapScale;
}
} }
getAnswerPic(answer){ getAnswerPic(answer){
...@@ -1007,17 +988,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1007,17 +988,24 @@ export class PlayComponent implements OnInit, OnDestroy {
answerPic.init(this.images.get('balloon_' + id)); answerPic.init(this.images.get('balloon_' + id));
answerPic.setScaleXY(0.3); answerPic.setScaleXY(0.3);
answerPic.alpha = 0;
answerPic.y = this.canvasHeight + answerPic.height * this.mapScale; answerPic.y = this.canvasHeight + answerPic.height * this.mapScale;
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.fontSize = 50; answer_val.fontSize = 50;
answer_val.fontName = "BRLNSDB"; answer_val.fontName = "BRLNSDB";
answer_val.fontColor = "#FFFFFF"; answer_val.fontColor = "#FFFFFF";
answer_val.refreshSize(); answer_val.refreshSize();
this.setFontSize(answerPic.width, answer_val);
answer_val.x = -answer_val.width/2; answer_val.x = -answer_val.width/2;
answer_val.y = -35*this.mapScale; answer_val.y = -35*this.mapScale;
answerPic.addChild(answer_val); answerPic.addChild(answer_val);
answerPic.childDepandAlpha = true; answerPic.childDepandAlpha = true;
...@@ -1025,6 +1013,29 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1025,6 +1013,29 @@ export class PlayComponent implements OnInit, OnDestroy {
return answerPic; return answerPic;
} }
setFontSize(parWidth, answer: Label){
if(!answer){
return;
}
//如果宽度超过,则缩小字体
if(answer.width > parWidth + 10){
let fontSize = answer.fontSize;
fontSize = fontSize - 2;
answer.fontSize = fontSize;
answer.refreshSize();
this.setFontSize(parWidth, answer);
}
}
/** /**
* 获取悬浮Y坐标 * 获取悬浮Y坐标
*/ */
...@@ -1194,6 +1205,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1194,6 +1205,11 @@ 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;
...@@ -1240,7 +1256,29 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1240,7 +1256,29 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
/**
* 检查是否可以射击
*/
checkCanShoot(){
if(!this.ballon_temp_arr){
return;
}
let canShoot = true;
for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
let answer = this.ballon_temp_arr[i];
if(!answer.canHit){
canShoot = false;
break;
}
}
return canShoot;
}
/** /**
* 检查是否碰撞 * 检查是否碰撞
...@@ -1256,8 +1294,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1256,8 +1294,8 @@ export class PlayComponent implements OnInit, OnDestroy {
let y = item.pic.y; let y = item.pic.y;
for(let i = 0; i < this.curanswers.length; ++ i){ for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
let answer = this.curanswers[i]; let answer = this.ballon_temp_arr[i];
const rect = answer.pic.getBoundingBox(); const rect = answer.pic.getBoundingBox();
...@@ -1278,12 +1316,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1278,12 +1316,11 @@ export class PlayComponent implements OnInit, OnDestroy {
//设置答案被选中 //设置答案被选中
answer.hited = true; answer.hited = true;
this.showParticle(answer.pic);
answer.pic.scaleX = 0; answer.pic.scaleX = 0;
answer.pic.scaleY = 0; answer.pic.scaleY = 0;
this.showParticle(answer.pic);
this.playAudio('right'); this.playAudio('right');
//练习题结束,播放庆祝界面 //练习题结束,播放庆祝界面
...@@ -1305,14 +1342,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1305,14 +1342,14 @@ export class PlayComponent implements OnInit, OnDestroy {
else{ else{
setTimeout(() => { setTimeout(() => {
removeItemFromArr(this.curAnswerArr, answer.pic); //removeItemFromArr(this.curAnswerArr, answer.pic);
this.resetMapx(answer.pic.x, () =>{ console.log('answer hit index', this.curanswers.indexOf(answer));
//将命中的气球从当前答案中移出
removeItemFromArr(this.curanswers, answer);
}); }, 10);
}, 20);
} }
} }
...@@ -1333,15 +1370,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1333,15 +1370,14 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
/** /**
* 命中显示小星星 * 命中显示小星星
* @param balloon * @param balloon
*/ */
showParticle(balloon){ showParticle(balloon){
console.log('balloon.x', balloon.x);
console.log('balloon.y', balloon.y);
showPopParticle(this.images.get('star'), {x: balloon.x,y: balloon.y} ,this.bg); showPopParticle(this.images.get('star'), {x: balloon.x,y: balloon.y} ,this.bg);
} }
...@@ -1383,10 +1419,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1383,10 +1419,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.bulletRenderArr); this.updateArr(this.bulletRenderArr);
this.updateArr(this.endPageArr);
this.updateArr(this.curAnswerArr); this.updateArr(this.curAnswerArr);
this.updateArr(this.endPageArr);
} }
......
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