Commit 66cc63e3 authored by Chen Jiping's avatar Chen Jiping

完善

parent a7b02fb0
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
<tr> <tr>
<th>序号</th> <th>序号</th>
<th>备选答案</th> <th>备选答案</th>
<th>备选答案(图片)</th>
<th>是否正确</th> <th>是否正确</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
...@@ -51,6 +52,13 @@ ...@@ -51,6 +52,13 @@
<tr *ngFor="let data of it.answers;let j = index"> <tr *ngFor="let data of it.answers;let j = index">
<td>{{j+1}}</td> <td>{{j+1}}</td>
<td><input type="text" nz-input placeholder="请录入备选答案" [(ngModel)]="data.val" (blur)="save()"></td> <td><input type="text" nz-input placeholder="请录入备选答案" [(ngModel)]="data.val" (blur)="save()"></td>
<td>
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="data.pic_url"
(imageUploaded)="onImageUploadSuccess($event, data, 'pic_url')"
></app-upload-image-with-preview>
</td>
<td> <td>
<nz-select [(ngModel)]="data.correct" nzAllowClear nzPlaceHolder="请选择" (ngModelChange)="save()"> <nz-select [(ngModel)]="data.correct" nzAllowClear nzPlaceHolder="请选择" (ngModelChange)="save()">
<nz-option nzValue="0" nzLabel="否"></nz-option> <nz-option nzValue="0" nzLabel="否"></nz-option>
......
...@@ -62,9 +62,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -62,9 +62,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -159,6 +159,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -159,6 +159,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
getDefaultAnswerItem(){ getDefaultAnswerItem(){
let answer = { let answer = {
val:"", val:"",
pic_url:"",
correct:'0' correct:'0'
} }
......
...@@ -67,6 +67,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -67,6 +67,9 @@ export class PlayComponent implements OnInit, OnDestroy {
//当前答案渲染 //当前答案渲染
curAnswerArr curAnswerArr
//重玩游戏渲染
restartArr;
mapScale = 1; mapScale = 1;
canvasLeft; canvasLeft;
...@@ -91,17 +94,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -91,17 +94,21 @@ export class PlayComponent implements OnInit, OnDestroy {
started = false; started = false;
canRestart = false;
//练习结束 //练习结束
practiceEnd = false; practiceEnd = false;
startPic; startPic;
restartPic;
playPic; playPic;
playingPic; playingPic;
//正在播放 //正在播放
playing playing;
//当前课程 //当前课程
curPractice; curPractice;
...@@ -109,7 +116,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -109,7 +116,11 @@ export class PlayComponent implements OnInit, OnDestroy {
nextPracticeIndex = 0; nextPracticeIndex = 0;
//气球间隔宽度 //气球间隔宽度
interval_width = 40 interval_width = 60
min_interval_width = 40
max_interval_width = 80
max_ballon = 5; max_ballon = 5;
...@@ -120,10 +131,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -120,10 +131,10 @@ export class PlayComponent implements OnInit, OnDestroy {
suspension_time = 3000; suspension_time = 3000;
//气球上浮临时数组 //气球上浮临时数组
ballon_temp_arr ballon_temp_arr;
//气球显示x坐标数组[{mapx:numuber,free:false}] //气球显示x坐标数组[{mapx:numuber,free:false}]
ballon_mapx_arr ballon_mapx_arr;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
...@@ -326,6 +337,45 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -326,6 +337,45 @@ export class PlayComponent implements OnInit, OnDestroy {
addTouchListener(); addTouchListener();
} }
/**
* 播放练习题音频
* @param key
* @param now
* @param callback
*/
playPracticeAudio(key, now = false, callback = null){
this.playPic.alpha = 0;
this.playingPic.alpha = 1;
this.playAudio(key, now, callback);
this.playing = true;
this.showPlayStauts();
}
showPlayStauts(){
if(this.playing){
if(this.playPic.alpha == 0){
this.playingPic.alpha = 0;
this.playPic.alpha = 1
}
else{
this.playingPic.alpha = 1;
this.playPic.alpha = 0;
}
setTimeout(() => {
this.showPlayStauts();
}, 1000);
}
else{
this.playingPic.alpha = 0;
this.playPic.alpha = 1;
}
}
playAudio(key, now = false, callback = null) { playAudio(key, now = false, callback = null) {
...@@ -344,6 +394,23 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -344,6 +394,23 @@ export class PlayComponent implements OnInit, OnDestroy {
audio.play(); audio.play();
} }
} }
/**
* 暂停练习题音频
* @param key
* @param callback
*/
pausePracticeAudio(key, callback = null){
this.playPic.alpha = 1;
this.playingPic.alpha = 0;
this.pauseAudio(key, callback);
this.playing =false;
}
pauseAudio(key, callback = null){ pauseAudio(key, callback = null){
const audio = this.audioObj[key]; const audio = this.audioObj[key];
...@@ -457,7 +524,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -457,7 +524,7 @@ export class PlayComponent implements OnInit, OnDestroy {
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null, callbackParam = null) { addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null, callbackParam = null) {
console.log('audio key', key);
const audioObj = this.audioObj; const audioObj = this.audioObj;
if (url == null) { if (url == null) {
...@@ -481,8 +548,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -481,8 +548,18 @@ export class PlayComponent implements OnInit, OnDestroy {
}, false); }, false);
} }
addUrlToImages(url) { addUrlToImages(key, url = null) {
if(!key){
return;
}
if(url == null){
url = key;
}
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
...@@ -504,29 +581,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -504,29 +581,6 @@ export class PlayComponent implements OnInit, OnDestroy {
if(!this.data.practices){ if(!this.data.practices){
this.data.practices = []; this.data.practices = [];
} }
this.playing = false;
this.curPractice = {};
this.interval_width = Math.floor(this.interval_width * this.mapScale);
//设置最小间隔
if(this.interval_width < 20){
this.interval_width = 20;
}
//最大值
if(this.interval_width > 60){
this.interval_width = 60
}
this.ballon_temp_arr = [];
this.ballon_mapx_arr = [];
this.temp_max_ballon = this.max_ballon;
} }
...@@ -535,7 +589,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -535,7 +589,16 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
for(let i = 0; i < this.data.practices.length; ++ i){
let practice = this.data.practices[i];
for(let j = 0; j < practice.answers.length; ++ j){
let answer = practice.answers[j];
this.addUrlToImages(answer.pic_url);
}
}
} }
...@@ -578,22 +641,55 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -578,22 +641,55 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
this.interval_width = Math.floor(this.interval_width * this.mapScale);
//设置最小间隔
if(this.interval_width < this.min_interval_width){
this.interval_width = this.min_interval_width;
}
//最大值
if(this.interval_width > this.max_interval_width){
this.interval_width = this.max_interval_width;
}
this.renderArr = []; this.renderArr = [];
this.initRestartData();
}
initRestartData(){
this.bulletRenderArr = []; this.bulletRenderArr = [];
this.endPageArr = []; this.endPageArr = [];
this.restartArr = [];
this.nextPracticeIndex = 0; this.nextPracticeIndex = 0;
this.curPractice = {}; this.curPractice = {};
this.started = false;
this.canRestart = false;
//练习结束
this.practiceEnd = false;
this.playing = false;
this.curPractice = {};
this.ballon_temp_arr = [];
this.ballon_mapx_arr = [];
this.temp_max_ballon = this.max_ballon;
this.initPracticeRender(); this.initPracticeRender();
} }
/** /**
* 初始化试图 * 初始化试图
*/ */
...@@ -613,7 +709,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -613,7 +709,7 @@ export class PlayComponent implements OnInit, OnDestroy {
btnPlay.y = 100 * this.mapScale; btnPlay.y = 100 * this.mapScale;
btnPlay.setScaleXY(this.mapScale); btnPlay.setScaleXY(this.mapScale);
btnPlay.alpha = 1; btnPlay.alpha = 0;
this.renderArr.push(btnPlay); this.renderArr.push(btnPlay);
...@@ -660,6 +756,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -660,6 +756,16 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr.push(start_pic); this.renderArr.push(start_pic);
this.startPic = start_pic; this.startPic = start_pic;
const restart_pic = new MySprite();
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.setScaleXY(this.mapScale);
this.restartArr.push(restart_pic);
this.restartPic = restart_pic;
//初始化武器图片 //初始化武器图片
this.initWeaponPic(); this.initWeaponPic();
...@@ -748,6 +854,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -748,6 +854,12 @@ export class PlayComponent implements OnInit, OnDestroy {
//改变下一道练习题索引:当前练习题增加1 //改变下一道练习题索引:当前练习题增加1
this.nextPracticeIndex = this.nextPracticeIndex + 1; this.nextPracticeIndex = this.nextPracticeIndex + 1;
//播放音频
setTimeout(() => {
this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1));
}, 100);
//渲染完成 //渲染完成
this.canTouch = true; this.canTouch = true;
} }
...@@ -903,7 +1015,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -903,7 +1015,9 @@ export class PlayComponent implements OnInit, OnDestroy {
let out = this.canvasHeight - answer.suspendY; let out = this.canvasHeight - answer.suspendY;
tweenChange(answer.pic, {y: out}, 6, () => { let speed = this.getRandomSpeed();
tweenChange(answer.pic, {y: out}, speed, () => {
this.ballonSuspension(answer); this.ballonSuspension(answer);
}); });
...@@ -929,7 +1043,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -929,7 +1043,9 @@ export class PlayComponent implements OnInit, OnDestroy {
let out = - answer.pic.height * this.mapScale; let out = - answer.pic.height * this.mapScale;
tweenChange(answer.pic, {y: out}, 6, ()=>{ let speed = this.getRandomSpeed();
tweenChange(answer.pic, {y: out}, speed, ()=>{
//设置未显示 //设置未显示
answer.show = false; answer.show = false;
...@@ -946,6 +1062,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -946,6 +1062,8 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initPracticeRender(){ initPracticeRender(){
//播放状态
this.playing = false;
//清空子弹 //清空子弹
this.bulletRenderArr = []; this.bulletRenderArr = [];
...@@ -990,7 +1108,33 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -990,7 +1108,33 @@ 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);
//图片存在,则渲染图片
if(answer.pic_url){
const answer_pic = new MySprite();
answer_pic.init(this.images.get(answer.pic_url));
let w = answer_pic.width;
let h = answer_pic.height;
let r = Math.sqrt( w * w + h * h)/2;
if(r > 60){
answer_pic.setScaleXY(60 / r);
}
else{
answer_pic.setScaleXY(r / 60);
}
answer_pic.x = 0;
answer_pic.y = -35*this.mapScale;
answerPic.addChild(answer_pic);
console.log('answer.pic_url', answer_pic);
}
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';
...@@ -1002,11 +1146,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1002,11 +1146,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this.setFontSize(answerPic.width, answer_val); this.setFontSize(answerPic.width, answer_val);
answer_val.refreshSize();
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;
...@@ -1019,8 +1167,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1019,8 +1167,14 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
let w = answer.width;
let h = answer.height;
let r = Math.sqrt( w * w + h * h)/2;
//如果宽度超过,则缩小字体 //如果宽度超过,则缩小字体
if(answer.width > parWidth + 10){ if(r > (parWidth - 30)/2){
let fontSize = answer.fontSize; let fontSize = answer.fontSize;
...@@ -1030,6 +1184,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1030,6 +1184,8 @@ export class PlayComponent implements OnInit, OnDestroy {
answer.refreshSize(); answer.refreshSize();
//console.log('answer_val', answer);
this.setFontSize(parWidth, answer); this.setFontSize(parWidth, answer);
...@@ -1044,6 +1200,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1044,6 +1200,14 @@ export class PlayComponent implements OnInit, OnDestroy {
return y; return y;
} }
/**
* 获得随机速度
*/
getRandomSpeed(){
let speed = Math.floor(Math.random() * 4 + 3);
return speed;
}
/** /**
* 播放练习题结束画面 * 播放练习题结束画面
* @param end 是否所有都结束 * @param end 是否所有都结束
...@@ -1068,7 +1232,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1068,7 +1232,11 @@ export class PlayComponent implements OnInit, OnDestroy {
//如果未全部结束,则初始化下一个练习题 //如果未全部结束,则初始化下一个练习题
if(!end){ if(!end){
setTimeout(() => { setTimeout(() => {
tweenChange(cover, {alpha: 0}, 6, ()=>{
this.initPracticePic(); this.initPracticePic();
});
}, 5000); }, 5000);
} }
} }
...@@ -1132,16 +1300,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1132,16 +1300,17 @@ export class PlayComponent implements OnInit, OnDestroy {
//点击开始 //点击开始
if(this.checkClickTarget(this.startPic)){ if(this.checkClickTarget(this.startPic)){
this.playAudio("start"); this.startGame();
setTimeout(() => { return;
let out = this.canvasHeight + this.startPic.height; }
tweenChange(this.startPic, {y: out}, .3, ()=>{
this.weapon_pic.alpha=1;
this.started = true;
this.initPracticePic(); //点击开始
}); if(this.canRestart){
}, 200);
if(this.checkClickTarget(this.restartPic)){
this.restartGame();
return;
}
} }
//未开始直接返回 //未开始直接返回
...@@ -1157,26 +1326,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1157,26 +1326,14 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.checkClickTarget(this.playPic) && !this.playing) { if (this.checkClickTarget(this.playPic) && !this.playing) {
this.playPic.alpha = 0; this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1));
this.playingPic.alpha = 1;
this.playAudio('practice_' + (this.nextPracticeIndex - 1));
this.playing = true;
return; return;
} }
if (this.checkClickTarget(this.playingPic) && this.playing) { if (this.checkClickTarget(this.playingPic) && this.playing) {
this.playPic.alpha = 1; this.pausePracticeAudio('practice_' + (this.nextPracticeIndex - 1));
this.playingPic.alpha = 0;
this.pauseAudio('practice_' + (this.nextPracticeIndex - 1));
this.playing =false;
return; return;
} }
...@@ -1233,7 +1390,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1233,7 +1390,7 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => { setTimeout(() => {
let out = -bullet_pic.height; let out = -bullet_pic.height;
tweenChange(bullet.pic, {y: out}, 3, ()=>{ tweenChange(bullet.pic, {y: out}, 1, ()=>{
removeItemFromArr(this.bulletRenderArr, bullet); removeItemFromArr(this.bulletRenderArr, bullet);
}); });
this.checkHit(bullet); this.checkHit(bullet);
...@@ -1328,9 +1485,32 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1328,9 +1485,32 @@ export class PlayComponent implements OnInit, OnDestroy {
this.practiceEnd = true; this.practiceEnd = true;
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);
//显示重新开始按钮
setTimeout(() => {
this.restartPic.alpha = 1;
this.playPic.alpha = 0;
this.weapon_pic.alpha=0;
let out = this.canvasHeight - this.restartPic.height/2;
tweenChange(this.restartPic, {y: out}, 1, ()=>{
this.canRestart = true;
this.canTouch = true;
});
}, 1000);
return; return;
} }
else{ else{
...@@ -1355,6 +1535,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1355,6 +1535,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
else{ else{
this.playAudio('wrong'); this.playAudio('wrong');
shake(answer.pic, 1);
} }
break; break;
...@@ -1372,6 +1553,54 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1372,6 +1553,54 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
/**
* 开始游戏
*/
startGame(){
this.playAudio("start");
setTimeout(() => {
let out = this.canvasHeight + this.startPic.height;
tweenChange(this.startPic, {y: out}, .3, ()=>{
this.weapon_pic.alpha=1;
this.started = true;
this.playPic.alpha = 1;
this.initPracticePic();
//播放练习题音频
setTimeout(() => {
this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1));
}, 50);
});
}, 200);
}
/**
* 重新开始游戏
*/
restartGame(){
let out = this.canvasHeight + this.restartPic.height;
tweenChange(this.restartPic, {y: out}, .3, ()=>{
this.weapon_pic.alpha=1;
this.playPic.alpha = 1;
this.initRestartData();
this.started = true;
this.initPracticePic();
//播放练习题音频
setTimeout(() => {
this.playPracticeAudio('practice_' + (this.nextPracticeIndex - 1));
}, 50);
});
}
/** /**
* 命中显示小星星 * 命中显示小星星
* @param balloon * @param balloon
...@@ -1423,6 +1652,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1423,6 +1652,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.endPageArr); this.updateArr(this.endPageArr);
this.updateArr(this.restartArr);
} }
......
...@@ -23,7 +23,8 @@ const res = [ ...@@ -23,7 +23,8 @@ const res = [
['play', "assets/play/play.png"], ['play', "assets/play/play.png"],
['playing', "assets/play/playing.png"], ['playing', "assets/play/playing.png"],
['start', "assets/play/start.png"] ['start', "assets/play/start.png"],
['restart', "assets/play/restart.png"]
]; ];
......
src/assets/play/play.png

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

17.7 KB | W: | H:

src/assets/play/playing.png

22.2 KB | W: | H:

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