Commit 8eb9b89a authored by 李维's avatar 李维

dev done

parent 8a51c964
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.10.2" "zone.js": "~0.10.2",
"node-sass": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.900.3", "@angular-devkit/build-angular": "~0.900.3",
......
<div class="model-content"> <div class="model-content">
<div style="padding: 30px">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div style="display: flex; align-items: center; ">
<h2> 题干类型: </h2>
<nz-radio-group [(ngModel)]="item.questionType" style="margin-left: 20px; margin-top: -11px" (ngModelChange)="save()">
<label nz-radio nzValue="text">文本</label>
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="audio">音频</label>
<label nz-radio nzValue="video">视频</label>
</nz-radio-group>
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div style="width: 700px">
<div *ngIf="item.questionType == 'text'">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
</div>
<app-upload-image-with-preview <div *ngIf="item.questionType == 'pic'" style="width: 80%">
[picUrl]="item.pic_url" <app-upload-image-with-preview
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" [picUrl]="item.pic_url"
></app-upload-image-with-preview> (imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
</div>
<app-audio-recorder <div *ngIf="item.questionType == 'text' || item.questionType == 'pic'" style="margin-top: 10px;">
[audioUrl]="item.audio_url" <span>短音频</span>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" <app-audio-recorder
></app-audio-recorder> [audioUrl]="item.short_audio_url"
<app-custom-hot-zone></app-custom-hot-zone> (audioUploaded)="onAudioUploadSuccess($event, 'short_audio_url')"
<app-upload-video></app-upload-video> ></app-audio-recorder>
<app-lesson-title-config></app-lesson-title-config> </div>
<div *ngIf="item.questionType == 'audio'">
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
<div *ngIf="item.questionType == 'video'">
<app-upload-video
(videoUploaded)="onVideoUploadSuccess($event)"
[item]="item"
[videoUrl]="item.video_url"></app-upload-video>
</div>
</div>
<nz-divider style=" margin-top: 80px; margin-bottom: 80px;"></nz-divider>
<div style="display: flex; align-items: center;">
<h2> 答案类型: </h2>
<nz-radio-group [(ngModel)]="item.answerType" style="margin-left: 20px; margin-top: -11px" (ngModelChange)="save()">
<label nz-radio nzValue="text">文本</label>
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="pic-text">图片-文字</label>
</nz-radio-group>
</div>
<div *ngFor="let it of item.answerArr; let i = index">
<div style="margin-bottom: 30px; width : 500px; border: 1px solid #ccc; border-radius: 10px; padding: 5px;">
<span> 答案{{i+1}}: </span>
<nz-radio-group style="margin-left: 20px; margin-bottom: 5px;" [(ngModel)]="it.answerRight" (ngModelChange)="save()">
<label nz-radio nzValue="0">错误</label>
<label nz-radio nzValue="1">正确</label>
<button style="margin-left: 200px" nz-button nzType="danger" nzsize="small" (click)="deleteAnswer(i)">删除</button>
</nz-radio-group>
<input *ngIf="item.answerType == 'text' || item.answerType == 'pic-text'" type="text" nz-input [(ngModel)]="it.text" (blur)="save()" style="margin-bottom: 10px;">
<app-upload-image-with-preview
*ngIf="item.answerType == 'pic' || item.answerType == 'pic-text'"
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url', it)"
></app-upload-image-with-preview>
</div>
</div>
</div>
<div *ngIf="item.answerArr.length < 4" style="padding: 30px;" (click)="addAnswer()">
<button nz-button nzType="dashed" style="width: 200px; height: 100px; margin-top: -30px">添加答案</button>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -10,7 +10,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,7 +10,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "LST02";
// 储存对象 // 储存对象
item; item;
...@@ -23,7 +23,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -23,7 +23,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
...@@ -51,6 +50,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -51,6 +50,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (!this.item.questionType) {
this.item.questionType = 'text';
this.item.answerType = 'text';
this.item.answerArr = [];
// for (let i = 0; i < 4; i++) {
// this.item.answerArr.push({
// text: '',
// pic_url: '',
// answerRight: '0',
// });
// }
}
}
deleteAnswer(i) {
this.item.answerArr.splice(i, 1);
this.save();
}
addAnswer() {
this.item.answerArr.push({
text: '',
pic_url: '',
answerRight: '0',
});
this.save();
} }
...@@ -58,10 +84,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,10 +84,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, key, item = null) {
this.item[key] = e.url; if (!item) {
this.save(); item = this.item;
}
item[key] = e.url;
this.save();
} }
/** /**
...@@ -75,6 +104,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -75,6 +104,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
onVideoUploadSuccess(e) {
this.item.video_url = e.url;
this.save();
}
/** /**
* 储存数据 * 储存数据
......
...@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window { interface AirWindow extends Window {
air: any; air: any;
curCtx: any; curCtx: any;
curImages: any;
} }
declare let window: AirWindow; declare let window: AirWindow;
...@@ -36,7 +37,6 @@ class Sprite { ...@@ -36,7 +37,6 @@ class Sprite {
export class MySprite extends Sprite { export class MySprite extends Sprite {
_width = 0; _width = 0;
...@@ -69,6 +69,13 @@ export class MySprite extends Sprite { ...@@ -69,6 +69,13 @@ export class MySprite extends Sprite {
img; img;
_z = 0; _z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
...@@ -87,6 +94,10 @@ export class MySprite extends Sprite { ...@@ -87,6 +94,10 @@ export class MySprite extends Sprite {
} }
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
...@@ -103,6 +114,8 @@ export class MySprite extends Sprite { ...@@ -103,6 +114,8 @@ export class MySprite extends Sprite {
} }
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
return; return;
...@@ -139,21 +152,21 @@ export class MySprite extends Sprite { ...@@ -139,21 +152,21 @@ export class MySprite extends Sprite {
//
if (this._radius) { // if (this._radius) {
//
const r = this._radius; // const r = this._radius;
const w = this.width; // const w = this.width;
const h = this.height; // const h = this.height;
//
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线 // this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r); // this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r); // this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r); // this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r); // this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
this.ctx.clip(); // this.ctx.clip();
} // }
} }
...@@ -176,10 +189,14 @@ export class MySprite extends Sprite { ...@@ -176,10 +189,14 @@ export class MySprite extends Sprite {
if (this.img) { if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX + rect.x, this._offY + rect.y, rect.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
} }
...@@ -257,6 +274,13 @@ export class MySprite extends Sprite { ...@@ -257,6 +274,13 @@ export class MySprite extends Sprite {
} }
} }
set bitmapFlag(v) {
this._bitmapFlag = v;
}
get bitmapFlag() {
return this._bitmapFlag;
}
set alpha(v) { set alpha(v) {
this._alpha = v; this._alpha = v;
if (this.childDepandAlpha) { if (this.childDepandAlpha) {
...@@ -305,7 +329,6 @@ export class MySprite extends Sprite { ...@@ -305,7 +329,6 @@ export class MySprite extends Sprite {
getBoundingBox() { getBoundingBox() {
const getParentData = (item) => { const getParentData = (item) => {
let px = item.x; let px = item.x;
...@@ -343,11 +366,6 @@ export class MySprite extends Sprite { ...@@ -343,11 +366,6 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx); const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy); const height = this.height * Math.abs(data.sy);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height}; return {x, y, width, height};
} }
...@@ -758,7 +776,8 @@ export class RichTextOld extends Label { ...@@ -758,7 +776,8 @@ export class RichTextOld extends Label {
export class RichText extends Label { export class RichText extends Label {
disH = 30; disH = 30;
offW = 10;
constructor(ctx?: any) { constructor(ctx?: any) {
super(ctx); super(ctx);
...@@ -788,7 +807,7 @@ export class RichText extends Label { ...@@ -788,7 +807,7 @@ export class RichText extends Label {
const chr = this.text.split(' '); const chr = this.text.split(' ');
let temp = ''; let temp = '';
const row = []; const row = [];
const w = selfW - 80; const w = selfW - this.offW * 2;
const disH = (this.fontSize + this.disH) * this.scaleY; const disH = (this.fontSize + this.disH) * this.scaleY;
...@@ -1020,7 +1039,7 @@ export class MyAnimation extends MySprite { ...@@ -1020,7 +1039,7 @@ export class MyAnimation extends MySprite {
loop = false; loop = false;
playEndFunc; playEndFunc;
delayPerUnit = 1; delayPerUnit = 0.07;
restartFlag = false; restartFlag = false;
reverseFlag = false; reverseFlag = false;
...@@ -1109,8 +1128,9 @@ export class MyAnimation extends MySprite { ...@@ -1109,8 +1128,9 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = true; this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) { if (this.playEndFunc) {
this.playEndFunc(); const func = this.playEndFunc;
this.playEndFunc = null; this.playEndFunc = null;
func();
} }
} }
...@@ -1200,7 +1220,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1200,7 +1220,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) { export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null, loop = false) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000); const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
...@@ -1208,7 +1228,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = ...@@ -1208,7 +1228,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
tween.onComplete(() => { tween.onComplete(() => {
callBack(); callBack();
}); });
} else if (loop) {
const speed = (rotation - item.rotation) / time;
tween.onComplete(() => {
item.rotation %= 360;
rotateItem(item, item.rotation + speed * time, time, null, easing, true);
});
} }
if (easing) { if (easing) {
tween.easing(easing); tween.easing(easing);
} }
...@@ -1525,10 +1552,15 @@ export function formatTime(fmt, date) { ...@@ -1525,10 +1552,15 @@ export function formatTime(fmt, date) {
return fmt; return fmt;
} }
export function getMinScale(item, maxLen) { export function getMinScale(item, maxW, maxH = null) {
const sx = maxLen / item.width; if (!maxH) {
const sy = maxLen / item.height; maxH = maxW;
}
const sx = maxW / item.width;
const sy = maxH / item.height;
const minS = Math.min(sx, sy); const minS = Math.min(sx, sy);
return minS; return minS;
} }
...@@ -1571,6 +1603,46 @@ export function jelly(item, time = 0.7) { ...@@ -1571,6 +1603,46 @@ export function jelly(item, time = 0.7) {
run(); run();
} }
export function jellyPop(item, time) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 6;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
const arr = [
[baseSX * 1.3, baseSY * 1.3, t],
[baseSX * 0.85, baseSY * 0.85, t * 1],
[baseSX * 1.1, baseSY * 1.1, t * 1],
[baseSX * 0.95, baseSY * 0.95, t * 1],
[baseSX * 1.02, baseSY * 1.02, t * 1],
[baseSX * 1, baseSY * 1, t * 1],
];
item.setScaleXY(0);
run();
}
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) { export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
...@@ -1672,5 +1744,42 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1672,5 +1744,42 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
} }
export function getMaxScale(item, maxW, maxH) {
const sx = maxW / item.width;
const sy = maxH / item.height;
const maxS = Math.max(sx, sy);
return maxS;
}
export function createSprite(key) {
console.log("createSprite", key)
const image = window.curImages;
const spr = new MySprite();
spr.init(image.get(key));
return spr;
}
export class MyVideo extends MySprite {
element;
initVideoElement(videoElement) {
this.element = videoElement;
this.width = this.element.videoWidth;
this.height = this.element.videoHeight;
this.element.currentTime = 0.01;
}
drawSelf() {
super.drawSelf();
this.ctx.drawImage(this.element, 0, 0, this.width, this.height);
}
}
// --------------- custom class -------------------- // --------------- custom class --------------------
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'MMTextBook-Bold';
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/MMTextBook-Bold.otf") ;
} }
<div style="display: none">
<video [src]="data.video_url" #videoNode></video>
</div>
<div class="game-container" #wrap> <div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<label style="position: absolute; top: 0px; opacity: 0; font-family: 'MMTextBook-Bold'">1</label>
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { import {
Label, ApplicationRef,
MySprite, tweenChange, ChangeDetectorRef,
Component,
ElementRef,
HostListener,
OnDestroy,
OnInit,
ViewChild
} from '@angular/core';
import {
createSprite,
formatTime,
getMaxScale,
getMinScale, jelly, jellyPop,
Label, moveItem,
MySprite,
MyVideo, removeItemFromArr,
RichText, rotateItem,
shake, ShapeRect,
tweenChange,
MyAnimation
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -13,8 +30,6 @@ import {debounceTime} from 'rxjs/operators'; ...@@ -13,8 +30,6 @@ import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
...@@ -25,6 +40,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -25,6 +40,8 @@ export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('videoNode', {static: true }) videoNode: ElementRef;
// 数据 // 数据
data; data;
...@@ -57,17 +74,26 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,17 +74,26 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'LST02';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic; private oven: MySprite;
private questionBG: MySprite;
private curAudio: any;
private progressBarBg ;
private currentTime: number;
private isClickedProgress: boolean;
private allBtns: any;
private curVideo: MyVideo;
private videoBtn: MySprite;
private answerArr: any;
private ovenLight: MySprite;
private petalTime: number;
private showPetalFlag: boolean;
private endPageArr: any;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -86,7 +112,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -86,7 +112,6 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
// console.log('data:' , data);
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -141,6 +166,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -141,6 +166,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canvas.nativeElement.height = this.canvasHeight; this.canvas.nativeElement.height = this.canvasHeight;
window['curCtx'] = this.ctx; window['curCtx'] = this.ctx;
window['curImages'] = this.images;
} }
...@@ -270,7 +296,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -270,7 +296,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
playAudio(key, now = false, callback = null) { playAudio(key, now = true, callback = null) {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
if (audio) { if (audio) {
...@@ -313,6 +339,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -313,6 +339,15 @@ export class PlayComponent implements OnInit, OnDestroy {
pr.push(a); pr.push(a);
}); });
// if (this.videoNode && this.videoNode.nativeElement) {
// const a = this.preloadVideo(this.videoNode.nativeElement)
// .then(() => {
// console.log('video load end');
// })
// .catch(err => console.log(err));
// pr.push(a);
// }
return Promise.all(pr); return Promise.all(pr);
} }
...@@ -340,6 +375,19 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -340,6 +375,19 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
} }
preloadVideo(video) {
return new Promise((resolve, reject) => {
video.addEventListener('canplay', () => {
console.log('video canplay');
resolve();
})
video.addEventListener('error', (e) => {
console.log('video error: ', e);
reject();
})
video.load();
});
}
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
...@@ -350,7 +398,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -350,7 +398,6 @@ export class PlayComponent implements OnInit, OnDestroy {
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
...@@ -421,6 +468,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -421,6 +468,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// ======================================================编写区域========================================================================== // ======================================================编写区域==========================================================================
...@@ -433,8 +481,38 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -433,8 +481,38 @@ export class PlayComponent implements OnInit, OnDestroy {
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg'; this.data.pic_url = 'assets/play/default/demo_main.png';
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; }
if (!this.data.questionType) {
this.data = {
answerArr: [
{
answerRight: "1",
text: "Today is a good day",
pic_url: ""
},
{
answerRight: "0",
text: "Today is a good day",
pic_url: ""
},
{
answerRight: "0",
text: "Today is a good day",
pic_url: ""
},
{
answerRight: "1",
text: "Today is a good day",
pic_url: ""
}
],
answerType: "text",
questionType: "pic",
pic_url: 'assets/play/default/demo_main.png',
text: "This is a test question."
}
} }
} }
...@@ -444,8 +522,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -444,8 +522,11 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url); this.data.pic_url && this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
this.data.answerArr.forEach(( item ) => {
this.addUrlToImages(item.pic_url);
});
} }
...@@ -455,16 +536,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,16 +536,17 @@ export class PlayComponent implements OnInit, OnDestroy {
initAudio() { initAudio() {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.audio_url); this.data.audio_url && this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2); this.data.short_audio_url && this.addUrlToAudioObj(this.data.short_audio_url);
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('zhengque', this.rawAudios.get('zhengque'), 1);
this.addUrlToAudioObj('cuowu', this.rawAudios.get('cuowu'), 1);
this.addUrlToAudioObj('sahua', this.rawAudios.get('sahua'), 1);
this.addUrlToAudioObj('songshu', this.rawAudios.get('songshu'), 1);
} }
/** /**
* 初始化数据 * 初始化数据
*/ */
...@@ -481,8 +563,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -481,8 +563,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = []; this.renderArr = [];
this.currentTime = 0;
this.allBtns = [];
this.answerArr = [];
this.endPageArr = [];
} }
...@@ -492,188 +577,884 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -492,188 +577,884 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initView() { initView() {
this.initBg();
this.initQuestion();
this.initAnswer();
this.initSongShu()
}
this.initPic();
this.initBottomPart(); mapDown(event) {
if (!this.canTouch) {
return;
}
if (this.data.questionType == 'video' && this.checkClickTarget(this.questionBG)) {
this.clickedVideo();
return;
}
for (let i = 0; i < this.answerArr.length; i++) {
if (this.checkClickTarget(this.answerArr[i])) {
this.clickedAnswer(this.answerArr[i]);
return;
}
}
// ------- 播放器 --------
if (this.curAudio) {
// if (this.checkClickTarget(this.progressBarBg)) {
// this.isClickedProgress = true;
// this.touchDownProgressBar(this.progressBarBg);
// return;
// }
if (this.checkClickTarget(this.curAudio.playBtn)) {
this.touchDownAudioBtn(this.curAudio);
return;
}
}
if(this.data.short_audio_url) {
let shortAudio = this.audioObj[this.data.short_audio_url];
shortAudio.onended = () => {
this["shortAudio"].visible = true;
this["shortAudioAni"].stop()
}
if (this.checkClickTarget(this["shortAudio"])) {
this["shortAudio"].visible = false;
this["shortAudioAni"].play();
shortAudio.pause()
shortAudio.currentTime = 0;
shortAudio.play()
return;
}
}
// ------------------------
} }
initBottomPart() { mapMove(event) {
if (!this.isClickedProgress) {
return;
}
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale); this.touchDownProgressBar(this.progressBarBg);
}
this.renderArr.push(btnLeft); mapUp(event) {
this.btnLeft = btnLeft;
this.isClickedProgress = false;
}
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight); update() {
this.btnRight = btnRight; // ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
this.updateArr(this.renderArr);
this.updateArr(this.endPageArr);
// this.updateTime();
} }
initPic() { // private updateTime() {
// if (!this.isClickedProgress && this.curAudio) {
// const progress = this.curAudio.currentTime / this.curAudio.duration;
// this.setAudioProgress(this.progressBarBg, progress);
// }
// }
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); private createPlayPauseButton(playKey, pauseKey) {
const button = createSprite(playKey);
const btnPause = createSprite(pauseKey);
this.hide(btnPause);
button.addChild(btnPause);
this.curAudio.playBtn = button;
this.curAudio.stopBtn = btnPause;
return button;
}
private createProgressBar(barTopKey, barBottomKey, barBtnKey) {
const container = new MySprite();
const progressBarBg = createSprite(barBottomKey);
progressBarBg.anchorX = 0;
this.progressBarBg = progressBarBg;
const progressBarPlayed = createSprite(barTopKey);
progressBarPlayed.anchorX = 0;
progressBarBg['bar'] = progressBarPlayed;
container['bar'] = progressBarPlayed;
const btn = createSprite(barBtnKey)
btn.y = -3;
progressBarBg['btn'] = btn;
const currentTime = this.createTime();
currentTime.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
currentTime.refreshSize();
currentTime.x = 0;
currentTime.y = 30;
progressBarBg['timeLabel'] = currentTime;
const totalTime = this.createTime();
totalTime.text = formatTime('mm:ss', new Date(this.curAudio.duration * 1000));
totalTime.refreshSize();
totalTime.x = progressBarBg.width - totalTime.width;
totalTime.y = currentTime.y;
container.addChild(progressBarBg);
container.addChild(progressBarPlayed);
container.addChild(btn);
container.addChild(currentTime)
container.addChild(totalTime)
return container;
}
const pic2 = new MySprite(); private createTime() {
pic2.init(this.images.get(this.data.pic_url_2)); const label = new Label();
pic2.x = this.canvasWidth / 2 + this.canvasWidth; label.fontSize = 22;
pic2.y = this.canvasHeight / 2; label.fontColor = '#c7edc8';
pic2.setScaleXY(maxW / pic2.width); label.fontName = 'MMTextBook-Bold';
// label.setShadow(1, 1, 2, '#000000')
return label;
}
this.renderArr.push(pic2); private setAudioProgress(target: any, progress: number) {
this.pic2 = pic2; target.btn.x = target.width * progress;
this.curPic = pic1; const showRect = {x: 0, y: 0, width: target.bar.width * progress, height: target.bar.height};
target.bar.setShowRect(showRect);
this.currentTime = Math.floor(progress * this.curAudio.duration);
target.timeLabel.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
} }
private touchDownProgressBar(target) {
this.setAudioState(this.curAudio, false);
const rect = target.getBoundingBox();
const sx = rect.width / target.width;
const tmpW = (this.mx - rect.x) / sx;
if (tmpW >= 0 && tmpW <= target.width) {
const progress = tmpW / target.width;
this.curAudio.currentTime = progress * this.curAudio.duration;
this.setAudioProgress(target, progress);
}
}
btnLeftClicked() { private setAudioState(audio: any, isPlay: boolean) {
if (isPlay) {
this.hide(audio.playBtn);
this.show(audio.stopBtn);
audio.play();
} else {
this.hide(audio.stopBtn);
this.show(audio.playBtn);
audio.pause();
}
}
this.lastPage(); private hide(element: MySprite) {
element.alpha = 0;
}
private show(element: MySprite) {
element.alpha = 1;
} }
btnRightClicked() { private touchDownAudioBtn(audio) {
audio.pause();
audio.currentTime = 0;
audio.play();
this["audioAni"].play()
this.curAudio.onended = () => {
this["audioAni"].stop()
this.curAudio["playBtn"].visible = true;
}
this.curAudio["playBtn"].visible = false;
this.nextPage();
// if (audio.paused) {
// audio.play();
// this.setAudioState(audio, true);
// } else {
// audio.pause();
// this.setAudioState(audio, false);
// }
} }
lastPage() { createAnimation(imageKey, length, runTime, endCallback?, order?:boolean) {
let element = new MyAnimation()
// element.id = "ANI-" + imageKey + "-" + Math.floor(Math.random()*10000)
if(order){
for (let index = length; index > 0; index--) {
element.addFrameByImg(this.images.get(`${imageKey} (${index})`))
}
}else{
for (let index = 0; index < length; index++) {
element.addFrameByImg(this.images.get(`${imageKey} (${index + 1})`))
}
}
if (this.curPic == this.pic1) { element.delayPerUnit = (runTime / length) / 1000
return; if (element.delayPerUnit > 1) {
element.delayPerUnit = 1
} else if (element.delayPerUnit < 0.01) {
element.delayPerUnit = 0.01;
} }
this.canTouch = false; element.playEndFunc = () => {
endCallback && endCallback()
}
const moveLen = this.canvasWidth; return element
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); }
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true; private initBg() {
this.curPic = this.pic1; const sky = createSprite('bg_bgsky');
}); sky.setScaleXY(getMaxScale(sky, this.canvasWidth, 122 * this.mapScale));
sky.x = this.canvasWidth / 2;
sky.y = sky.height / 2 * sky.scaleY;
this.renderArr.push(sky);
const tree = createSprite('bg_bgtree');
tree.setScaleXY(getMaxScale(tree, this.canvasWidth, 122 * this.mapScale));
tree.x = this.canvasWidth / 2;
tree.y = tree.height / 2 * tree.scaleY;
this.renderArr.push(tree);
const bg_1 = createSprite('bg_bg');
bg_1.setScaleXY(getMaxScale(bg_1, this.canvasWidth, this.canvasHeight));
bg_1.x = this.canvasWidth / 2;
bg_1.y = 101 * this.mapScale + bg_1.height / 2 * bg_1.scaleY;
this.renderArr.push(bg_1);
const bg_2 = createSprite('bg_bgdi');
bg_2.setScaleXY(this.mapScale);
bg_2.x = this.canvasWidth / 2;
bg_2.y = bg_2.height / 2 * bg_2.scaleY;
this["bg_2"] = bg_2;
this.renderArr.push(bg_2);
const questionBG = createSprite('bg_tigan');
questionBG.setScaleXY(this.mapScale);
questionBG.x = this.canvasWidth / 2;
questionBG.y = 5 * this.mapScale + questionBG.height / 2 * questionBG.scaleY;
this.questionBG = questionBG;
this.renderArr.push(questionBG);
const bg_3 = createSprite('bg_yinpin');
bg_3.x = 0;
bg_3.y = -questionBG.height / 2 + 20;
bg_3.visible = false
this["bg_3"] = bg_3;
questionBG.addChild(bg_3);
if(this.data.short_audio_url) {
const shortAudio = createSprite('btn_laba (1)');
shortAudio.setScaleXY(getMaxScale(shortAudio, 100, 82));
shortAudio.x = 470;
shortAudio.y = 70
this["shortAudio"] = shortAudio
this["shortAudioAni"] = this.createAnimation("btn_laba", 4, 500, ()=>{}, true)
this["shortAudioAni"].loop = true;
this["shortAudioAni"].setScaleXY(getMaxScale(this["shortAudioAni"], 100, 82));
this["shortAudioAni"].x = 470;
this["shortAudioAni"].y = 70
bg_2.addChild(this["shortAudioAni"]);
bg_2.addChild(shortAudio);
}
} }
nextPage() { private initQuestion() {
switch (this.data.questionType) {
case 'text':
this.initQuestionText();
break;
if (this.curPic == this.pic2) { case 'pic':
return; this.initQuestionPic();
break;
case 'audio':
this.initQuestionAudio();
break;
case 'video':
this.initQuestionVideo();
break;
} }
}
this.canTouch = false; private initQuestionText() {
const questionLabel = new RichText();
questionLabel.text = this.data.text;
questionLabel.width = this.questionBG.width * 0.95;
questionLabel.x = -questionLabel.width / 2;
questionLabel.y = -28;
questionLabel.fontColor = '#fae0a3';
questionLabel.fontName = 'MMTextBook-Bold';
questionLabel.disH = 5;
questionLabel.fontSize = 50;
this.questionBG.addChild(questionLabel);
}
const moveLen = this.canvasWidth; private initQuestionPic() {
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1); const questionPic = createSprite(this.data.pic_url);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { console.log(questionPic)
this.canTouch = true; questionPic.setScaleXY(getMinScale(questionPic, this.questionBG.width * 0.95, this.questionBG.height * 0.95));
this.curPic = this.pic2; this.questionBG.addChild(questionPic);
});
} }
pic1Clicked() { private initQuestionAudio() {
this.playAudio(this.data.audio_url); const res = {
btnPlay: 'btn_play',
btnPause: 'btn_pause',
barTop: 'bar_top',
barBottom: 'bar_bottom',
barBtn: 'bar_btn',
};
this["bg_3"].visible = true;
this.initAudioPlayer(res);
} }
pic2Clicked() { private initQuestionVideo() {
this.playAudio(this.data.audio_url_2);
const video = new MyVideo();
const initVideoAndBtn = () => {
console.log('in initSize');
video.initVideoElement(this.videoNode.nativeElement);
video.setScaleXY(getMinScale(video, this.questionBG.width * 0.95, this.questionBG.height * 0.95));
video.x = -video.width / 2 * video.scaleX;
video.y = -video.height / 2 * video.scaleY;
video.element.removeEventListener('canplaythrough', initVideoAndBtn);
if (this.videoBtn) {
this.videoBtn.x = video.width / 2;
this.videoBtn.y = video.height / 2;
}
};
initVideoAndBtn();
video.element.onended = () => {
this.videoBtn.visible = true;
video.element.currentTime = 0;
this.refreshVideoState(video.element, true);
}
this.curVideo = video;
this.questionBG.addChild(video);
const videoBtn = this.createVideoBtn();
videoBtn.x = video.width / 2;
videoBtn.y = video.height / 2;
video.addChild(videoBtn);
this.videoBtn = videoBtn;
video.element.src = this.data.video_url;
video.element.load();
video.element.addEventListener('canplaythrough', initVideoAndBtn);
} }
initAudioPlayer(res) {
this.curAudio = this.audioObj[this.data.audio_url];
// this.curAudio.onended = () => {
// this.setAudioState(this.curAudio, false);
// this.curAudio.currentTime = 0;
// }
const audioBG = createSprite('bg_yinpindi');
this.questionBG.addChild(audioBG);
const audioPlayer = this.createAudioPlayer(res);
this.curAudio["playBtn"] = audioPlayer["playBtn"]
audioBG.addChild(audioPlayer);
mapDown(event) {
if (!this.canTouch) { this["audioAni"] = this.createAnimation("btn_yinpin", 4, 500, ()=>{}, true)
return; this["audioAni"].loop = true;
audioBG.addChild(this["audioAni"]);
// this.setAudioProgress(this.progressBarBg, 0);
return audioPlayer;
}
private createAudioPlayer(res) {
const audioPlayer = new MySprite();
// const playBtn = this.createPlayPauseButton(res.btnPlay, res.btnPause);
const playBtn = createSprite('btn_yinpin (1)');
audioPlayer.addChild(playBtn);
audioPlayer['playBtn'] = playBtn;
// const progressBarContainer = this.createProgressBar(res.barTop, res.barBottom, res.barBtn);
// progressBarContainer.x = -this.progressBarBg.width / 2;
// progressBarContainer.y = 80;
// audioPlayer.addChild(progressBarContainer);
return audioPlayer;
}
private createVideoBtn() {
const btn = createSprite('video_play');
const pauseBtn = createSprite('video_pause');
pauseBtn.alpha = 0;
btn['pauseBtn'] = pauseBtn;
btn.addChild(pauseBtn);
return btn;
}
private clickedVideo() {
if (this.videoBtn.visible) {
this.videoBtn.visible = false;
} else {
this.videoBtn.visible = true;
} }
if ( this.checkClickTarget(this.btnLeft) ) { const videoElement = this.curVideo.element;
this.btnLeftClicked(); if (videoElement.paused) {
return; videoElement.play();
this.refreshVideoState(videoElement);
} else {
videoElement.pause();
this.refreshVideoState(videoElement);
} }
}
if ( this.checkClickTarget(this.btnRight) ) { private refreshVideoState(video, isPlay = null) {
this.btnRightClicked(); if (isPlay == null) {
return; isPlay = !video.paused;
} }
if (isPlay) {
this.hide(this.videoBtn['pauseBtn']);
this.show(this.videoBtn);
} else {
this.hide(this.videoBtn);
this.show(this.videoBtn['pauseBtn']);
}
}
if ( this.checkClickTarget(this.pic1) ) { private initAnswer() {
this.pic1Clicked(); if (this.data.answerType == 'text') {
return; this.initTextAnswer();
} else if (this.data.answerType == 'pic') {
this.initPicAnswer();
} else {
this.initPicTextAnswer();
} }
}
if ( this.checkClickTarget(this.pic2) ) { private initTextAnswer() {
this.pic2Clicked(); const offX = 660 * this.mapScale;
return; const offY = 120 * this.mapScale;
const baseX = this.canvasWidth / 2 - offX / 2;
let baseY = this.canvasHeight - 210 * this.mapScale;
if (this.data.answerArr.length < 3) {
baseY += offY / 2;
} }
for (let i = 0; i < this.data.answerArr.length; i++) {
const textAnswer = this.createAnswerText(this.data.answerArr[i], i + 1);
this.answerArr.push(textAnswer);
textAnswer.x = baseX + (i % 2) * offX;
textAnswer.y = baseY;
if (i % 2 === 1) {
baseY += offY;
}
}
} }
mapMove(event) { private initPicTextAnswer() {
const answerNum = this.data.answerArr.length;
const disW = 10 * this.mapScale;
const picW = 300 * this.mapScale;
const baseX = this.canvasWidth / 2 - (picW * answerNum + disW * (answerNum - 1)) / 2 + picW / 2 ;
const baseY = this.canvasHeight - 170 * this.mapScale;
for (let i = 0; i < this.data.answerArr.length; i++) {
const textAnswer = this.createAnswerPicText(this.data.answerArr[i], i + 1);
this.answerArr.push(textAnswer);
textAnswer.x = baseX + i * (picW + disW);
textAnswer.y = baseY;
}
} }
mapUp(event) { private initPicAnswer() {
const answerNum = this.data.answerArr.length;
const disW = 10 * this.mapScale;
const picW = 300 * this.mapScale;
const baseX = this.canvasWidth / 2 - (picW * answerNum + disW * (answerNum - 1)) / 2 + picW / 2 ;
const baseY = this.canvasHeight - 150 * this.mapScale;
for (let i = 0; i < this.data.answerArr.length; i++) {
const textAnswer = this.createAnswerPic(this.data.answerArr[i], i + 1);
this.answerArr.push(textAnswer);
textAnswer.x = baseX + i * (picW + disW);
textAnswer.y = baseY;
}
} }
private initSongShu() {
const songShu = createSprite('bg_songshu1');
songShu.setScaleXY(this.mapScale);
songShu.x = -this.canvasWidth
songShu.y = -this.canvasHeight
this.renderArr.push(songShu);
this["songShu"] = songShu
update() { const songShu_1 = createSprite('bg_songshu2');
songShu_1.visible = false
this["songShu"].songShu_1 = songShu_1
songShu.addChild(songShu_1)
// ---------------------------------------------------------- }
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
private createAnswerText(answerData: any, id) {
const textBg = createSprite('bg_xuan1');
textBg.setScaleXY(this.mapScale);
this.renderArr.push(textBg);
// const textId = createSprite('text_' + id);
// textBg.addChild(textId);
// textId.x = -textBg.width / 2 + 29;
// textId.y = -42;
const label = new Label();
label.text = answerData.text;
label.fontColor = '#c65236';
label.fontSize = 46;
label.fontName = 'MMTextBook-Bold';
label.textAlign = 'center';
label.setMaxSize(textBg.width * 0.86);
label.refreshSize();
label.y = 0;
label.x = 25;
textBg.addChild(label);
textBg['answerRight'] = answerData.answerRight === '1' ? true : false;
if (textBg['answerRight']) {
const rightIcon = createSprite('bg_xuan2');
textBg.addChild(rightIcon, -1);
rightIcon.alpha = 0;
textBg['rightIcon'] = rightIcon;
}
return textBg;
}
this.updateArr(this.renderArr); private clickedAnswer(answerArrElement: any) {
this.canTouch = false
if (answerArrElement.answerRight) {
this.showAnswerRight(answerArrElement);
} else {
this.showAnswerWrong(answerArrElement);
}
}
private showAnswerRight(answerArrElement: any) {
let targetX = null;
let targetY = null;
if(this.data.answerType == 'text') {
targetX = answerArrElement.x + this["songShu"].width / 2 * this.mapScale - answerArrElement.width / 2 * this.mapScale - 55 * this.mapScale;
targetY = answerArrElement.y - this["songShu"].height / 2 * this.mapScale + answerArrElement.height / 2 * this.mapScale;
this["songShu"].x = targetX;
this["songShu"].y = -1 * this["songShu"].height;
} else if(this.data.answerType == "pic") {
targetX = answerArrElement.x + this["songShu"].width / 2 * this.mapScale - answerArrElement.width / 2 * this.mapScale - 65 * this.mapScale;
targetY = answerArrElement.y - this["songShu"].height / 2 * this.mapScale - 10 * this.mapScale;
this["songShu"].x = targetX;
this["songShu"].y = -1 * this["songShu"].height;
} else {
targetX = answerArrElement.x + this["songShu"].width / 2 * this.mapScale - answerArrElement.width / 2 * this.mapScale - 65 * this.mapScale;
targetY = answerArrElement.y - this["songShu"].height / 2 * this.mapScale - 10 * this.mapScale;
this["songShu"].x = targetX;
this["songShu"].y = -1 * this["songShu"].height;
}
this["songShu"].songShu_1.visible = false;
tweenChange(answerArrElement['rightIcon'], {alpha: 1}, 0.5, () => {
this.playAudio("songshu")
tweenChange(this["songShu"], {x: targetX, y: targetY}, 1, () => {
setTimeout(() => {
this["songShu"].songShu_1.visible = true;
answerArrElement.alpha = 0
tweenChange(this["songShu"], {x: targetX, y: -1 * this["songShu"].height}, 1, () => {
this["songShu"].songShu_1.visible = false;
this.canTouch = true;
this.checkGameEnd();
});
}, 500);
});
});
this.playAudio('zhengque');
this.showOvenLight();
}
private showAnswerWrong(answerArrElement: any) {
shake(answerArrElement);
this.playAudio('cuowu');
this.canTouch = true;
}
private checkGameEnd() {
for (let i = 0; i < this.answerArr.length; i++) {
if (this.answerArr[i].rightIcon && this.answerArr[i].rightIcon.alpha == 0) {
return;
}
}
this.gameEnd();
}
private showOvenLight() {
// if (this.ovenLight['tween']) {
// this.ovenLight['tween'].stop();
// }
// this.ovenLight['tween'] = tweenChange(this.ovenLight, {alpha: 1}, 0.7, () => {
// this.ovenLight['tween'] = tweenChange(this.ovenLight, {alpha: 0}, 0.7, () => {
// }, TWEEN.Easing.Cubic.Out);
// }, TWEEN.Easing.Cubic.Out);
}
private createAnswerPic(data: any, id: number) {
const picBg = createSprite('bg_xuan3pic');
picBg.setScaleXY(this.mapScale);
this.renderArr.push(picBg);
// const picIcon = createSprite('pic_icon');
// picBg.addChild(picIcon);
// picIcon.x = -picBg.width / 2 + 30;
// picIcon.y = -picBg.height / 2 + 20;
// const textId = createSprite('text_' + id);
// picIcon.addChild(textId);
// textId.x = -picBg.width / 2 + 27;
// textId.y = -12;
const maxW = 245;
const maxH = 160;
const pic = createSprite(data.pic_url);
pic.setScaleXY(getMinScale(pic, maxW, maxH));
picBg.addChild(pic);
picBg['answerRight'] = data.answerRight === '1' ? true : false;
if (picBg['answerRight']) {
const rightIcon = createSprite('bg_xuan4');
picBg.addChild(rightIcon, -1);
rightIcon.x = -11;
rightIcon.y = -4.5;
rightIcon.alpha = 0;
picBg['rightIcon'] = rightIcon;
}
return picBg;
}
private createAnswerPicText(data: any, id: number) {
const picBg = createSprite('bg_xuan3pic');
picBg.setScaleXY(this.mapScale);
this.renderArr.push(picBg);
const textBg = createSprite('bg_worddi');
textBg.y = 120;
picBg.addChild(textBg, -1)
const label = new Label();
label.text = data.text;
label.fontColor = '#ffeea2';
label.fontSize = 36;
label.fontName = 'MMTextBook-Bold';
label.textAlign = 'center';
label.setMaxSize(textBg.width * 0.86);
label.refreshSize();
label.y = 9;
label.x = 12;
textBg.addChild(label);
const maxW = 245;
const maxH = 160;
const pic = createSprite(data.pic_url);
pic.setScaleXY(getMinScale(pic, maxW, maxH));
picBg.addChild(pic);
picBg['answerRight'] = data.answerRight === '1' ? true : false;
if (picBg['answerRight']) {
const rightIcon = createSprite('bg_xuan4');
picBg.addChild(rightIcon, -1);
rightIcon.x = -11;
rightIcon.y = -4.5;
rightIcon.alpha = 0;
picBg['rightIcon'] = rightIcon;
}
return picBg;
}
private gameEnd() {
this.showEndPetal();
this.showWellDone();
this.canTouch = false;
}
showWellDone() {
const done = createSprite('bg_exc');
done.setScaleXY(0)
done.x = this.canvasWidth / 2
done.y = this.canvasHeight / 2
this.endPageArr.push(done);
const start1 = createSprite('icon_star1');
start1.x = 225
start1.y = 170
done.addChild(start1)
const start2 = createSprite('icon_star2');
start2.x = -180
start2.y = -10
done.addChild(start2)
tweenChange(done, {scaleX: this.mapScale, scaleY: this.mapScale}, 0.5, ()=>{
jelly(start1, 0.5)
jelly(start2, 0.5)
})
}
showEndPetal() {
this.setMaskLayer();
this.petalTime = 0;
this.showPetalFlag = true;
this.addPetal();
this.playAudio('sahua');
setTimeout(() => {
this.showPetalFlag = false;
}, 6000);
}
setMaskLayer() {
const shapeRect = new ShapeRect();
shapeRect.fillColor = '#000000';
shapeRect.width = this.canvasWidth;
shapeRect.height = this.canvasHeight;
shapeRect.alpha = 0.5;
this.endPageArr = [shapeRect];
}
addPetal() {
if (!this.showPetalFlag) {
return;
}
const petal = this.getPetal();
this.endPageArr.push(petal);
moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.endPageArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.addPetal();
}, 0 + this.petalTime);
this.petalTime += 5;
}
getPetal() {
const petal = new MySprite();
const id = Math.ceil( Math.random() * 3 );
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = Math.random() * this.canvasWidth;
petal.x = randomX;
petal.y = -petal.height / 2 * petal.scaleY;
const randomT = 1 + Math.random() * 3;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
} }
private showCakeAnima() {
const cake = createSprite('finish_cake');
cake.x = this.canvasWidth / 2;
cake.y = this.canvasHeight / 2;
cake.setScaleXY(this.mapScale);
this.endPageArr.push(cake);
const light = createSprite('finish_light');
cake.addChild(light, -1);
rotateItem(light, 180, 4, null, null, true);
jellyPop(cake, 1);
}
} }
const res = [ const res = [
['bg_bg', "assets/play/bg_bg.png"],
// ['bg', "assets/play/bg.jpg"], ['bg_bgdi', "assets/play/bg_bgdi.png"],
['btn_left', "assets/play/btn_left.png"], ['bg_bgsky', "assets/play/bg_bgsky.png"],
['btn_right', "assets/play/btn_right.png"], ['bg_bgtree', "assets/play/bg_bgtree.png"],
// ['text_bg', "assets/play/text_bg.png"], ['bg_tigan', "assets/play/bg_tigan.png"],
['bg_yinpindi', "assets/play/bg_yinpindi.png"],
['petal_1', "assets/play/particle/1.png"],
['petal_2', "assets/play/particle/2.png"],
['petal_3', "assets/play/particle/3.png"],
['btn_yinpin (1)', "assets/play/btn_yinpin (1).png"],
['btn_yinpin (2)', "assets/play/btn_yinpin (2).png"],
['btn_yinpin (3)', "assets/play/btn_yinpin (3).png"],
['btn_yinpin (4)', "assets/play/btn_yinpin (4).png"],
['btn_laba (1)', "assets/play/btn_laba (1).png"],
['btn_laba (2)', "assets/play/btn_laba (2).png"],
['btn_laba (3)', "assets/play/btn_laba (3).png"],
['btn_laba (4)', "assets/play/btn_laba (4).png"],
['bg_xuan1', "assets/play/bg_xuan1.png"],
['bg_xuan2', "assets/play/bg_xuan2.png"],
['bg_songshu1', "assets/play/bg_songshu1.png"],
['bg_songshu2', "assets/play/bg_songshu2.png"],
['bg_xuan3pic', "assets/play/bg_xuan3pic.png"],
['bg_xuan4', "assets/play/bg_xuan4.png"],
['bg_worddi', "assets/play/bg_worddi.png"],
['bg_exc', "assets/play/bg_exc.png"],
['icon_star1', "assets/play/icon_star1.png"],
['icon_star2', "assets/play/icon_star2.png"],
['bg_yinpin', "assets/play/bg_yinpin.png"],
['demo_main', "assets/play/demo_main.png"],
]; ];
const resAudio = [ const resAudio = [
['cuowu', "assets/play/music/cuowu.mp3"],
['click', "assets/play/music/click.mp3"], ['sahua', "assets/play/music/sahua.mp3"],
['songshu', "assets/play/music/songshu.mp3"],
['zhengque', "assets/play/music/zhengque.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
...@@ -4,6 +4,12 @@ ...@@ -4,6 +4,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>NgOne</title> <title>NgOne</title>
<base href="/"> <base href="/">
<style>
html, body{
width: 100%;
height: 100%;
}
</style>
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">--> <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
......
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
\ No newline at end of file
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
] ]
}, },
"angularCompilerOptions": { "angularCompilerOptions": {
"enableIvy": false,
"fullTemplateTypeCheck": true, "fullTemplateTypeCheck": true,
"strictInjectionParameters": true "strictInjectionParameters": true
} }
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"rules": { "rules": {
"array-type": false, "array-type": false,
"arrow-parens": false, "arrow-parens": false,
"no-string-literal": false,
"deprecation": { "deprecation": {
"severity": "warning" "severity": "warning"
}, },
......
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