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

完善

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