Commit 6968ff34 authored by hw_023_test's avatar hw_023_test

test commit

parent 3695f7ce
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
"cli": {
"analytics": false
}
} }
\ No newline at end of file
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"node-sass": "^4.14.1",
"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",
......
...@@ -22,8 +22,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -22,8 +22,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Input() @Input()
withRmBtn = false; withRmBtn = false;
uploadUrl; uploadUrl = (window as any).courseware.uploadUrl();
uploadData; uploadData = (window as any).courseware.uploadData();
@Input() @Input()
needRemove = false; needRemove = false;
...@@ -55,13 +55,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -55,13 +55,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
constructor( private nzMessageService: NzMessageService ) { constructor( private nzMessageService: NzMessageService ) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
} }
init() { init() {
......
...@@ -29,19 +29,10 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges { ...@@ -29,19 +29,10 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
@Input() @Input()
disableUpload = false; disableUpload = false;
uploadUrl; uploadUrl = (<any> window).courseware.uploadUrl();
uploadData; uploadData = (<any> window).courseware.uploadData();
constructor(private nzMessageService: NzMessageService) { constructor(private nzMessageService: NzMessageService) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
} }
ngOnChanges() { ngOnChanges() {
if (!this.picItem) { if (!this.picItem) {
......
...@@ -47,8 +47,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -47,8 +47,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
item: any; item: any;
// videoItem = null; // videoItem = null;
uploadUrl; uploadUrl = (window as any).courseware.uploadUrl();
uploadData; uploadData = (window as any).courseware.uploadData();
constructor(private nzMessageService: NzMessageService, constructor(private nzMessageService: NzMessageService,
private sanitization: DomSanitizer private sanitization: DomSanitizer
...@@ -58,16 +58,6 @@ export class UploadVideoComponent implements OnChanges, OnDestroy { ...@@ -58,16 +58,6 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
this.uploading = false; this.uploading = false;
this.videoFile = null; this.videoFile = null;
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
} }
ngOnChanges() { ngOnChanges() {
// if (!this.videoFile || this.showUploadBtn) { // if (!this.videoFile || this.showUploadBtn) {
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="model-content"> <div class="model-content">
<div class="question-box">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <h2>请填写题目以及对应音频</h2>
<div class="question-content">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div class="question-text">
<input type="text" nz-input placeholder="点击输入题目" [(ngModel)]="item.contentObj.question_text" (blur)="save()">
</div>
<div class="question-audio">
<app-audio-recorder
[audioUrl] = "item.contentObj.question_audio"
(audioUploaded) = "onQAudioUploadSuccessByItem($event,item)"
></app-audio-recorder>
</div>
</div>
</div>
<div class="split-line"></div>
<div class="card">
<h2>请上传图片,上传音频并按顺序填写单词及相对应音频</h2>
<div *ngFor="let it of picArr;let i = index" nz-col nzSpan = "8" class="card-contents">
<div class="card-box">
<h5 style="font-weight: 700;"> 第{{i+1}}页 </h5>
<div class="card-content">
<div class="card-pic">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.pic_url" [picUrl] = "it['pic_url']"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" (imageUploaded) = "onImageUploadSuccessByItem($event,it)"
></app-upload-image-with-preview> ></app-upload-image-with-preview>
</div>
<div class="card-audio">
<app-audio-recorder <app-audio-recorder
[audioUrl]="item.audio_url" [audioUrl] = "it.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" (audioUploaded) = "onAudioUploadSuccessByItem($event,it)"
class="audio"
></app-audio-recorder> ></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
</div> </div>
<div class="card-text">
<div class="card-text-item" *ngFor="let word of it.wordArr;let j = index">
<input type="text" nz-input placeholder="点击输入单词" [(ngModel)]="word.text" (blur)="saveItem()" class="item">
<app-audio-recorder
[audioUrl] = "word.audio_url"
(audioUploaded) = "onAudioUploadSuccessByItem($event,word)"
class="item"
></app-audio-recorder>
</div>
<button nz-button nzType="primary" class="add-word-btn" (click)="addWord(it)">添加单词</button>
</div>
</div>
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">删除这一页</button>
</div>
</div>
</div>
<div nz-col nzSpan="1" class="add-btn-box">
<button nz-button nzType="dashed" class="add-btn" (click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加一组
</button>
</div>
</div> </div>
@import '../style/common_mixin';
.model-content {
width: 100%;
max-width: 1080px;
height: auto;
box-sizing: border-box;
padding: 20px;
border: 1px dashed #1E90FF;
overflow: hidden;
margin: 0 auto;
.question-box{
.question-content{
.question-text{
margin-bottom: 10px;
}
}
}
.split-line{
width: 100%;
height: 1px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px dashed #1E90FF;
}
.card{
.card-contents{
width: 100%;
margin-top: 10px;
.card-box{
// width: 30vw;
width: 100%;
border: 1px dashed #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 5px;
.card-content{
width: 90%;
height: 100%;
.card-pic{
width: 100%;
margin: auto;
}
.card-audio{
width: 100%;
margin-top: 10px;
display: flex;
justify-content: center;
}
.card-text{
width: 100%;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
.card-text-item{
width: 100%;
display: flex;
input{
margin-bottom: 10px;
margin-right: 10px;
}
}
.add-word-btn{
width: 100%;
}
}
}
}
}
}
.add-btn-box{
width: 100%;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
.add-btn{
}
}
}
...@@ -5,17 +5,40 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -5,17 +5,40 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
picArr = [];
// wordArr = [];
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = 'test_0011';
// 储存对象 // 储存对象
item; _item: any;
KEY = 'test_0011';
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
// @Input()
set item(item) {
this._item = item;
// this.init();
}
get item() {
return this._item;
}
@Output()
update = new EventEmitter();
constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -23,70 +46,216 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -23,70 +46,216 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.contentObj = {};
// 获取存储的数据 const getData = (<any> window).courseware.getData;
(<any> window).courseware.getData((data) => { getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
// this.item.contentObj.picArr.forEach(ele => {
// ele.wordArr = [];
// console.log('item', ele);
// });
} else {
this.item = {};
} }
if ( !this.item.contentObj ) {
this.item.contentObj = {};
}
// console.log('~data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
}, this.saveKey); }, this.KEY);
// this.initData();
} }
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
} }
init() { init() {
if (this.item.contentObj.picArr) {
this.picArr = this.item.contentObj.picArr;
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
}
// if (this.item.contentObj.picArr.wordArr) {
// this.wordArr = this.item.contentObj.picArr.wordArr;
// } else {
// this.wordArr = this.getDefaultPicArr();
// this.item.contentObj.picArr.wordArr = this.wordArr;
// }
console.log('item:' , this.item);
// console.log('This', this.item.contentObj.picArr);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
}
getDefaultPicArr() {
const arr = [];
// for (let i = 0; i < 4; i ++) {
// const data = {};
// data['pic_url'] = '';
//
// const soundArr = [];
// for (let i = 0; i < 3; i++) {
// const tmpData = {};
// tmpData['answer'] = false;
// tmpData['audio_url'] = '';
// soundArr.push(tmpData);
// }
// data['soundArr'] = soundArr;
//
// arr.push(data);
// }
return arr;
}
initData() {
}
deleteItem(data) {
const index = this.picArr.indexOf(data);
if (index !== -1) {
this.picArr.splice(index, 1);
} }
// this.update.emit(this.item);
this.save();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
onImageUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_pic_url'] = e.url;
} else {
item.pic_url = e.url;
}
this.save(); this.save();
// this.update.emit(this.item);
// console.log('this.item: ', this.item);
} }
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
onAudioUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_audio_url'] = e.url;
} else {
item.audio_url = e.url;
}
// this.update.emit(this.item);
this.save(); this.save();
} }
onQAudioUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_contentObj.question_audio'] = e.url;
} else {
item.contentObj.question_audio = e.url;
}
// this.update.emit(this.item);
this.save();
}
/**
* 储存数据 addPic() {
*/ this.picArr.push({
pic_url: '',
audio_url: '',
// text: '',
// radioValue: 'true',
wordArr: [],
});
this.saveItem();
}
addWord(data) {
// this.wordArr.push({
// text: '',
// });
const index = this.picArr.indexOf(data);
console.log(index);
// this.picArr.forEach(ele => {
// ele.wordArr.push({text: ''});
// });
this.picArr[index].wordArr.push({text: ''});
this.saveItem();
}
// radioClick(it, radioValue) {
// it.radioValue = radioValue;
// this.saveItem();
// }
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
saveItem() {
// this.update.emit(this.item);
console.log('start');
this.save();
console.log(this.picArr);
}
saveNew(i) {
if(this.item.contentObj.picArr[i].optionType === "A"){
delete this.item.contentObj.picArr[i].pic_url
} else {
delete this.item.contentObj.picArr[i].text
}
(<any> window).courseware.setData(this.item, null, this.KEY);
}
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
} }
/**
* 刷新 渲染页面
*/
refresh() { refresh() {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
......
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, ɵConsole} from '@angular/core';
import { import {
Label, Label,
MySprite, tweenChange, MySprite,
tweenChange,
RichText,
randomSortByArr,
ShapeRect,
LineRect,
removeItemFromArr,
hideItem,
shake,
moveItem,
showPopParticle,
showItem,
rotateItem,
ShapeCircle,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime, flatMap} 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',
styleUrls: ['./play.component.css'] styleUrls: ['./play.component.scss']
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
/**
* 数据
*/
_data;
soundID: number;
wordList: any[];
optionRectArrBak: any[];
@Input()
set data(data) {
this._data = data;
}
get data() {
return this._data;
}
@Input()
sid;
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', {static: true }) wrap: ElementRef;
// 数据 downFlag;
data; endPageArr: any[];
endRectArr;
optionRectArr;
optionBgArr;
curOptionTarget;
curOptionRect;
bg: any;
hotZoneArr: any[];
bgLayer: MySprite;
gameEndFlag: boolean;
curPageIndex: number;
ctx; ctx;
fps = 0;
frametime = 0; // 上一帧动画的时间, 两帧时间差
canvasWidth = 1280; // canvas实际宽度 canvasWidth = 1280; // canvas实际宽度
canvasHeight = 720; // canvas实际高度 canvasHeight = 720; // canvas实际高度
canvasBaseW = 1280; // canvas 资源预设宽度 canvasBaseW = 1280; // canvas 资源预设宽度
canvasBaseH = 720; // canvas 资源预设高度 canvasBaseH = 720; // canvas 资源预设高度
mx; // 点击x坐标 mx; // 点击x坐标
my; // 点击y坐标 my; // 点击y坐标
// 资源
rawImages = new Map(res); rawImages = new Map(res);
rawAudios = new Map(resAudio); rawAudios = new Map(resAudio);
images = new Map(); images = new Map();
animationId: any; animationId: any;
winResizeEventStream = new Subject(); winResizeEventStream = new Subject();
audioObj = {}; audioObj = {};
renderArr; renderArr;
mapScale = 1; mapScale = 1;
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'test_0011';
KEY = 'test_0011';
// 将被删除的
btnLeft; btnLeft;
btnRight; btnRight;
pic1; pic1;
pic2; pic2;
canTouch = true; canTouch = true;
curPic; curPic;
bgArr;
wordArr;
soundClose;
soundOpen;
showSoundFlag;
audio;
picArr;
picIndex;
curData;
space = 200;
audioPlayer = new Audio();
audioRect = new Audio();
audioWord = new Audio();
audioClick = new Audio();
audioFinish = new Audio();
spotList = [];
disW;
particleLayer;
showPetalFlag;
itemW = 140;
itemH = 75;
topRect;
optionRect;
ObjArr = [];
typeA = [];
typeB = [];
typeC = [];
question;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
ngOnInit() { ngOnInit() {
/**
this.data = {}; * 获取数据
*/
// 获取数据
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} else {
this.data = {};
}
if (!this.data.contentObj) {
this.data.contentObj = {};
} }
// console.log('data:' , data);
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示 // 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData(); this.initDefaultData();
// 初始化 音频资源 // 初始化 音频资源
this.initAudio(); this.initAudio();
// 初始化 图片资源 // 初始化 图片资源
this.initImg(); this.initImg();
// 开始预加载资源 // 开始预加载资源
this.load(); this.load();
}, this.saveKey); }, this.saveKey);
} }
ngOnDestroy() { ngOnDestroy() {
window['curCtx'] = null; window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
this.gameEndFlag = true;
} }
load() { load() {
/**
// 预加载资源 * 预加载资源
*/
this.loadResources().then(() => { this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data); window["air"].hideAirClassLoading(this.KEY, this.data);
this.init(); this.init();
this.update(); this.update();
}); });
} }
init() { init() {
this.initCtx(); this.initCtx();
this.initData(); this.initData();
this.initView(); this.initView();
} }
initCtx() { initCtx() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
this.ctx = this.canvas.nativeElement.getContext('2d'); this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth; this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight; this.canvas.nativeElement.height = this.canvasHeight;
window['curCtx'] = this.ctx; window['curCtx'] = this.ctx;
} }
gameEnd() {
this.showEndPatal();
console.log('finish');
const finishLink: any = this.rawAudios.get('finish');
this.audioFinish.src = finishLink;
this.audioFinish.load();
this.audioFinish.play();
this.playAudio('finish');
setTimeout(( ) => {
this.showPetalFlag = false;
}, 5000);
}
updateItem(item) { updateItem(item) {
if (item) { if (item) {
...@@ -163,22 +211,95 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -163,22 +211,95 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
initHotZone() {
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
}
let oldBgRect = this.data.contentObj.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
this.hotZoneArr = [];
const arr = this.data.contentObj.hotZoneItemArr;
if (!arr) return;
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
const hotZone = this.getHotZoneItem(data);
hotZone.alpha = 0;
this.hotZoneArr.push(hotZone);
}
}
getHotZoneItem(data) {
const saveRect = data.rect;
const item = new ShapeRect(this.ctx);
item.setSize(saveRect.width, saveRect.height);
item.x = saveRect.x ;
item.y = saveRect.y ;
item['data'] = data;
this.renderArr.push(item);
return item;
}
showEndPatal() {
this.endPageArr = [];
this.showPetalFlag = true;
this.addPetal();
}
stopEndPatal() {
this.endPageArr = [];
this.showPetalFlag = false;
}
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();
}, 200);
}
getPetal() {
const petal = new MySprite(this.ctx);
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 = 2 + Math.random() * 5;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
initListener() { initListener() {
this.winResizeEventStream this.winResizeEventStream
.pipe(debounceTime(500)) .pipe(debounceTime(500))
.subscribe(data => { .subscribe(data => {
this.renderAfterResize(); this.renderAfterResize();
}); });
// ---------------------------------------------
const setParentOffset = () => { const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect(); const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left; this.canvasLeft = rect.left;
...@@ -194,21 +315,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -194,21 +315,17 @@ export class PlayComponent implements OnInit, OnDestroy {
this.mx = event.touches[0].pageX - this.canvasLeft; this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop; this.my = event.touches[0].pageY - this.canvasTop;
}; };
const setMxMyByMouse = (event) => { const setMxMyByMouse = (event) => {
this.mx = event.offsetX; this.mx = event.offsetX;
this.my = event.offsetY; this.my = event.offsetY;
}; };
// ---------------------------------------------
let firstTouch = true; let firstTouch = true;
const touchDownFunc = (e) => { const touchDownFunc = (e) => {
if (firstTouch) { if (firstTouch) {
firstTouch = false; firstTouch = false;
removeMouseListener(); removeMouseListener();
} }
console.log('touch down');
setMxMyByTouch(e); setMxMyByTouch(e);
this.mapDown(e); this.mapDown(e);
}; };
...@@ -220,7 +337,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -220,7 +337,6 @@ export class PlayComponent implements OnInit, OnDestroy {
setMxMyByTouch(e); setMxMyByTouch(e);
this.mapUp(e); this.mapUp(e);
}; };
const mouseDownFunc = (e) => { const mouseDownFunc = (e) => {
if (firstTouch) { if (firstTouch) {
firstTouch = false; firstTouch = false;
...@@ -237,10 +353,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -237,10 +353,7 @@ export class PlayComponent implements OnInit, OnDestroy {
setMxMyByMouse(e); setMxMyByMouse(e);
this.mapUp(e); this.mapUp(e);
}; };
const element = this.canvas.nativeElement; const element = this.canvas.nativeElement;
const addTouchListener = () => { const addTouchListener = () => {
element.addEventListener('touchstart', touchDownFunc); element.addEventListener('touchstart', touchDownFunc);
element.addEventListener('touchmove', touchMoveFunc); element.addEventListener('touchmove', touchMoveFunc);
...@@ -253,7 +366,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -253,7 +366,6 @@ export class PlayComponent implements OnInit, OnDestroy {
element.removeEventListener('touchend', touchUpFunc); element.removeEventListener('touchend', touchUpFunc);
element.removeEventListener('touchcancel', touchUpFunc); element.removeEventListener('touchcancel', touchUpFunc);
}; };
const addMouseListener = () => { const addMouseListener = () => {
element.addEventListener('mousedown', mouseDownFunc); element.addEventListener('mousedown', mouseDownFunc);
element.addEventListener('mousemove', mouseMoveFunc); element.addEventListener('mousemove', mouseMoveFunc);
...@@ -264,21 +376,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -264,21 +376,17 @@ export class PlayComponent implements OnInit, OnDestroy {
element.removeEventListener('mousemove', mouseMoveFunc); element.removeEventListener('mousemove', mouseMoveFunc);
element.removeEventListener('mouseup', mouseUpFunc); element.removeEventListener('mouseup', mouseUpFunc);
}; };
addMouseListener(); addMouseListener();
addTouchListener(); addTouchListener();
} }
playAudio(key, now = false, callback = null) { playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
if (audio) { if (audio) {
if (now) { if (now) {
audio.pause(); audio.pause();
audio.currentTime = 0; audio.currentTime = 0;
} }
if (callback) { if (callback) {
audio.onended = () => { audio.onended = () => {
callback(); callback();
...@@ -288,29 +396,51 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -288,29 +396,51 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
showArr(arr) {
if (!arr) {
return;
}
for (let i = 0; i < arr.length; i++) {
arr[i].visible = true;
}
}
hideArr(arr) {
if (!arr) {
return;
}
for (let i = 0; i < arr.length; i++) {
arr[i].visible = false;
}
}
IsPC() {
if (window['ELECTRON']) {
return false; // 封装客户端标记
}
if (document.body.ontouchmove !== undefined && document.body.ontouchmove !== undefined) {
return false;
} else {
return true;
}
}
loadResources() { loadResources() {
const pr = []; const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片 this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value) const p = this.preload(value)
.then(img => { .then(img => {
this.images.set(key, img); this.images.set(key, img);
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
pr.push(p); pr.push(p);
}); });
this.rawAudios.forEach((value, key) => {// 预加载音频 this.rawAudios.forEach((value, key) => {// 预加载音频
const a = this.preloadAudio(value) const a = this.preloadAudio(value)
.then(() => { .then(() => {
// this.images.set(key, img); // this.images.set(key, img);
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
pr.push(a); pr.push(a);
}); });
return Promise.all(pr); return Promise.all(pr);
...@@ -319,7 +449,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -319,7 +449,6 @@ export class PlayComponent implements OnInit, OnDestroy {
preload(url) { preload(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const img = new Image(); const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img); img.onload = () => resolve(img);
img.onerror = reject; img.onerror = reject;
img.src = url; img.src = url;
...@@ -340,21 +469,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -340,21 +469,14 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
} }
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init(); this.init();
} }
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) { if (this.checkPointInRect(this.mx, this.my, rect)) {
return true; return true;
} }
...@@ -362,11 +484,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -362,11 +484,8 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
getWorlRect(target) { getWorlRect(target) {
let rect = target.getBoundingBox(); let rect = target.getBoundingBox();
if (target.parent) { if (target.parent) {
const pRect = this.getWorlRect(target.parent); const pRect = this.getWorlRect(target.parent);
rect.x += pRect.x; rect.x += pRect.x;
rect.y += pRect.y; rect.y += pRect.y;
...@@ -383,28 +502,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -383,28 +502,18 @@ export class PlayComponent implements OnInit, OnDestroy {
return false; return false;
} }
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj; const audioObj = this.audioObj;
if (url == null) { if (url == null) {
url = key; url = key;
} }
this.rawAudios.set(key, url); this.rawAudios.set(key, url);
const audio = new Audio(); const audio = new Audio();
audio.src = url; audio.src = url;
audio.load(); audio.load();
audio.loop = loop; audio.loop = loop;
audio.volume = vlomue; audio.volume = vlomue;
audioObj[key] = audio; audioObj[key] = audio;
if (callback) { if (callback) {
audio.onended = () => { audio.onended = () => {
callback(); callback();
...@@ -416,264 +525,965 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -416,264 +525,965 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
// ======================================================编写区域========================================================================== // ======================================================编写区域==========================================================================
/** /**
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
initDefaultData() { initDefaultData() {
let picArr = this.data.contentObj.picArr;
if (!this.data.pic_url) { if (!picArr || picArr.length <= 0) {
this.data.pic_url = 'assets/play/default/pic.jpg'; picArr = [{
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; pic_url: 'assets/play/default/pic.jpg',
}];
this.data.contentObj.picArr = picArr;
} }
} }
/** /**
* 添加预加载图片 * 添加预加载图片
*/ */
initImg() { initImg() {
const contentObj = this.data.contentObj;
this.addUrlToImages(this.data.pic_url); if (contentObj) {
this.addUrlToImages(this.data.pic_url_2); const picArr = this.data.contentObj.picArr;
if (picArr) {
for (let i = 0; i < picArr.length; i++ ) {
const picUrl = picArr[i].pic_url;
if (picUrl) {
this.rawImages.set(picUrl, picUrl);
}
}
}
}
} }
/** /**
* 添加预加载音频 * 添加预加载音频
*/ */
initAudio() { initAudio() {
const contentObj = this.data.contentObj;
// 音频资源 const picArr = contentObj.picArr;
this.addUrlToAudioObj(this.data.audio_url); if (contentObj) { return; }
this.addUrlToAudioObj(this.data.audio_url_2); const addUrlToAudioObj = (audioUrl) => {
if (audioUrl) {
// 音效 const audio = new Audio();
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); audio.src = audioUrl;
audio.load();
this.audioObj[audioUrl] = audio;
}
};
if (picArr) {
for (let i = 0; i < picArr.length; i++) {
addUrlToAudioObj(picArr[i].audio_url);
}
}
addUrlToAudioObj(contentObj.audio_url);
const audioObj = this.audioObj;
const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => {
const audio = new Audio();
audio.src = url;
audio.load();
audio.loop = loop;
audio.volume = vlomue;
audioObj[key] = audio;
if (callback) {
audio.onended = () => {
callback();
};
}
};
addOneAudio('finish', this.rawAudios.get('finish'), 0.5);
addOneAudio('star', this.rawAudios.get('star'), 1);
addOneAudio('wrong', this.rawAudios.get('wrong'), 1);
addOneAudio('click', this.rawAudios.get('click'), 1);
} }
/** /**
* 初始化数据 * 初始化数据
*/ */
initData() { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
const sx = this.canvasWidth / this.canvasBaseW; const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH; const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
this.renderArr = [];
this.canTouch = true;
this.downFlag = false;
this.showSoundFlag = false;
this.endPageArr = [];
this.endRectArr = [];
this.curPageIndex = 0;
if (!this.data.contentObj.picArr) {
this.data.contentObj.picArr = [];
}
this.picArr = this.data.contentObj.picArr;
this.picArr.forEach(ele => {
for (let i = 0; i < ele.wordArr.length; i++) {
ele.wordArr[i].id = i;
}
});
this.picIndex = 0;
}
// this.mapScale = sx; /**
// this.mapScale = sy; * 初始化试图
*/
initView() {
this.initBg();
this.initTitle();
this.initCard();
this.initSpot();
this.initOptions();
this.initSound();
this.defaultShow();
this.isHideCheck();
this.typeA[0]['isHide'] = false;
this.typeA[0].alpha = 1;
}
/**
* 界面背景图片
*/
initBg() {
this.bgArr = [];
const bg = new MySprite();
bg.init(this.images.get('Rectangle@2x'));
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(1);
this.renderArr.push(bg);
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
const particleLayer = new MySprite();
particleLayer.width = this.canvasWidth;
particleLayer.height = this.canvasHeight;
this.particleLayer = particleLayer;
}
this.renderArr = []; initTitle() {
const titleBox = new ShapeRect();
titleBox.init();
titleBox.fillColor = '#ffffff';
titleBox.setSize(this.canvasBaseW, 130 * this.mapScale);
this.renderArr.push(titleBox);
titleBox.alpha = 0;
const panel = new MySprite();
panel.init(this.images.get('Rectangle_3@2x'));
panel.setScaleXY(this.mapScale * .5);
panel.x = 80 * this.mapScale;
panel.y = 30 * this.mapScale;
this.renderArr.push(panel);
titleBox.addChild(panel);
const richText1 = new Label();
richText1.text = 'C';
richText1.fontName = 'BRLNSDB';
richText1.textAlign = 'center';
richText1.fontSize = 90 * this.mapScale;
richText1.fontColor = '#ffffff';
richText1.fontWeight = 300 * this.mapScale;
panel.addChild(richText1);
const richText2 = new Label();
const sx = this.canvasWidth / richText2.width;
const sy = this.canvasHeight / richText2.height;
const s = Math.max(sx, sy);
// richText2.setScaleXY(1);
richText2.setScaleXY(s);
richText2.text = this.data.contentObj.question_text;
richText2.fontName = 'BRLNSDB';
richText2.fontSize = 40 * this.mapScale;
richText2.fontColor = '#000000';
richText2.fontWeight = 300;
richText2.textAlign = 'left';
richText2.x = 130 * this.mapScale;
richText2.y = 30 * this.mapScale;
this.renderArr.push(richText2);
this.question = titleBox;
titleBox.addChild(richText2);
}
initCard() {
this.createCard();
}
createCard() {
const topH = 60 * this.mapScale;
const bottomH = 220 * this.mapScale;
const maxH = this.canvasHeight - topH - bottomH;
const maxW = this.canvasWidth * 0.9;
const card = new MySprite(this.ctx);
card.setScaleXY(this.mapScale);
card.anchorY = 1;
let targetY = this.canvasHeight - bottomH;
if (this.canvasHeight - bottomH > card.height * card.scaleY) {
targetY = card.height * card.scaleY;
}
card.x = this.canvasWidth / 2;
card.y = this.canvasHeight / 2 - 100 * this.mapScale;
card.setScaleXY(.5 * this.mapScale);
this.addPic(card);
this.renderArr.push(card);
}
addPic(card) {
this.typeA = [];
for (let i = 0; i < this.picArr.length; i++) {
const curData = this.picArr[i];
const pic = new MySprite(this.ctx);
pic.init(this.images.get(curData.pic_url));
pic['type'] = 'A';
pic['isHide'] = true;
this.typeA.push(pic);
card.addChild(pic);
}
} }
initSpot() {
this.spotList = [];
const picArr = this.data.contentObj.picArr;
const arr = this.picArr;
let itemW = this.itemW;
let disW = 10;
let totalW = 0;
if (arr.length <= 8) {
totalW = (itemW + disW) * this.picArr.length;
} else {
totalW = (itemW + disW) * 8;
itemW = totalW / this.picArr.length / 15 * 14;
}
disW = itemW / 14;
totalW *= this.mapScale;
itemW *= this.mapScale;
disW *= this.mapScale;
/** const itemH = itemW / this.itemW * this.itemH;
* 初始化试图 const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2;
*/
initView() {
const disH = 100 * this.mapScale;
const offY = this.canvasHeight - (disH) * 3 + itemH / 2;
this.initPic(); this.disW = disW;
const bottomH = 220 * this.mapScale;
let targetY = this.canvasHeight - bottomH;
this.initBottomPart(); for (let i = 0; i < picArr.length; i++) {
const spot = new ShapeCircle(this.ctx);
if (this.canvasHeight - bottomH > spot.height * spot.scaleY) {
targetY = spot.height * spot.scaleY;
}
spot.init();
spot.setScaleXY(this.mapScale * 0.6);
spot.x = offX + i * (itemW + disW);
spot.y = offY;
spot['isChange'] = false;
spot.fillColor = '#832F27';
spot.setRadius(40);
this.renderArr.push(spot);
this.space += 120;
const richText3 = new Label();
richText3.text = (i + 1).toString();
richText3.fontName = 'BRLNSDB';
richText3.fontSize = 65 * this.mapScale;
richText3.fontColor = '#FFFFFF';
richText3.textAlign = 'center';
spot.addChild(richText3);
this.spotList.push(spot);
}
} }
initBottomPart() { isHideCheck() {
for (let i = 0; i < this.typeA.length; i++) {
if (this.typeA[i]['isHide'] == true) {
this.typeA[i].alpha = 0;
} else {
this.typeA[i].alpha = 1;
}
}
for (let i = 0; i < this.spotList.length; i++) {
if (this.spotList[i]['isChange'] == true) {
this.spotList[i]['fillColor'] = '#FFFFFF';
this.spotList[i].children[1]['fontColor'] = '#000000';
this.spotList[i]['radius'] = '48';
} else {
this.spotList[i]['fillColor'] = '#832F27';
this.spotList[i].children[1]['fontColor'] = '#FFFFFF';
this.spotList[i]['radius'] = '40';
}
}
}
const btnLeft = new MySprite(); byTypeChange(num) {
btnLeft.init(this.images.get('btn_left')); for (let i = 0; i < this.typeA.length; i++) {
btnLeft.x = this.canvasWidth - 150 * this.mapScale; this.typeA[i]['isHide'] = true;
btnLeft.y = this.canvasHeight - 100 * this.mapScale; }
btnLeft.setScaleXY(this.mapScale); for (let i = 0; i < this.spotList.length; i++) {
this.spotList[i]['isChange'] = false;
}
this.renderArr.push(btnLeft); for (let i = 0; i < this.typeB.length; i++) {
if (this.typeB[i]['num'] == num) {
this.typeB[i].alpha = 1;
this.typeB[i].visible = true;
} else {
this.typeB[i].alpha = 0;
this.typeB[i].visible = false;
}
}
for (let i = 0; i < this.typeC.length; i++) {
if (this.typeC[i]['num'] == num) {
this.typeC[i].alpha = 1;
this.typeC[i].visible = true;
} else {
this.typeC[i].alpha = 0;
this.typeC[i].visible = false;
}
}
this.btnLeft = btnLeft; this.typeA[num]['isHide'] = false;
this.spotList[num]['isChange'] = true;
}
initOptions() {
this.wordArr = [];
this.typeB = [];
this.typeC = [];
for ( let i = 0; i < this.picArr.length; i++ ) {
this.wordArr.push(this.picArr[i].wordArr);
}
const btnRight = new MySprite(); for (let j = 0; j < this.wordArr.length; j++) {
btnRight.init(this.images.get('btn_right')); this.wordList = randomSortByArr(this.wordArr[j]);
btnRight.x = this.canvasWidth - 50 * this.mapScale; const arr = this.wordList;
btnRight.y = this.canvasHeight - 100 * this.mapScale; let itemW = this.itemW + 7;
btnRight.setScaleXY(this.mapScale); let disW = 10;
let totalW = 0;
if (arr.length <= 8) {
totalW = itemW * arr.length + disW * (arr.length - 1);
} else {
totalW = (itemW + disW) * 8;
itemW = totalW / this.wordList.length / 15 * 14;
}
this.renderArr.push(btnRight); disW = itemW / 14;
totalW *= this.mapScale;
itemW *= this.mapScale;
disW *= this.mapScale;
const itemH = itemW / this.itemW * this.itemH;
const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2;
const disH = 100 * this.mapScale;
const offY = this.canvasHeight - (disH) * 2 + itemH / 2;
this.disW = disW;
for (let k = 0; k < arr.length; k++) {
const baseX = offX + k * (itemW + disW);
const data = arr[k];
const optionRect = new ShapeRect();
optionRect.init();
optionRect.fillColor = '#ffffff';
optionRect.setSize(itemW, itemH);
optionRect.setShadow(0, 5, 10);
optionRect.x = baseX;
optionRect.y = this.canvasHeight - 45 * this.mapScale;
optionRect['id'] = data.id;
optionRect['data'] = data;
optionRect['baseX'] = optionRect.x;
optionRect['baseY'] = optionRect.y;
optionRect['num'] = j;
optionRect['isHide'] = true;
this.renderArr.push(optionRect);
this.optionRect = optionRect;
const optionBg = new MySprite();
optionBg.init(this.images.get('Word_Card_Box@2x'));
optionRect.setSize(itemW, itemH);
optionBg.setScaleXY(this.mapScale * .5);
optionBg.x = optionRect.x;
optionBg.y = this.canvasHeight - 130 * this.mapScale;
optionBg['id'] = k;
optionBg['num'] = j;
this.renderArr.push(optionBg);
const label = new Label();
label.text = data.text;
label.fontSize = 42 * this.mapScale;
label.fontColor = '#20A895';
label.textAlign = 'center';
label.fontName = 'BRLNSDB';
label.setMaxSize(optionRect.width - 20);
optionRect.addChild(label);
const outline = new LineRect();
outline.init();
outline.lineWidth = 5 * this.mapScale;
outline.setSize(optionRect.width, optionRect.height);
outline.lineColor = '#31F3D3';
optionRect.addChild(outline);
outline.alpha = 0;
optionRect['outline'] = outline;
const topRect = new ShapeRect();
topRect.init();
topRect.fillColor = '#925af7';
topRect.setSize(optionRect.width, optionRect.height);
optionRect.addChild(topRect);
optionRect['topRect'] = topRect;
topRect.visible = false;
topRect.alpha = 0;
topRect.childDepandAlpha = true;
this.topRect = topRect;
this.typeB.push(optionRect);
this.typeC.push(optionBg);
}
}
}
this.btnRight = btnRight; getArr(num) {
this.optionRectArr = [];
this.optionRectArrBak = [];
this.optionBgArr = [];
for (let i = 0; i < this.typeB.length; i++) {
if (this.typeB[i]['num'] == num) {
this.optionRectArr.push(this.typeB[i]);
}
} }
initPic() { for (let i = 0; i < this.typeC.length; i++) {
if (this.typeC[i]['num'] == num) {
this.optionBgArr.push(this.typeC[i]);
}
}
const maxW = this.canvasWidth * 0.7; for (let i = 0; i < this.optionRectArr.length; i++) {
let id = this.optionRectArr[i]['id'];
let xPos = this.optionRectArr[i]['x'];
let yPos = this.optionRectArr[i]['y'];
let num = this.optionRectArr[i]['num'];
let newRect = [];
newRect.push(id);
newRect.push(xPos);
newRect.push(yPos);
newRect.push(num);
this.optionRectArrBak.push(newRect);
}
}
defaultShow() {
for (let i = 0; i < this.typeB.length; i++) {
this.typeB[i].alpha = 0;
this.typeB[i].visible = false;
}
for (let i = 0; i < this.typeC.length; i++) {
this.typeC[i].alpha = 0;
this.typeC[i].visible = false;
}
for (let i = 0; i < this.typeB.length; i++) {
if (this.typeB[i]['num'] == 0) {
this.typeB[i].alpha = 1;
this.typeB[i].visible = true;
}
}
for (let i = 0; i < this.typeC.length; i++) {
if (this.typeC[i]['num'] == 0) {
this.typeC[i].alpha = 1;
this.typeC[i].visible = true;
}
}
this.spotList[0]['isChange'] = true;
this.isHideCheck();
this.getArr(0);
}
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite(); const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url)); pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2; pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2; pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width); pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1); this.renderArr.push(pic1);
this.pic1 = pic1; this.pic1 = pic1;
const label1 = new Label(); const label1 = new Label();
label1.text = this.data.text; label1.text = this.data.text;
label1.textAlign = 'center'; label1.textAlign = 'center';
label1.fontSize = 50; label1.fontSize = 50;
label1.fontName = 'BRLNSDB'; label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff'; label1.fontColor = '#ffffff';
pic1.addChild(label1); pic1.addChild(label1);
const pic2 = new MySprite(); const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2)); pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth; pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2; pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width); pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2); this.renderArr.push(pic2);
this.pic2 = pic2; this.pic2 = pic2;
this.curPic = pic1; this.curPic = pic1;
} }
showWord() {
this.wordArr = this.wordArr[this.picIndex];
console.log('RandomID', this.wordArr);
const arr = this.wordArr;
let itemW = this.itemW;
let disW = 10;
let totalW = 0;
if (arr.length <= 8) {
totalW = (itemW + disW) * this.picArr.length;
} else {
totalW = (itemW + disW) * 8;
itemW = totalW / this.picArr.length / 15 * 14;
}
disW = itemW / 14;
totalW *= this.mapScale;
itemW *= this.mapScale;
disW *= this.mapScale;
const itemH = itemW / this.itemW * this.itemH;
const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2;
const disH = 100 * this.mapScale;
const offY = this.canvasHeight - (disH) * 2 + itemH / 2;
this.disW = disW;
for (let i = 0; i < arr.length; i++) {
const data = arr[i];
console.log('initOption', data);
const label = new Label();
label.text = data.text;
label.fontSize = 42 * this.mapScale;
label.fontColor = '#fe5e22';
label.textAlign = 'center';
label.fontName = 'BRLNSDB';
label.setMaxSize(this.optionRect.width - 20);
this.topRect.addChild(label);
}
}
soundBegin(i) {
const curData = this.picArr[i];
const audioLink = curData.audio_url;
this.audioPlayer.src = audioLink;
this.audioPlayer.load();
if (this.showSoundFlag === true) {
this.audioPlayer.play();
} else {
this.audioPlayer.pause();
}
this.audioPlayer.onended = () => {
this.showSoundFlag = !this.showSoundFlag;
this.soundCheck();
};
}
questionSoundBegin() {
const audioLink = this.data.contentObj.question_audio;
console.log(audioLink);
this.audioRect.src = audioLink;
this.audioRect.load();
this.audioRect.play();
}
initSound() {
const soundClose = new MySprite();
soundClose.init(this.images.get('Sound_Close_Btn@2x'));
soundClose.x = this.canvasWidth - 70 * this.mapScale;
soundClose.y = this.canvasHeight - 40 * this.mapScale;
soundClose.setScaleXY(this.mapScale * .6);
this.renderArr.push(soundClose);
this.soundClose = soundClose;
const soundOpen = new MySprite();
soundOpen.init(this.images.get('Sound_Open_Btn@2x'));
soundOpen.setScaleXY(this.mapScale);
soundOpen.x = soundClose.x;
soundOpen.y = soundClose.y;
soundOpen.setScaleXY(this.mapScale * .6);
this.renderArr.push(soundOpen);
this.soundOpen = soundOpen;
soundClose.visible = false;
soundOpen.visible = true;
}
soundCheck() {
if (this.showSoundFlag) {
this.soundClose.visible = true;
this.soundOpen.visible = false;
} else {
this.soundClose.visible = false;
this.soundOpen.visible = true;
}
}
clickOptionRect(optionRect) {
if (this.curOptionRect && this.curOptionRect !== optionRect) {
this.hideOutLine(this.curOptionRect);
}
btnLeftClicked() { this.curOptionRect = optionRect;
removeItemFromArr(this.renderArr, optionRect);
this.renderArr.push(optionRect);
this.showOutLine(this.curOptionRect);
this.wordSound(this.curOptionRect);
const data = optionRect.data;
this.playAudio(data.audio_url, true);
}
this.lastPage(); wordSound(optionRect) {
const clickLink: any = this.rawAudios.get('click');
this.audioClick.src = clickLink;
this.audioClick.load();
this.audioClick.play();
this.audioClick.onended = () => {
if (!optionRect) {
return;
}
const wordAudio = optionRect.data.audio_url;
if (!wordAudio) {
return;
}
this.audioWord.src = wordAudio;
this.audioWord.load();
this.audioWord.play();
};
} }
btnRightClicked() { hideOutLine(optionRect) {
hideItem(optionRect.outline, 0.2);
}
this.nextPage(); showOutLine(optionRect) {
showItem(optionRect.outline, 0.2);
} }
lastPage() { clickOptionTarget(optionTarget) {
this.curOptionTarget = optionTarget;
if (!this.curOptionRect) {
return;
}
if (this.curPic == this.pic1) { if (this.curOptionRect.id == optionTarget.id) {
this.canTouch = false;
moveItem(this.curOptionRect, optionTarget.x, optionTarget.y, 0.3, () => {
this.canTouch = true;
this.putOption(this.curOptionRect, optionTarget);
}, TWEEN.Easing.Cubic.Out);
} else {
this.playAudio('wrong', true);
shake(this.curOptionRect, 0.4);
}
}
putOption(option, optionTarget) {
option.x = optionTarget.x;
option.y = optionTarget.y;
removeItemFromArr(this.optionRectArr, option);
this.sortOptionRectArr();
showPopParticle(this.images.get('star'), {x: option.x, y: option.y}, this.particleLayer);
this.hideOutLine(this.curOptionRect);
this.curOptionRect = null;
this.endRectArr.push(option);
this.checkEnd();
const startLink: any = this.rawAudios.get('star');
this.audioRect.src = startLink;
this.audioRect.load();
this.audioRect.play();
}
checkEnd() {
console.log(' show end petal', this.optionRectArr.length);
if (this.optionRectArr.length <= 0) {
console.log(' show end petal!!!', this.optionRectArr.length);
this.finishTag();
this.gameEnd();
}
}
sortOptionRectArr() {
for (let i = 0; i < this.optionRectArr.length; i++) {
if (this.optionRectArr[i]['status'] === 'finish') {
return; return;
} }
}
const arr = this.optionRectArr;
if (arr.length > 0) {
this.canTouch = false; this.canTouch = false;
const itemW = arr[0].width;
let disW = this.disW;
const totalW = itemW * arr.length + disW * (arr.length - 1);
const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2;
const moveLen = this.canvasWidth; const time = 0.4;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); for (let i = 0; i < arr.length; i++) {
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => { arr[i].baseX = offX + i * (itemW + disW);
moveItem(arr[i], arr[i].baseX, arr[i].baseY, time, null, TWEEN.Easing.Cubic.Out);
}
setTimeout(() => {
this.canTouch = true; this.canTouch = true;
this.curPic = this.pic1; }, time * 1000);
});
} }
}
sortOptionBgArr() {
const arr1 = this.optionBgArr;
if (arr1.length > 0) {
this.canTouch = false;
nextPage() { const itemW = arr1[0].width;
let disW = this.disW;
const totalW = itemW * arr1.length + disW * (arr1.length - 1);
const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2;
const time = 0.4;
for (let i = 0; i < arr1.length; i++) {
arr1[i].baseX = offX + i * (itemW + disW);
moveItem(arr1[i], arr1[i].baseX, arr1[i].baseY, time, null, TWEEN.Easing.Cubic.Out);
}
setTimeout(() => {
this.canTouch = true;
}, time * 1000);
}
}
if (this.curPic == this.pic2) { checkOnOptionTarget() {
for (let i = 0; i < this.optionBgArr.length; i++) {
if (this.checkPointInRect(this.mx, this.my, this.optionBgArr[i].getBoundingBox())) {
this.checkOptionTargetRight(this.optionBgArr[i]);
return; return;
} }
}
this.optionResetPos();
}
optionResetPos() {
if (this.curOptionRect) {
this.canTouch = false; this.canTouch = false;
moveItem(this.curOptionRect, this.curOptionRect.baseX, this.curOptionRect.baseY, 0.3, () => {
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true; this.canTouch = true;
this.curPic = this.pic2; }, TWEEN.Easing.Back.Out);
}
}
checkOptionTargetRight(optionTarget) {
if (this.curOptionRect.id == optionTarget.id) {
this.putOption(this.curOptionRect, optionTarget);
} else {
const wrongLink: any = this.rawAudios.get('wrong');
this.audioRect.src = wrongLink;
this.audioRect.load();
this.audioRect.play();
this.optionResetPos();
}
}
getPos() {
if (this.endRectArr.length !== 0) {
this.endRectArr.forEach(ele => {
let oldId = ele['id'];
let endRect = ele;
for (let i = 0; i < this.optionRectArrBak.length; i++) {
if (this.optionRectArrBak[i]['0'] === oldId) {
let xPos = this.optionRectArrBak[i]['1'];
let yPos = this.optionRectArrBak[i]['2'];
moveItem(endRect, xPos, yPos, 0.3, () => {
removeItemFromArr(this.endRectArr, endRect);
}, TWEEN.Easing.Cubic.Out);
}
}
}); });
} }
}
pic1Clicked() { finishTag() {
this.playAudio(this.data.audio_url); let num = this.optionRectArrBak[0]['3'];
for (let i = 0; i < this.typeB.length; i++) {
if (this.typeB[i]['num'] == num) {
this.typeB[i]['status'] = 'finish';
}
}
} }
pic2Clicked() { checkTag() {
this.playAudio(this.data.audio_url_2); let num = this.optionRectArrBak[0]['3'];
for (let i = 0; i < this.typeB.length; i++) {
if (this.typeB[i]['num'] == num) {
if (this.typeB[i]['status'] === 'finish') {
console.log('finished it!');
} else {
console.log('no finished');
this.sortOptionRectArr();
}
}
}
} }
clickSound() {
const clickLink: any = this.rawAudios.get('click');
this.audioRect.src = clickLink;
this.audioRect.load();
this.audioRect.play();
}
mapDown(event) {
if (!this.canTouch) {
return;
}
this.downFlag = true;
this.curOptionTarget = null;
for (let i = 0; i < this.endRectArr.length; i++) {
if (this.checkClickTarget(this.endRectArr[i])) {
const data = this.endRectArr[i].data;
return;
}
}
mapDown(event) { for (let i = 0; i < this.optionRectArr.length; i++) {
if (this.checkClickTarget(this.optionRectArr[i])) {
this.clickOptionRect(this.optionRectArr[i]);
return;
}
}
if (!this.canTouch) { for (let i = 0; i < this.optionBgArr.length; i++) {
if (this.checkClickTarget(this.optionBgArr[i])) {
this.clickOptionTarget(this.optionBgArr[i]);
return; return;
} }
}
for (let i = 0; i < this.spotList.length; i++) {
if (this.checkClickTarget(this.spotList[i])) {
this.sortOptionRectArr();
this.byTypeChange(i);
this.isHideCheck();
if ( this.checkClickTarget(this.btnLeft) ) { if (this.endRectArr.length > 0 && this.endRectArr.length < this.optionRectArrBak.length) {
this.btnLeftClicked(); this.getPos();
}
if (this.endRectArr.length == this.optionRectArrBak.length) {
this.endRectArr = [];
}
this.checkTag();
this.getArr(i);
this.sortOptionRectArr();
this.soundID = i;
this.picIndex = i;
this.audioPlayer.pause();
this.soundCheck();
this.clickSound();
return; return;
} }
}
if ( this.checkClickTarget(this.btnRight) ) { if (this.checkClickTarget(this.soundClose)) {
this.btnRightClicked(); this.showSoundFlag = !this.showSoundFlag;
console.log(this.showSoundFlag);
this.soundCheck();
this.soundBegin(this.picIndex);
return; return;
} }
if ( this.checkClickTarget(this.pic1) ) { if (this.checkClickTarget(this.soundOpen)) {
this.pic1Clicked(); this.showSoundFlag = !this.showSoundFlag;
console.log(this.showSoundFlag);
this.soundCheck();
this.soundBegin(this.picIndex);
return; return;
} }
if ( this.checkClickTarget(this.pic2) ) { if (this.checkClickTarget(this.question)) {
this.pic2Clicked(); this.questionSoundBegin();
return; return;
} }
this.downFlag = false;
} }
mapMove(event) { mapMove(event) {
if (!this.curOptionRect) {
return;
} }
mapUp(event) { if (!this.downFlag) {
return;
}
this.curOptionRect.x = this.mx;
this.curOptionRect.y = this.my;
} }
mapUp(event) {
this.downFlag = false;
if (this.curOptionRect) {
if (!this.curOptionTarget) {
this.checkOnOptionTarget();
}
}
this.curOptionTarget = null;
}
update() { update() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this)); this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容 // 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画 // tween 更新动画
TWEEN.update(); TWEEN.update();
// ----------------------------------------------------------
this.updateArr(this.renderArr); this.updateArr(this.renderArr);
this.updateItem(this.particleLayer);
this.updateArr(this.endPageArr);
} }
getPosByAngle(angle, len) {
const radian = angle * Math.PI / 180;
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
}
getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
} }
...@@ -3,15 +3,32 @@ const res = [ ...@@ -3,15 +3,32 @@ const res = [
// ['bg', "assets/play/bg.jpg"], // ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"], ['btn_right', "assets/play/btn_right.png"],
['Rectangle@2x','assets/play/Rectangle@2x.png'],
['Sound_Close_Btn@2x','assets/play/Sound_Close_Btn@2x.png'],
['Bg_Mask@2x','assets/play/Bg_Mask@2x.png'],
['Rectangle_3@2x','assets/play/Rectangle_3@2x.png'],
['Sound_Open_Btn@2x','assets/play/Sound_Open_Btn@2x.png'],
['Rectangle_4@2x','assets/play/Rectangle_4@2x.png'],
['Word_Card_Box@2x','assets/play/Word_Card_Box@2x.png'],
['Checked_Spot','assets/play/Checked_Spot.png'],
['Unchecked_Spot','assets/play/Unchecked_Spot.png'],
['star','assets/play/star.png'],
['petal_1', "assets/default/petal_1.png"],
['petal_2', "assets/default/petal_2.png"],
['petal_3', "assets/default/petal_3.png"],
// ['text_bg', "assets/play/text_bg.png"], // ['text_bg', "assets/play/text_bg.png"],
]; ];
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['finish', "assets/play/music/finish.mp3"],
['star', "assets/play/music/star.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
]; ];
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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