Commit a7b02fb0 authored by Chen Jiping's avatar Chen Jiping

完善

parent d1e900d8
......@@ -7,6 +7,7 @@ import {
moveItem,
rotateItem,
showPopParticle,
shake,
ShapeRect
} from './Unit';
import {res, resAudio} from './resources';
......@@ -83,7 +84,7 @@ export class PlayComponent implements OnInit, OnDestroy {
weapon_fire_pic
//当前练习题答案
//当前练习题答案:[{pic:spreat,correct:'',canHit:true|false,hited:true|false,show:true|false}]
curanswers = []
canTouch = true;
......@@ -124,8 +125,6 @@ export class PlayComponent implements OnInit, OnDestroy {
//气球显示x坐标数组[{mapx:numuber,free:false}]
ballon_mapx_arr
//下一个显示气球答案索引
nextAnswerIndex = 0;
@HostListener('window:resize', ['$event'])
onResize(event) {
......@@ -640,7 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy {
bg_pic.init(this.images.get('bg'));
bg_pic.x = this.canvasWidth / 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.bg_pic = bg_pic;
......@@ -656,7 +655,7 @@ export class PlayComponent implements OnInit, OnDestroy {
start_pic.init(this.images.get('start'));
start_pic.x = this.canvasWidth / 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.startPic = start_pic;
......@@ -677,6 +676,7 @@ export class PlayComponent implements OnInit, OnDestroy {
weapon.x = this.canvasWidth / 2;
weapon.y = this.canvasHeight - weapon.height / 2;
weapon.alpha = 0;
weapon.setScaleXY(this.mapScale);
this.weapon_pic = weapon;
this.renderArr.push(weapon);
......@@ -684,6 +684,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const weapon_fire = new MySprite();
weapon_fire.init(this.images.get('weapon_fire'));
weapon_fire.alpha = 0;
weapon_fire.setScaleXY(this.mapScale);
this.weapon_fire_pic = weapon_fire;
......@@ -699,7 +700,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const bullet = new MySprite();
bullet.init(this.images.get('bullet'));
bullet.y = this.canvasHeight - this.weapon_pic.height - bullet.height/2;
bullet.setScaleXY(this.mapScale);
return bullet;
}
......@@ -722,8 +723,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
//获取需要渲染的练习题
this.curPractice = this.data.practices[this.nextPracticeIndex];
......@@ -743,46 +742,41 @@ export class PlayComponent implements OnInit, OnDestroy {
}
//启动气球生产者
this.ballonProducer();
//设置当前气球显示索引,最大为max_ballon个
if(this.curanswers.length < this.max_ballon){
this.temp_max_ballon = this.curanswers.length;
}
else{
this.temp_max_ballon = this.max_ballon;
}
//改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1;
console.log('this.curanswers', this.curanswers.length);
//渲染完成
this.canTouch = true;
}
/**
* 获取显示坐标
* @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坐标
let startX = (this.canvasWidth - row_width)/2 + balloon_width/2;
let startX = (this.canvasWidth - row_width)/2 + spreat_width/2;
//初始化气球x坐标
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);
//显示气球
this.showBallon();
//启动气球生产者
this.ballonProducer();
//改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1;
//渲染完成
this.canTouch = true;
return mapx_arr;
}
/**
......@@ -793,109 +787,118 @@ export class PlayComponent implements OnInit, OnDestroy {
if(this.practiceEnd){
return;
}
//如果到最后一个,则重新开始
if(this.nextAnswerIndex == this.curanswers.length){
console.log('nextAnswerIndex reset');
this.nextAnswerIndex = 0;
}
if(this.ballon_temp_arr.length < this.temp_max_ballon){
//答案
const answer = this.curanswers[this.nextAnswerIndex];
//下一个气球索引加1
this.nextAnswerIndex = this.nextAnswerIndex + 1;
//如果气球全部退出屏幕,则重新显示
if(this.checkAllOut()){
//重置气球临时数组
this.ballon_temp_arr = [];
//如果气球未被击中,且未显示,则显示
if(!answer.hited && !answer.show){
this.ballon_temp_arr.push(answer);
//设置当前气球显示索引,最大为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);
//取出气球显示
for(let i = 0; i < this.temp_max_ballon; ++ i){
let answer = this.getShowAnswer(this.ballon_temp_arr);
if(answer){
//取出坐标
answer.pic.x = this.ballon_mapx_arr[i];
this.ballon_temp_arr.push(answer);
//显示气球
this.ballonRose(answer);
}
}
}
setTimeout(() => {
this.ballonProducer();
}, 100);
}
temp_mapx_modify = true;
/**
* 显示气球
* 检查已显示的气球是否全部移除屏幕
*/
showBallon(once:boolean = null){
checkAllOut(){
//练习结束
if(this.practiceEnd){
return;
}
let check = true;
if(this.ballon_temp_arr){
if(this.temp_mapx_modify){
for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
//置成不可修改
this.temp_mapx_modify = false;
let answer = this.ballon_temp_arr[i];
let answer = this.ballon_temp_arr[0];
if(answer.show){
check = false;
break;
}
}
}
//如果存在,则气球上升
if(answer){
return check;
}
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;
free_mapx = ballon_mapx.mapx;
break;
}
}
if(free_mapx != -1){
getShowAnswer(showArr){
answer.pic.x = free_mapx;
while(true){
console.log(this.ballon_temp_arr.indexOf(answer));
removeItemFromArr(this.ballon_temp_arr, answer);
this.ballonRose(answer);
}
}
let answer = this.getRandomItemFromArr(this.curanswers);
//置成可修改
this.temp_mapx_modify = true;
if(!answer){
return;
}
let index = showArr.indexOf(answer);
//没有重复的,则返回
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){
//设置显示高度
answer.pic.y = this.canvasHeight + answer.pic.height * this.mapScale;
answer.pic.alpha = 1;
answer.pic.setScaleXY(0.3);
answer.show = true;
setTimeout(() => {
let out = this.canvasHeight - answer.suspendY;
......@@ -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);
}
......@@ -915,6 +920,10 @@ export class PlayComponent implements OnInit, OnDestroy {
* @param answer
*/
ballonSuspension(answer){
//悬浮时晃动气球
shake(answer.pic, this.suspension_time/1000, null, 0.3);
//悬停
setTimeout(() => {
......@@ -925,50 +934,18 @@ export class PlayComponent implements OnInit, OnDestroy {
//设置未显示
answer.show = false;
let mapx = answer.pic.x;
this.resetMapx(mapx);
answer.pic.alpha = 0;
});
}, 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(){
this.nextAnswerIndex = 0;
//清空子弹
this.bulletRenderArr = [];
......@@ -992,9 +969,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.practiceEnd = false;
this.temp_mapx_modify = true;
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){
......@@ -1007,17 +988,24 @@ export class PlayComponent implements OnInit, OnDestroy {
answerPic.init(this.images.get('balloon_' + id));
answerPic.setScaleXY(0.3);
answerPic.alpha = 0;
answerPic.y = this.canvasHeight + answerPic.height * this.mapScale;
let answer_val = new Label();
answer_val.text = answer.val;
answer_val.textAlign='middle';
answer_val.fontSize = 50;
answer_val.fontName = "BRLNSDB";
answer_val.fontColor = "#FFFFFF";
answer_val.refreshSize();
this.setFontSize(answerPic.width, answer_val);
answer_val.x = -answer_val.width/2;
answer_val.y = -35*this.mapScale;
answerPic.addChild(answer_val);
answerPic.childDepandAlpha = true;
......@@ -1025,6 +1013,29 @@ export class PlayComponent implements OnInit, OnDestroy {
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坐标
*/
......@@ -1194,6 +1205,11 @@ 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;
......@@ -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,92 +1294,90 @@ export class PlayComponent implements OnInit, OnDestroy {
let y = item.pic.y;
for(let i = 0; i < this.curanswers.length; ++ i){
let answer = this.curanswers[i];
for(let i = 0; i < this.ballon_temp_arr.length; ++ i){
let answer = this.ballon_temp_arr[i];
const rect = answer.pic.getBoundingBox();
const rect = answer.pic.getBoundingBox();
if (this.checkPointInRect(x, y, rect)) {
if (this.checkPointInRect(x, y, rect)) {
//气球飞出屏幕,不处理
if(answer.pic.y < 0){
break;
}
//气球飞出屏幕,不处理
if(answer.pic.y < 0){
break;
}
item.pic.alpha=0;
item.pic.alpha=0;
item.hit = true;
item.hit = true;
//正确答案
if("1" == answer.correct){
//正确答案
if("1" == answer.correct){
//设置答案被选中
answer.hited = true;
//设置答案被选中
answer.hited = true;
this.showParticle(answer.pic);
answer.pic.scaleX = 0;
answer.pic.scaleY = 0;
answer.pic.scaleX = 0;
answer.pic.scaleY = 0;
this.showParticle(answer.pic);
this.playAudio('right');
this.playAudio('right');
//练习题结束,播放庆祝界面
if(this.checkEndPractice()){
//练习题结束,播放庆祝界面
if(this.checkEndPractice()){
this.practiceEnd = true;
this.practiceEnd = true;
//如果当前索引与练习题相等,则为最后一道题,则播放结束画面
if(this.nextPracticeIndex == this.data.practices.length){
this.playEnd(true);
return;
}
else{
this.playEnd(false);
}
}
else{
setTimeout(() => {
//如果当前索引与练习题相等,则为最后一道题,则播放结束画面
if(this.nextPracticeIndex == this.data.practices.length){
this.playEnd(true);
return;
}
else{
this.playEnd(false);
}
}
else{
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));
}, 20);
}
//将命中的气球从当前答案中移出
removeItemFromArr(this.curanswers, answer);
}
else{
this.playAudio('wrong');
}
break;
}, 10);
}
}
else{
this.playAudio('wrong');
}
break;
}
}
if(!item.hit){
if(!item.hit){
setTimeout(() => {
this.checkHit(item);
}, 10);
setTimeout(() => {
this.checkHit(item);
}, 10);
}
}
}
/**
* 命中显示小星星
* @param 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);
}
......@@ -1383,10 +1419,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.bulletRenderArr);
this.updateArr(this.endPageArr);
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