Commit de91749f authored by huoshizhe's avatar huoshizhe

2020-3-26 09:31:13

parent 4b326c83
This source diff could not be displayed because it is too large. You can view the blob instead.
<div class="model-content"> <div class="model-content">
<button style="margin: 4vw; display: flex; align-items: center" nz-button nzType="primary" nzGhost (click)="guideBtnClick(true)">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <i nz-icon type="play-circle"></i>
1分钟简易教程
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> </button>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></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 style="position: absolute; left: 1000px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url_2"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url_2"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')"
></app-audio-recorder>
</div -->
</div>
<div *ngFor="let it of picArr; let i = index" style="padding: 0.5vw; width: 80%;">
<div class="border" style="display: flex; align-items: center;">
<div style="width: 10%; padding-left: 20px">
<h5 style="padding-left: 15px; margin: auto"> 组-{{i+1}}: </h5>
<div style="display: flex; justify-items: center; align-items: center; height: 40px;">
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
<!--</app-audio-recorder>-->
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<span>删除</span>
<!--<i nz-icon type="close"></i>-->
</button>
</div>
</div>
<div class="item-box" style="width: 50%">
<div style="display: flex; align-items: center">
<span style="padding-right: 10px"> 类型:</span>
<nz-radio-group [(ngModel)]="it.optionTypeA" (ngModelChange)="save()">
<label nz-radio nzValue="A">文本</label>
<label nz-radio nzValue="B">图片</label>
</nz-radio-group>
</div>
<div *ngIf="it.optionTypeA == 'A'" style="width: 60%">
<input style="width: 100%; margin-bottom: 0.5vw" type="text" nz-input placeholder="点击输入文本内容" [(ngModel)]="it.a_text" (blur)="saveItem()">
</div>
<div *ngIf="it.optionTypeA == 'B'" style="width: 90%; margin: auto">
<div style="width: 100%;">
<app-upload-image-with-preview
[picUrl]="it['a_pic_url']"
(imageUploaded)="onImageUploadSuccessByItem($event, it, 'a')"
></app-upload-image-with-preview>
</div>
</div>
<app-audio-recorder
style="margin-top: 0.5vw"
[audioUrl]="it['a_audio_url']"
(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">
</app-audio-recorder>
</div>
<!--中间部分-->
<div class="item-box" style="width: 50%">
<div style="display: flex; align-items: center">
<span style="padding-right: 10px"> 类型:</span>
<nz-radio-group [(ngModel)]="it.optionTypeB" (ngModelChange)="save()">
<label nz-radio nzValue="A">文本</label>
<label nz-radio nzValue="B">图片</label>
</nz-radio-group>
</div>
<div *ngIf="it.optionTypeB == 'A'" style="width: 60%">
<input style="width: 100%; margin-bottom: 0.5vw" type="text" nz-input placeholder="点击输入文本内容" [(ngModel)]="it.b_text" (blur)="saveItem()">
</div>
<div *ngIf="it.optionTypeB == 'B'" style="width: 90%; margin: auto">
<div style="width: 100%;">
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="it['b_pic_url']"
(imageUploaded)="onImageUploadSuccessByItem($event, it, 'b')"
></app-upload-image-with-preview>
</div>
</div>
<app-audio-recorder
style="margin-top: 0.5vw"
[audioUrl]="it['b_audio_url']"
(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'b')">
</app-audio-recorder>
<!--<app-audio-recorder--> </div>
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event)"-->
<!--&gt;</app-audio-recorder>-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
</div>
<!--<div class="item-box">-->
</div>
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<div nz-col nzSpan="8" class="add-btn-box" >
<!--<div style="display: flex; justify-items: center; padding-top: 10px">--> <!--<div style="width: 100%; height: 100%;">-->
<!--<app-audio-recorder--> <button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
<!--[audioUrl]="it.audio_url"--> (click)="addPic()">
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">--> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--</app-audio-recorder>--> Add
</button>
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--</div>--> <!--</div>-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;--> </div>
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;question:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;--> <!--<div style="padding-bottom: 30px;">-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--<h5> title-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.title_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">-->
<!--</app-audio-recorder>-->
<!--</div>--> <!--</div>-->
<!--<div style="padding-bottom: 30px;">-->
<!--<div nz-col nzSpan="8" class="add-btn-box" >--> <!--<h5> bg-sound: </h5>-->
<!--<app-audio-recorder-->
<!--&lt;!&ndash;<div style="width: 100%; height: 100%;">&ndash;&gt;--> <!--[audioUrl]="item.contentObj.bg_audio_url"-->
<!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"--> <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
<!--(click)="addPic()">--> <!--</app-audio-recorder>-->
<!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
<!--Add-->
<!--</button>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>--> <!--</div>-->
<!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
<!--<div *ngFor="let it of picArr; let i = index">-->
<!--<span> pic-{{i + 1}}: </span>-->
<!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
<!--<div style="width: 40%; padding-right: 20px">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--</div>-->
<!--<div class="pic-sound-box">-->
<!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">-->
<!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
<!--</div>-->
<!--</div>-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;--> <!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
<!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
<!--&lt;!&ndash;<h5> title-sound: </h5>&ndash;&gt;--> <!--<app-audio-recorder-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;--> <!--[audioUrl]="it2.audio_url"-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.title_audio_url"&ndash;&gt;--> <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">&ndash;&gt;--> <!--</app-audio-recorder>-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="padding-bottom: 30px;">&ndash;&gt;-->
<!--&lt;!&ndash;<h5> bg-sound: </h5>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="item.contentObj.bg_audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<span style="margin-bottom: 20px"> 10 : 23 </span>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index">&ndash;&gt;-->
<!--&lt;!&ndash;<span> pic-{{i + 1}}: </span>&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; padding-bottom: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<div style="width: 40%; padding-right: 20px">&ndash;&gt;-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="pic-sound-box">&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;<div nz-row style="width: 50%; padding-bottom: 20px;">&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">&ndash;&gt;--> <!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">-->
<!--&lt;!&ndash;<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it2.audio_url"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--&lt;!&ndash;</div>&ndash;&gt;--> <!--<div class="item-box">-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--&lt;!&ndash;<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">&ndash;&gt;-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--&lt;!&ndash;<div *ngFor="let it of picArr; let i = index"&ndash;&gt;-->
<!--&lt;!&ndash;nz-col nzSpan="8" >&ndash;&gt;-->
<!--&lt;!&ndash;<div class="item-box">&ndash;&gt;--> <!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--&lt;!&ndash;<h5> id-{{i+1}} </h5>&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">&ndash;&gt;--> <!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--&lt;!&ndash;<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">&ndash;&gt;-->
<!--&lt;!&ndash;<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">&ndash;&gt;-->
<!--&lt;!&ndash;<i nz-icon type="close"></i>&ndash;&gt;-->
<!--&lt;!&ndash;</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--&lt;!&ndash;<app-upload-image-with-preview&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;style="width: 100%"&ndash;&gt;-->
<!--&lt;!&ndash;[picUrl]="it.pic_url"&ndash;&gt;-->
<!--&lt;!&ndash;(imageUploaded)="onImageUploadSuccessByItem($event, it)"&ndash;&gt;-->
<!--&lt;!&ndash;&gt;</app-upload-image-with-preview>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;--> <!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--&lt;!&ndash;question:&ndash;&gt;--> <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--&lt;!&ndash;</span>&ndash;&gt;--> <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;--> <!--</nz-radio-group>-->
<!--&lt;!&ndash;[audioUrl]="it['q_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div style="display: flex; align-items: center; justify-content: center">&ndash;&gt;--> <!--</div>-->
<!--&lt;!&ndash;<span style="width: 80px;">&ndash;&gt;-->
<!--&lt;!&ndash;answer:&ndash;&gt;-->
<!--&lt;!&ndash;</span>&ndash;&gt;-->
<!--&lt;!&ndash;<app-audio-recorder&ndash;&gt;-->
<!--&lt;!&ndash;[audioUrl]="it['a_audio_url']"&ndash;&gt;-->
<!--&lt;!&ndash;(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">&ndash;&gt;-->
<!--&lt;!&ndash;</app-audio-recorder>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
<!--&lt;!&ndash;<nz-radio-group [(ngModel)]="it.radioValue" >&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>&ndash;&gt;-->
<!--&lt;!&ndash;</nz-radio-group>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
</div>
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<div *ngIf="showGuideAudio" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-items: center; background: rgba(0,0,0,.7)" (click)="guideBtnClick(false)">
<div style="margin: auto;">
<video style="width: 60vw; height: auto" src="assets/guide/guide.mp4" controls="controls" type="video/mp4">
您的浏览器不支持 audio 标签。
</video>
</div>
</div>
<!--</div>-->
@import '../style/common_mixin';
.model-content {
width: 100%;
height: 100%;
.item-box{
//margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 2vw;
padding-top: 3vw;
}
.pic-sound-box {
width: 50%;
display: flex;
//align-items: center;
flex-direction: column
}
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
//width: 180px;
height: 20vw;
//background: #FFDC00;
padding: 10px;
padding-top: 5vw;
}
}
.border {
border-radius: 20px;
border-style: dashed;
//border-radius: 20px;
//border-width: 2px;
//border-color: #000000;
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core'; import {
Component,
EventEmitter,
Input,
OnDestroy,
OnChanges,
OnInit,
Output,
ApplicationRef,
ChangeDetectorRef
} from '@angular/core';
@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 = [];
saveKey = "test_0011";
// 储存对象
item;
_item: any;
constructor(private appRef: ApplicationRef) {
KEY = 'hw_004';
answerType = 'A';
showGuideAudio;
// @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,73 +56,219 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -23,73 +56,219 @@ 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;
} else {
this.item = {};
}
if ( !this.item.contentObj ) {
this.item.contentObj = {};
} }
console.log('~data:', data);
this.init(); this.init();
this.refresh();
}, this.saveKey); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
} this.refresh();
}, 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;
}
let tmpFlag = false;
for (let i = 0; i < this.picArr.length; i++) {
const data = this.picArr[i];
if (!data.optionTypeA || !data.optionTypeB) {
tmpFlag = true;
}
if (!data.optionTypeA) {
if (data.a_pic_url) {
data.optionTypeA = 'B';
} else {
data.optionTypeA = 'A';
}
}
/** if (!data.optionTypeB) {
* 储存图片数据 if (data.b_pic_url) {
* @param e data.optionTypeB = 'B';
*/ } else {
onImageUploadSuccess(e, key) { data.optionTypeB = 'A';
}
}
}
this.item[key] = e.url; if (tmpFlag) {
this.save(); this.save();
}
console.log('item:' , this.item);
// 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() {
} }
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url; deleteItem(data) {
const index = this.picArr.indexOf(data);
if (index !== -1) {
this.picArr.splice(index, 1);
}
// this.update.emit(this.item);
this.save(); this.save();
} }
/**
* 储存数据
*/
onImageUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_pic_url'] = e.url;
} else {
item.pic_url = e.url;
}
this.save();
// this.update.emit(this.item);
// console.log('this.item: ', this.item);
}
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();
}
addPic() {
const data = {
a_text: '',
b_text: '',
a_pic_url: '',
b_pic_url: '',
a_audio_url: '',
b_audio_url: '',
optionTypeA: 'A',
optionTypeB: 'A',
// text: '',
// radioValue: 'A'
};
this.picArr.push(data);
this.saveItem();
}
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item);
this.save();
}
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();
}, 1); }, 1);
} }
guideBtnClick(value) {
this.showGuideAudio = value;
}
} }
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http';
import construct = Reflect.construct;
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
class Sprite { class Sprite {
x = 0; x = 0;
...@@ -19,7 +16,7 @@ class Sprite { ...@@ -19,7 +16,7 @@ class Sprite {
constructor(ctx = null) { constructor(ctx = null) {
if (!ctx) { if (!ctx) {
this.ctx = window.curCtx; this.ctx = window['curCtx'];
} else { } else {
this.ctx = ctx; this.ctx = ctx;
} }
...@@ -53,14 +50,6 @@ export class MySprite extends Sprite { ...@@ -53,14 +50,6 @@ export class MySprite extends Sprite {
skewX = 0; skewX = 0;
skewY = 0; skewY = 0;
_shadowFlag = false;
_shadowColor;
_shadowOffsetX = 0;
_shadowOffsetY = 0;
_shadowBlur = 5;
_radius = 0;
children = [this]; children = [this];
childDepandVisible = true; childDepandVisible = true;
...@@ -70,7 +59,7 @@ export class MySprite extends Sprite { ...@@ -70,7 +59,7 @@ export class MySprite extends Sprite {
_z = 0; _z = 0;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
if (imgObj) { if (imgObj) {
...@@ -87,21 +76,6 @@ export class MySprite extends Sprite { ...@@ -87,21 +76,6 @@ export class MySprite extends Sprite {
} }
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
this._shadowFlag = true;
this._shadowColor = color;
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
this._shadowBlur = blur;
}
setRadius(r) {
this._radius = r;
}
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
...@@ -120,8 +94,6 @@ export class MySprite extends Sprite { ...@@ -120,8 +94,6 @@ export class MySprite extends Sprite {
this.updateChildren(); this.updateChildren();
this.ctx.restore(); this.ctx.restore();
} }
drawInit() { drawInit() {
...@@ -137,64 +109,28 @@ export class MySprite extends Sprite { ...@@ -137,64 +109,28 @@ export class MySprite extends Sprite {
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0); this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
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, -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, h / 2 - r, r);
this.ctx.clip();
}
} }
drawSelf() { drawSelf() {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
this.ctx.shadowColor = this._shadowColor;
} else {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowBlur = null;
this.ctx.shadowColor = null;
}
if (this.img) { if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY); this.ctx.drawImage(this.img, this._offX, this._offY);
} }
} }
updateChildren() { updateChildren() {
if (this.children.length <= 0) { return; } if (this.children.length <= 0) { return; }
for (const child of this.children) { for (let i = 0; i < this.children.length; i++) {
if (child === this) {
if (this.children[i] === this) {
if (this.visible) { if (this.visible) {
this.drawSelf(); this.drawSelf();
} }
} else { } else {
child.update();
this.children[i].update();
} }
} }
} }
...@@ -241,7 +177,7 @@ export class MySprite extends Sprite { ...@@ -241,7 +177,7 @@ export class MySprite extends Sprite {
removeChildren() { removeChildren() {
for (let i = 0; i < this.children.length; i++) { for (let i = 0; i < this.children.length; i++) {
if (this.children[i]) { if (this.children[i]) {
if (this.children[i] !== this) { if (this.children[i] != this) {
this.children.splice(i, 1); this.children.splice(i, 1);
i --; i --;
} }
...@@ -250,9 +186,9 @@ export class MySprite extends Sprite { ...@@ -250,9 +186,9 @@ export class MySprite extends Sprite {
} }
_changeChildAlpha(alpha) { _changeChildAlpha(alpha) {
for (const child of this.children) { for (let i = 0; i < this.children.length; i++) {
if (child !== this) { if (this.children[i] != this) {
child.alpha = alpha; this.children[i].alpha = alpha;
} }
} }
} }
...@@ -363,7 +299,7 @@ export class ColorSpr extends MySprite { ...@@ -363,7 +299,7 @@ export class ColorSpr extends MySprite {
g = 0; g = 0;
b = 0; b = 0;
createGSCanvas() { createGSCanvas(){
if (!this.img) { if (!this.img) {
return; return;
...@@ -378,8 +314,8 @@ export class ColorSpr extends MySprite { ...@@ -378,8 +314,8 @@ export class ColorSpr extends MySprite {
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height); const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) { for( let i = 0; i < c.height; i++){
for ( let j = 0; j < c.width; j++) { for( let j = 0; j < c.width; j++){
const x = (i * 4) * c.width + ( j * 4 ); const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x]; const r = c.data[x];
...@@ -413,7 +349,7 @@ export class GrayscaleSpr extends MySprite { ...@@ -413,7 +349,7 @@ export class GrayscaleSpr extends MySprite {
grayScale = 120; grayScale = 120;
createGSCanvas() { createGSCanvas(){
if (!this.img) { if (!this.img) {
return; return;
...@@ -424,8 +360,8 @@ export class GrayscaleSpr extends MySprite { ...@@ -424,8 +360,8 @@ export class GrayscaleSpr extends MySprite {
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height); const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) { for( let i = 0; i < c.height; i++){
for ( let j = 0; j < c.width; j++) { for( let j = 0; j < c.width; j++){
const x = (i * 4) * c.width + ( j * 4 ); const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x]; const r = c.data[x];
...@@ -468,10 +404,10 @@ export class BitMapLabel extends MySprite { ...@@ -468,10 +404,10 @@ export class BitMapLabel extends MySprite {
const tmpArr = text.split(''); const tmpArr = text.split('');
let totalW = 0; let totalW = 0;
let h = 0; let h = 0;
for (const tmp of tmpArr) { for (let i = 0; i < tmpArr.length; i++) {
const label = new MySprite(this.ctx); const label = new MySprite(this.ctx);
label.init(data[tmp], 0); label.init(data[tmpArr[i]], 0);
this.addChild(label); this.addChild(label);
labelArr.push(label); labelArr.push(label);
...@@ -484,9 +420,9 @@ export class BitMapLabel extends MySprite { ...@@ -484,9 +420,9 @@ export class BitMapLabel extends MySprite {
this.height = h; this.height = h;
let offX = -totalW / 2; let offX = -totalW / 2;
for (const label of labelArr) { for (let i = 0; i < labelArr.length; i++) {
label.x = offX; labelArr[i].x = offX;
offX += label.width; offX += labelArr[i].width;
} }
this.labelArr = labelArr; this.labelArr = labelArr;
...@@ -499,22 +435,22 @@ export class BitMapLabel extends MySprite { ...@@ -499,22 +435,22 @@ export class BitMapLabel extends MySprite {
export class Label extends MySprite { export class Label extends MySprite {
text: string; text: String;
// fontSize:String = '40px'; // fontSize:String = '40px';
fontName = 'Verdana'; fontName: String = 'Verdana';
textAlign = 'left'; textAlign: String = 'left';
fontSize = 40; fontSize = 40;
fontColor = '#000000'; fontColor = '#000000';
fontWeight = 900; fontWeight = 900;
_maxWidth; maxWidth;
outline = 0; outline = 0;
outlineColor = '#ffffff'; outlineColor = '#ffffff';
// _shadowFlag = false; _shadowFlag = false;
// _shadowColor; _shadowColor;
// _shadowOffsetX; _shadowOffsetX;
// _shadowOffsetY; _shadowOffsetY;
// _shadowBlur; _shadowBlur;
_outlineFlag = false; _outlineFlag = false;
_outLineWidth; _outLineWidth;
...@@ -545,7 +481,7 @@ export class Label extends MySprite { ...@@ -545,7 +481,7 @@ export class Label extends MySprite {
setMaxSize(w) { setMaxSize(w) {
this._maxWidth = w; this.maxWidth = w;
this.refreshSize(); this.refreshSize();
if (this.width >= w) { if (this.width >= w) {
this.scaleX *= w / this.width; this.scaleX *= w / this.width;
...@@ -564,7 +500,7 @@ export class Label extends MySprite { ...@@ -564,7 +500,7 @@ export class Label extends MySprite {
const tween = new TWEEN.Tween(this) const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800) .to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function() {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -572,16 +508,16 @@ export class Label extends MySprite { ...@@ -572,16 +508,16 @@ export class Label extends MySprite {
.start(); // Start the tween immediately. .start(); // Start the tween immediately.
} }
// setShadow(offX = 0, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') { setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
//
// this._shadowFlag = true; this._shadowFlag = true;
// this._shadowColor = color; this._shadowColor = color;
// // 将阴影向右移动15px,向上移动10px // 将阴影向右移动15px,向上移动10px
// this._shadowOffsetX = 5; this._shadowOffsetX = offX;
// this._shadowOffsetY = 5; this._shadowOffsetY = offY;
// // 轻微模糊阴影 // 轻微模糊阴影
// this._shadowBlur = 5; this._shadowBlur = blur;
// } }
setOutline(width = 5, color = '#ffffff') { setOutline(width = 5, color = '#ffffff') {
...@@ -598,15 +534,15 @@ export class Label extends MySprite { ...@@ -598,15 +534,15 @@ export class Label extends MySprite {
if (!this.text) { return; } if (!this.text) { return; }
// if (this._shadowFlag) { if (this._shadowFlag) {
//
// this.ctx.shadowColor = this._shadowColor; this.ctx.shadowColor = this._shadowColor;
// // 将阴影向右移动15px,向上移动10px // 将阴影向右移动15px,向上移动10px
// this.ctx.shadowOffsetX = this._shadowOffsetX; this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY; this.ctx.shadowOffsetY = this._shadowOffsetY;
// // 轻微模糊阴影 // 轻微模糊阴影
// this.ctx.shadowBlur = this._shadowBlur; this.ctx.shadowBlur = this._shadowBlur;
// } }
...@@ -650,10 +586,11 @@ export class RichTextOld extends Label { ...@@ -650,10 +586,11 @@ export class RichTextOld extends Label {
textArr = []; textArr = [];
fontSize = 40; fontSize = 40;
setText(text: string, words) { setText(text:string, words) {
let newText = text; let newText = text;
for (const word of words) { for (let i = 0; i < words.length; i++) {
const word = words[i];
const re = new RegExp(word, 'g'); const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`); newText = newText.replace( re, `#${word}#`);
...@@ -676,8 +613,8 @@ export class RichTextOld extends Label { ...@@ -676,8 +613,8 @@ export class RichTextOld extends Label {
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
let curX = 0; let curX = 0;
for (const text of this.textArr) { for (let i = 0; i < this.textArr.length; i++) {
const w = this.ctx.measureText(text).width; const w = this.ctx.measureText(this.textArr[i]).width;
curX += w; curX += w;
} }
...@@ -699,7 +636,7 @@ export class RichTextOld extends Label { ...@@ -699,7 +636,7 @@ export class RichTextOld extends Label {
const tween = new TWEEN.Tween(this) const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800) .to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function() {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -735,7 +672,7 @@ export class RichTextOld extends Label { ...@@ -735,7 +672,7 @@ export class RichTextOld extends Label {
const w = this.ctx.measureText(this.textArr[i]).width; const w = this.ctx.measureText(this.textArr[i]).width;
if ((i + 1) % 2 === 0) { if ((i + 1) % 2 == 0) {
this.ctx.fillStyle = '#c8171e'; this.ctx.fillStyle = '#c8171e';
} else { } else {
this.ctx.fillStyle = '#000000'; this.ctx.fillStyle = '#000000';
...@@ -760,7 +697,7 @@ export class RichText extends Label { ...@@ -760,7 +697,7 @@ export class RichText extends Label {
disH = 30; disH = 30;
constructor(ctx?: any) { constructor(ctx) {
super(ctx); super(ctx);
// this.dataArr = dataArr; // this.dataArr = dataArr;
...@@ -794,12 +731,12 @@ export class RichText extends Label { ...@@ -794,12 +731,12 @@ export class RichText extends Label {
for (const c of chr) { for (let a = 0; a < chr.length; a++) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) { if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (chr[a])).width <= w) {
temp += ' ' + c; temp += ' ' + chr[a];
} else { } else {
row.push(temp); row.push(temp);
temp = ' ' + c; temp = ' ' + chr[a];
} }
} }
row.push(temp); row.push(temp);
...@@ -839,40 +776,6 @@ export class RichText extends Label { ...@@ -839,40 +776,6 @@ export class RichText extends Label {
export class LineRect extends MySprite {
lineColor = '#ffffff';
lineWidth = 10;
setSize(w, h) {
this.width = w;
this.height = h;
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
this.ctx.lineTo(this._offX, this._offY + this.height);
this.ctx.closePath();
this.ctx.lineWidth = this.lineWidth;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
export class ShapeRect extends MySprite { export class ShapeRect extends MySprite {
...@@ -931,83 +834,7 @@ export class ShapeCircle extends MySprite { ...@@ -931,83 +834,7 @@ export class ShapeCircle extends MySprite {
} }
} }
export class ShapeRectNew extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class MyAnimation extends MySprite { export class MyAnimation extends MySprite {
...@@ -1054,13 +881,13 @@ export class MyAnimation extends MySprite { ...@@ -1054,13 +881,13 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = true; this.frameArr[this.frameIndex].visible = true;
} }
_refreshSize(img: any) { _refreshSize(img) {
if (this.width < img.width) { if (this.width < img['width']) {
this.width = img.width; this.width = img['width'];
} }
if (this.height < img.height) { if (this.height < img['height']) {
this.height = img.height; this.height = img['height'];
} }
} }
...@@ -1089,14 +916,14 @@ export class MyAnimation extends MySprite { ...@@ -1089,14 +916,14 @@ export class MyAnimation extends MySprite {
} }
showAllFrame() { showAllFrame() {
for (const frame of this.frameArr ) { for (let i = 0; i < this.frameArr.length; i++) {
frame.alpha = 1; this.frameArr[i].alpha = 1;
} }
} }
hideAllFrame() { hideAllFrame() {
for (const frame of this.frameArr) { for (let i = 0; i < this.frameArr.length; i++) {
frame.alpha = 0; this.frameArr[i].alpha = 0;
} }
} }
...@@ -1189,7 +1016,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1189,7 +1016,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
} }
if (update) { if (update) {
tween.onUpdate( (a, b) => { tween.onUpdate( (a, b) => {
update(a, b); update(a, b);
}); });
} }
...@@ -1242,7 +1069,7 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) ...@@ -1242,7 +1069,7 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null)
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
callBack(); callBack();
}); });
} }
if (easing) { if (easing) {
...@@ -1268,7 +1095,7 @@ export function endShow(item, s = 1) { ...@@ -1268,7 +1095,7 @@ export function endShow(item, s = 1) {
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scaleX: s, scaleY: s }, 800) .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth. .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function() {
}) })
.start(); .start();
...@@ -1276,14 +1103,14 @@ export function endShow(item, s = 1) { ...@@ -1276,14 +1103,14 @@ export function endShow(item, s = 1) {
export function hideItem(item, time = 0.8, callBack = null, easing = null) { export function hideItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 0) { if (item.alpha == 0) {
return; return;
} }
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000) .to({alpha: 0}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function () {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -1299,7 +1126,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1299,7 +1126,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
export function showItem(item, time = 0.8, callBack = null, easing = null) { export function showItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 1) { if (item.alpha == 1) {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -1310,7 +1137,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1310,7 +1137,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000) .to({alpha: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function () {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -1328,9 +1155,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul ...@@ -1328,9 +1155,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000) .to({alpha: alpha}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function () {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -1350,7 +1177,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) { ...@@ -1350,7 +1177,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000) .to({alpha: 1, scale: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(function () {
if (callBack) { if (callBack) {
callBack(); callBack();
} }
...@@ -1406,22 +1233,22 @@ export function getAngleByPos(px, py, mx, my) { ...@@ -1406,22 +1233,22 @@ export function getAngleByPos(px, py, mx, my) {
const radina = Math.acos(cos); // 用反三角函数求弧度 const radina = Math.acos(cos); // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度 let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
if (mx > px && my > py) {// 鼠标在第四象限 if(mx > px && my > py) {// 鼠标在第四象限
angle = 180 - angle; angle = 180 - angle;
} }
if (mx === px && my > py) {// 鼠标在y轴负方向上 if(mx === px && my > py) {// 鼠标在y轴负方向上
angle = 180; angle = 180;
} }
if (mx > px && my === py) {// 鼠标在x轴正方向上 if(mx > px && my === py) {// 鼠标在x轴正方向上
angle = 90; angle = 90;
} }
if (mx < px && my > py) {// 鼠标在第三象限 if(mx < px && my > py) {// 鼠标在第三象限
angle = 180 + angle; angle = 180 + angle;
} }
if (mx < px && my === py) {// 鼠标在x轴负方向 if(mx < px && my === py) {// 鼠标在x轴负方向
angle = 270; angle = 270;
} }
if (mx < px && my < py) {// 鼠标在第二象限 if(mx < px && my < py) {// 鼠标在第二象限
angle = 360 - angle; angle = 360 - angle;
} }
...@@ -1433,7 +1260,7 @@ export function getAngleByPos(px, py, mx, my) { ...@@ -1433,7 +1260,7 @@ export function getAngleByPos(px, py, mx, my) {
export function removeItemFromArr(arr, item) { export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item); const index = arr.indexOf(item);
if (index !== -1) { if (index != -1) {
arr.splice(index, 1); arr.splice(index, 1);
} }
} }
...@@ -1443,7 +1270,7 @@ export function removeItemFromArr(arr, item) { ...@@ -1443,7 +1270,7 @@ export function removeItemFromArr(arr, item) {
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) { export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null){
const r = getPosDistance(item.x, item.y, x0, y0); const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0); let a = getAngleByPos(item.x, item.y, x0, y0);
...@@ -1502,29 +1329,6 @@ export function delayCall(callback, second) { ...@@ -1502,29 +1329,6 @@ export function delayCall(callback, second) {
.start(); .start();
} }
export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss";
const o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
}
}
return fmt;
}
export function getMinScale(item, maxLen) { export function getMinScale(item, maxLen) {
const sx = maxLen / item.width; const sx = maxLen / item.width;
const sy = maxLen / item.height; const sy = maxLen / item.height;
...@@ -1573,9 +1377,9 @@ export function jelly(item, time = 0.7) { ...@@ -1573,9 +1377,9 @@ export function jelly(item, time = 0.7) {
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) { export function showPopParticle(img, pos, parent) {
const num = 20;
for (let i = 0; i < num; i ++) { for (let i = 0; i < num; i ++) {
const particle = new MySprite(); const particle = new MySprite();
...@@ -1587,8 +1391,8 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen ...@@ -1587,8 +1391,8 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen
const randomR = 360 * Math.random(); const randomR = 360 * Math.random();
particle.rotation = randomR; particle.rotation = randomR;
const randomS = 0.3 + Math.random() * 0.7; const randomS = 0.5 + Math.random() * 0.5;
particle.setScaleXY(randomS * 0.3); particle.setScaleXY(randomS);
const randomX = Math.random() * 20 - 10; const randomX = Math.random() * 20 - 10;
particle.x += randomX; particle.x += randomX;
...@@ -1596,32 +1400,16 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen ...@@ -1596,32 +1400,16 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen
const randomY = Math.random() * 20 - 10; const randomY = Math.random() * 20 - 10;
particle.y += randomY; particle.y += randomY;
const randomL = minLen + Math.random() * (maxLen - minLen); const randomL = 40 + Math.random() * 40;
const randomA = 360 * Math.random(); const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL); const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => { moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => {
}, TWEEN.Easing.Exponential.Out);
// scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem(particle, randomS, 0.6, () => {
}, TWEEN.Easing.Exponential.Out); }, TWEEN.Easing.Exponential.Out);
setTimeout(() => { scaleItem(particle, 0, 0.6, () => {
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000);
});
} }
} }
...@@ -1663,7 +1451,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1663,7 +1451,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}; };
const move1 = () => { const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => { moveItem(item, baseX + offX, baseY + offY, time / 8, () => {
move2(); move2();
}, easing); }, easing);
}; };
...@@ -1674,3 +1462,4 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1674,3 +1462,4 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
// --------------- custom class -------------------- // --------------- custom class --------------------
.game-container {
width: 100%;
height: 100%;
//background-image: url("/assets/listen-read-circle/bg.jpg");
background: #ffffff;
background-repeat: no-repeat;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
//
//
//@font-face
//{
// font-family: 'RoundedBold';
// src: url("../../assets/font/ArialRoundedBold.otf") ;
//}
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { import {
getAngleByPos,
MySprite,
getPosByAngle,
Label, Label,
MySprite, tweenChange, MyAnimation,
moveItem,
randomSortByArr,
scaleItem,
rotateItem,
tweenChange,
hideItem,
showItem,
BitMapLabel,
ColorSpr,
removeItemFromArr,
ShapeRect,
alphaItem,
circleMove,
ShapeCircle,
delayCall,
RichText,
getMinScale,
getPosDistance, jelly, showPopParticle, shake
} 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} from 'rxjs/operators';
import * as _ from 'lodash';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http';
// import {text} from "@angular/core/src/render3";
@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;
@ViewChild('canvas', {static: true }) canvas: ElementRef; @Input()
@ViewChild('wrap', {static: true }) wrap: ElementRef; set data(data) {
this._data = data;
}
get data() {
return this._data;
}
// 数据 @Input()
data; sid;
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
canvasWidth = 1280;
canvasHeight = 720;
canvasBaseW = 1280;
canvasBaseH = 720;
ctx; ctx;
fps = 0;
frametime = 0; // 上一帧动画的时间, 两帧时间差
canvasWidth = 1280; // canvas实际宽度
canvasHeight = 720; // canvas实际高度
canvasBaseW = 1280; // canvas 资源预设宽度 mx;
canvasBaseH = 720; // canvas 资源预设高度 my; // 点击坐标
mx; // 点击x坐标
my; // 点击y坐标
// 资源 // 资源
rawImages = new Map(res); rawImages = new Map(res);
rawAudios = new Map(resAudio); rawAudios = new Map(resAudio);
// 声音
bgAudio = new Audio();
successAudio = new Audio();
wrongAudio = new Audio();
rightAudio = new Audio();
titleAudio = new Audio();
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';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
KEY = 'hw_004';
// -----
picArr;
itemArrA;
itemArrB;
curItem;
linkIdArr;
petalTime;
itemBgArr;
ballArr;
lightIndex = 0;
grouoLightIndex = 0;
curLight;
goBtn;
wheel;
arrow;
lightDelayTime = 0;
questionBg;
answerLabelArr;
questionLabel;
questionLabel2;
questionPicRect;
textBgArr;
picBgArr;
answerPicArr;
idArr;
answerTypeArr = ['A', 'B', 'C', 'D'];
answerTitleArr;
lightDelayId;
rightFlag;
ballGroupArr;
animaStopRun;
animaNewStopRun;
hotZoneArr;
picRect;
closeBtn;
itemBg;
curSong;
oldFrameColorId;
curCard;
bottomCard;
picW = 370;
picH = 260;
mask;
ball;
stick;
robot;
pageW = 840;
page1;
page2;
arm1;
arm2;
centerPageArr;
pageOffX = 100;
curPic; curPic;
roleArr;
picIndex = 0;
curData;
bgTop;
topImg;
curWordArr;
wordMoveFlag;
maxScore;
bottomY;
leftScore;
rightScore;
leftScoreLabel;
rightScoreLabel;
addScoreNum = 20;
leftWin;
rightWin;
startPageArr = [];
bgArr;
rightArr;
title;
startBtn;
starArr;
wand;
light;
replayBtn;
endPageArr;
gameEndFlag;
showPetalFlag;
bg;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -77,603 +224,2893 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -77,603 +224,2893 @@ export class PlayComponent implements OnInit, OnDestroy {
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 = {};
} }
// console.log('data:' , data);
// 初始化 各事件监听 console.log('data:' , data);
this.initListener(); if (!this.data.contentObj) {
this.data.contentObj = {};
}
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData(); this.initDefaultData();
// 初始化 音频资源
this.initAudio(); this.initAudio();
// 初始化 图片资源
this.initImg(); this.initImg();
// 开始预加载资源
this.load();
}, this.saveKey); }, this.KEY);
}
ngOnDestroy() { //
window['curCtx'] = null; // // this.initAudio();
window.cancelAnimationFrame(this.animationId); // this.initImg();
// this.initListener();
} }
load() {
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data);
this.init();
this.update();
});
}
init() { initDefaultData() {
const picArr = this.data.contentObj.picArr;
// console.log('picArr: ', picArr);
if (!picArr || picArr.length == 0) {
const picArr = [];
for (let i = 0; i < 4; i ++) {
const data = {
a_text: (i + 1),
a_audio_url: "",
a_pic_url: "",
b_text: '0' + (i + 1),
b_audio_url: "",
b_pic_url: "",
};
if (i == 0) {
data.a_pic_url = 'assets/play/default/item.png';
data.b_pic_url = 'assets/play/default/item.png';
}
picArr.push(data);
}
this.data.contentObj.picArr = picArr;
}
this.initCtx();
this.initData();
this.initView();
} }
initCtx() { ngOnDestroy() {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
this.bgAudio.pause();
this.gameEndFlag = true;
clearTimeout(this.lightDelayId);
}
initData() {
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.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth; this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight; this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
this.ctx = this.canvas.nativeElement.getContext('2d'); const sx = this.canvasWidth / this.canvasBaseW;
this.canvas.nativeElement.width = this.canvasWidth; const sy = this.canvasHeight / this.canvasBaseH;
this.canvas.nativeElement.height = this.canvasHeight; const s = Math.min(sx, sy);
this.mapScale = s;
window['curCtx'] = this.ctx; // this.mapScale = this.canvasWidth / this.canvasBaseW;
} // this.mapScale = this.canvasHeight / this.canvasBaseH;
this.renderArr = [];
console.log(' in initData', this.data);
updateItem(item) {
if (item) {
item.update();
}
}
updateArr(arr) { this.canTouch = true;
if (!arr) { this.renderArr = [];
return; this.endPageArr = [];
if (!this.data.contentObj.picArr) {
this.data.contentObj.picArr = [];
} }
for (let i = 0; i < arr.length; i++) { this.picArr = this.data.contentObj.picArr;
arr[i].update(this); // this.picArr = randomSortByArr(this.picArr);
//
// // this.picArr = randomSortByArr(this.picArr);
// this.picIndex = 0;
//
for (let i = 0; i < this.picArr.length; i++) {
const data = this.picArr[i];
if (!data.optionTypeA) {
if (data.a_pic_url) {
data.optionTypeA = 'B';
} else {
data.optionTypeA = 'A';
}
}
if (!data.optionTypeB) {
if (data.b_pic_url) {
data.optionTypeB = 'B';
} else {
data.optionTypeB = 'A';
}
}
} }
}
}
initAudio() {
initListener() { const contentObj = this.data.contentObj;
if (!contentObj) { return; }
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
// --------------------------------------------- // const addAudio = (key) => {
const setParentOffset = () => { // const audioUrl = contentObj[key];
const rect = this.canvas.nativeElement.getBoundingClientRect(); // if (audioUrl) {
this.canvasLeft = rect.left; // const audio = new Audio();
this.canvasTop = rect.top; // audio.src = audioUrl;
}; // audio.load();
const setMxMyByTouch = (event) => { // this.audioObj[key] = audio;
if (event.touches.length <= 0) { // }
return; // }
} //
if (this.canvasLeft == null) { // for (let i = 0; i < 4; i ++) {
setParentOffset(); // const key = i + '_audio_url';
} // addAudio(key);
this.mx = event.touches[0].pageX - this.canvasLeft; // }
this.my = event.touches[0].pageY - this.canvasTop; //
}; // addAudio('audio_url');
//
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
// ---------------------------------------------
const addUrlToAudioObj = (audioUrl) => {
let firstTouch = true; if (audioUrl) {
const touchDownFunc = (e) => { // console.log('audioUrl:', audioUrl);
if (firstTouch) { const audio = new Audio();
firstTouch = false; audio.src = audioUrl;
removeMouseListener(); audio.load();
this.audioObj[audioUrl] = audio;
} }
setMxMyByTouch(e);
this.mapDown(e);
};
const touchMoveFunc = (e) => {
setMxMyByTouch(e);
this.mapMove(e);
};
const touchUpFunc = (e) => {
setMxMyByTouch(e);
this.mapUp(e);
}; };
const mouseDownFunc = (e) => {
if (firstTouch) {
firstTouch = false;
removeTouchListener();
}
setMxMyByMouse(e);
this.mapDown(e);
};
const mouseMoveFunc = (e) => {
setMxMyByMouse(e);
this.mapMove(e);
};
const mouseUpFunc = (e) => {
setMxMyByMouse(e);
this.mapUp(e);
};
const arr = contentObj.picArr;
const element = this.canvas.nativeElement; if (arr) {
// console.log('arr: ', arr);
for (let i = 0; i < arr.length; i++) {
addUrlToAudioObj(arr[i].a_audio_url);
addUrlToAudioObj(arr[i].b_audio_url);
}
}
const addTouchListener = () => {
element.addEventListener('touchstart', touchDownFunc);
element.addEventListener('touchmove', touchMoveFunc);
element.addEventListener('touchend', touchUpFunc);
element.addEventListener('touchcancel', touchUpFunc);
};
const removeTouchListener = () => {
element.removeEventListener('touchstart', touchDownFunc);
element.removeEventListener('touchmove', touchMoveFunc);
element.removeEventListener('touchend', touchUpFunc);
element.removeEventListener('touchcancel', touchUpFunc);
};
const addMouseListener = () => {
element.addEventListener('mousedown', mouseDownFunc);
element.addEventListener('mousemove', mouseMoveFunc);
element.addEventListener('mouseup', mouseUpFunc);
};
const removeMouseListener = () => {
element.removeEventListener('mousedown', mouseDownFunc);
element.removeEventListener('mousemove', mouseMoveFunc);
element.removeEventListener('mouseup', mouseUpFunc);
};
addMouseListener();
addTouchListener();
}
const audioObj = this.audioObj;
const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => {
playAudio(key, now = false, callback = null) { const audio = new Audio();
audio.src = url;
audio.load();
audio.loop = loop;
audio.volume = vlomue;
const audio = this.audioObj[key]; audioObj[key] = audio;
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) { if (callback) {
audio.onended = () => { audio.onended = () => {
callback(); callback();
}; };
} }
audio.play(); };
}
}
addOneAudio('click', this.rawAudios.get('click'), 1);
addOneAudio('line', this.rawAudios.get('line'), 0.4);
addOneAudio('star', this.rawAudios.get('star'), 1);
addOneAudio('wrong', this.rawAudios.get('wrong'), 1);
addOneAudio('finish', this.rawAudios.get('finish'), 1);
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value)
.then(img => {
this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(p); //
}); // const titleUrl = this.data.contentObj.title_audio_url;
// if (titleUrl) {
//
// this.titleAudio.src = titleUrl;
// this.titleAudio.load();
// }
this.rawAudios.forEach((value, key) => {// 预加载音频
const a = this.preloadAudio(value)
.then(() => {
// this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(a); // this.bgAudio.src = 'assets/bat-mail/music/bg.mp3';
}); // this.bgAudio.load();
return Promise.all(pr); // this.bgAudio.loop = true;
} // this.bgAudio.volume = 0.5;
//
// this.wrongAudio.src = 'assets/common/music/wrong.mp3';
// this.wrongAudio.load();
//
// this.rightAudio.src = 'assets/common/music/right.mp3';
// this.rightAudio.load();
//
// this.successAudio.src = 'assets/magic-hat/music/finish.mp3';
// this.successAudio.load();
//
// this.successAudio.onended = () => {
// // this.showSuccessAudio();
// };
preload(url) {
return new Promise((resolve, reject) => {
const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
preloadAudio(url) {
return new Promise((resolve, reject) => {
const audio = new Audio();
audio.oncanplay = (a) => {
resolve();
};
audio.onerror = () => {
reject();
};
audio.src = url;
audio.load();
});
} }
initImg() {
renderAfterResize() { const contentObj = this.data.contentObj;
this.canvasWidth = this.wrap.nativeElement.clientWidth; if (contentObj) {
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
const addPicUrl = (url) => {
if (url) {
this.rawImages.set(url, url);
}
};
const arr = this.data.contentObj.picArr;
if (arr) {
checkClickTarget(target) { for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].a_pic_url);
addPicUrl( arr[i].b_pic_url);
const rect = target.getBoundingBox(); }
}
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
} }
return false;
}
getWorlRect(target) {
let rect = target.getBoundingBox(); // this.initFontImg();
if (target.parent) {
const pRect = this.getWorlRect(target.parent);
rect.x += pRect.x;
rect.y += pRect.y;
}
return rect;
}
checkPointInRect(x, y, rect) { // 预加载资源
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
this.loadResources().then(() => {
// this.setfontData();
window['air'].hideAirClassLoading(this.KEY, this.data);
this.init();
this.update();
});
}
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { initFontImg() {
// const fontbaseUrlW = 'assets/mechanical/letter/';
// const fontDataW = {};
//
// let num = 97;
// for (let i = 0; i < 26; i++) {
//
// const key = String.fromCharCode(num + i); // 'a'
// const url = fontbaseUrlW + key + '.png';
//
// this.rawImages.set(url, url);
// fontDataW[key] = url;
// }
//
//
// this.fontDataW = fontDataW;
}
const audioObj = this.audioObj; setfontData() {
if (url == null) { // for (let key in this.fontDataW) {
url = key; // this.fontDataW[key] = this.images.get(this.fontDataW[key]);
} // }
}
this.rawAudios.set(key, url);
const audio = new Audio();
audio.src = url;
audio.load();
audio.loop = loop;
audio.volume = vlomue;
audioObj[key] = audio;
if (callback) {
audio.onended = () => {
callback();
};
}
}
addUrlToImages(url) {
this.rawImages.set(url, url);
}
init() {
this.initData();
this.initCtx();
this.initView();
this.initListener();
// ======================================================编写区域==========================================================================
}
initCtx() {
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
window['curCtx'] = this.ctx;
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if (!this.data.pic_url) { // console.log('this.ctx.canvas w: ', this.ctx.canvas.width);
this.data.pic_url = 'assets/play/default/pic.jpg'; // console.log('this.ctx.canvas h: ', this.ctx.canvas.height);
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
} }
/** initView() {
* 添加预加载图片
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
this.initBg();
this.initItem();
// this.initWheel();
//
// this.showStartAnima();
//
// this.initLightAnimaNew();
//
// this.initQuestionWindow();
//
// this.playAudio('bg');
} }
/**
* 添加预加载音频
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 initItem() {
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
}
const picArr = this.picArr;
let itemW, edgeW, disW, disH, offX, offY;
/** if (picArr.length <= 6) {
* 初始化数据
*/
initData() {
const sx = this.canvasWidth / this.canvasBaseW; itemW = 215 * this.mapScale;
const sy = this.canvasHeight / this.canvasBaseH; edgeW = 10 * this.mapScale;
const s = Math.min(sx, sy); disW = (this.canvasWidth - itemW * 6 - edgeW * 2) / 5;
this.mapScale = s; disH = 300 * this.mapScale;
// this.mapScale = sx; offX = this.canvasWidth / 2 - (picArr.length - 1) * (itemW + disW) / 2;
// this.mapScale = sy; offY = this.canvasHeight / 2 - disH / 2 + 70 * this.mapScale;
} else {
this.renderArr = []; // itemW = 215 * this.mapScale;
const rate = 10; // 距离与图片比例 10:1
edgeW = 10 * this.mapScale;
itemW = (this.canvasWidth - edgeW / 2) / (picArr.length * rate + picArr.length + 1) * rate;
disW = itemW / rate;
disH = 300 * this.mapScale;
offX = this.canvasWidth / 2 - (picArr.length - 1) * (itemW + disW) / 2;
offY = this.canvasHeight / 2 - disH / 2 + 70 * this.mapScale;
}
const tmpS = itemW / 215;
const rectW = 157 * tmpS;
}
let dataArrA = [];
let dataArrB = [];
for (let i = 0; i < picArr.length; i ++) {
const picData = picArr[i];
/** let tmpData = {};
* 初始化试图 tmpData['id'] = i;
*/ tmpData['text'] = picData.a_text;
initView() { tmpData['pic_url'] = picData.a_pic_url;
tmpData['audio_url'] = picData.a_audio_url;
tmpData['optionType'] = picData.optionTypeA;
dataArrA.push(tmpData);
tmpData = {};
tmpData['id'] = i;
tmpData['text'] = picData.b_text;
tmpData['pic_url'] = picData.b_pic_url;
tmpData['audio_url'] = picData.b_audio_url;
tmpData['optionType'] = picData.optionTypeB;
dataArrB.push(tmpData);
}
this.initPic(); dataArrA = randomSortByArr(dataArrA);
dataArrB = randomSortByArr(dataArrB);
this.initBottomPart(); // this.itemArrA = itemArrA;
// this.itemArrB = itemArrB;
}
initBottomPart() {
const btnLeft = new MySprite(); this.itemArrA = [];
btnLeft.init(this.images.get('btn_left')); this.itemArrB = [];
btnLeft.x = this.canvasWidth - 150 * this.mapScale; for (let i = 0; i < picArr.length; i ++) {
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft); const dataA = dataArrA[i];
this.btnLeft = btnLeft; let itemBg = new MySprite();
itemBg.init(this.images.get('item_bg'));
itemBg.setScaleXY(itemW / itemBg.width);
itemBg.x = offX + i * (itemW + disW);
itemBg.y = offY;
let bgRect = new ShapeRect();
// bgRect.setSize(rectW, rectW);
bgRect.setSize(157, 157);
bgRect.init();
// bgRect.x = itemBg.x;
// bgRect.y = itemBg.y;
bgRect.fillColor = '#ffffff';
itemBg.addChild(bgRect, -1);
// this.renderArr.push(bgRect);
if (dataA.optionType == 'B') {
let pic = new MySprite();
pic.init(this.images.get(dataA.pic_url));
pic.setScaleXY(getMinScale(pic, bgRect.width - 2));
bgRect.addChild(pic);
} else {
const label = new Label();
label.text = dataA.text;
label.fontName = 'BRLNSDB';
label.textAlign = 'center';
label.fontSize = 64;
label.setMaxSize(bgRect.width - 20);
const btnRight = new MySprite(); bgRect.addChild(label);
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); let dot = new MySprite();
dot.init(this.images.get('dot'));
dot.y = itemBg.height / 2 - 25;
dot.visible = false;
itemBg.addChild(dot);
itemBg['dot'] = dot;
itemBg['type'] = 'A';
itemBg['data'] = dataA;
this.renderArr.push(itemBg);
this.itemArrA.push(itemBg);
const dataB = dataArrB[i];
itemBg = new MySprite();
itemBg.init(this.images.get('item_bg'));
itemBg.setScaleXY(itemW / itemBg.width);
itemBg.x = offX + i * (itemW + disW);
itemBg.y = offY + disH;
bgRect = new ShapeRect();
// bgRect.setSize(rectW, rectW);
bgRect.setSize(157, 157);
bgRect.init();
// bgRect.x = itemBg.x;
// bgRect.y = itemBg.y;
bgRect.fillColor = '#ffffff';
itemBg.addChild(bgRect, -1);
// this.renderArr.push(bgRect);
if (dataB.optionType == 'B') {
let pic = new MySprite();
pic.init(this.images.get(dataB.pic_url));
pic.setScaleXY(getMinScale(pic, bgRect.width - 2));
bgRect.addChild(pic);
} else {
const label = new Label();
label.text = dataB.text;
label.fontName = 'BRLNSDB';
label.textAlign = 'center';
label.fontSize = 64;
label.setMaxSize(bgRect.width - 20);
bgRect.addChild(label);
}
this.btnRight = btnRight; dot = new MySprite();
dot.init(this.images.get('dot'));
dot.y = -itemBg.height / 2 + 25;
dot.visible = false;
itemBg.addChild(dot);
itemBg['dot'] = dot;
itemBg['type'] = 'B';
itemBg['data'] = dataB;
this.renderArr.push(itemBg);
this.itemArrB.push(itemBg);
}
}
showStartAnima() {
const go = new MySprite(this.ctx);
go.init(this.images.get('go'));
go.setScaleXY(this.mapScale);
go.x = this.canvasWidth + go.width * go.scaleX;
go.y = this.canvasHeight - go.height / 2 * go.scaleY - 30 * this.mapScale;
this.renderArr.push(go);
this.goBtn = go;
const targetX = this.canvasWidth - go.width / 2 * go.scaleX - 30 * this.mapScale;
moveItem(go, targetX, go.y, 0.7, () => {
}, TWEEN.Easing.Cubic.Out);
this.playAudio('enter');
}
initLightAnima() {
clearTimeout(this.lightDelayId);
if (this.animaStopRun) {
return;
}
const delayTime = this.lightDelayTime;
// delayCall(delayTime, () => {
this.lightDelayId = setTimeout(() => {
if (this.animaStopRun) {
return;
}
if (this.curLight) {
hideItem(this.curLight, 0.02, null, TWEEN.Easing.Cubic.Out);
}
this.curLight = this.ballArr[this.lightIndex].light;
showItem(this.curLight, 0.02, () => {
this.initLightAnima();
}, TWEEN.Easing.Cubic.Out);
this.lightIndex--;
if (this.lightIndex < 0) {
this.lightIndex = this.ballArr.length - 1;
}
// });
}, delayTime * 1000);
}
initLightAnimaNew() {
// console.log(' in initLightAnimaNew');
clearTimeout(this.lightDelayId);
if (this.animaNewStopRun) {
return;
}
const delayTime = this.lightDelayTime;
// delayCall(delayTime, () => {
this.lightDelayId = setTimeout(() => {
// if (this.curLight) {
// hideItem(this.curLight, 0.02, null, TWEEN.Easing.Cubic.Out);
// }
//
if (this.animaNewStopRun) {
return;
}
this.lightDelayTime = 1;
for (let i = 0; i < this.ballGroupArr.length; i++) {
if (i != this.grouoLightIndex) {
const arr = this.ballGroupArr[i].arr;
for (let j = 0; j < arr.length; j++) {
hideItem(arr[j], 0.02);
}
}
}
// this.curLight = this.ballArr[this.lightIndex].light;
const lightArr = this.ballGroupArr[this.grouoLightIndex].arr;
for (let i = 0; i < lightArr.length; i++) {
if (i == lightArr.length - 1) {
showItem(lightArr[i], 0.02, () => {
this.initLightAnimaNew();
}, TWEEN.Easing.Cubic.Out);
} else {
showItem(lightArr[i], 0.02, () => {
}, TWEEN.Easing.Cubic.Out);
}
}
// showItem(this.curLight, 0.02, () => {
// this.initLightAnima();
// }, TWEEN.Easing.Cubic.Out);
this.grouoLightIndex--;
if (this.grouoLightIndex < 0) {
this.grouoLightIndex = this.ballGroupArr.length - 1;
}
// this.lightIndex--;
// if (this.lightIndex < 0) {
// this.lightIndex = this.ballArr.length - 1;
// }
// });
}, delayTime * 1000);
}
initQuestionWindow() {
const mask = new ShapeRect(this.ctx);
mask.setSize(this.canvasWidth, this.canvasHeight);
mask.fillColor = '#000000';
mask.alpha = 0.7;
mask.visible = false;
this.mask = mask;
const bg = new MySprite(this.ctx);
bg.init(this.images.get('question_bg'));
bg.setScaleXY(this.mapScale);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
mask.addChild(bg);
this.questionBg = bg;
const w = 1020;
const h = 230;
const w2 = 740;
const labelRect1 = new ShapeRect(this.ctx);
labelRect1.setSize(w2, h);
labelRect1.alpha = 0;
labelRect1.x = -bg.width / 2 + 75;
labelRect1.y = -bg.height / 2 + 60;
bg.addChild(labelRect1);
const richText = new RichText(this.ctx);
richText.text = '';
richText.disH = 0;
richText.fontName = 'RoundedBold';
richText.width = w2;
richText.x = labelRect1.x; // + labelRect1.width / 2;
richText.y = labelRect1.y + labelRect1.height / 2 - richText.fontSize / 2;
richText.fontSize = 48;
bg.addChild(richText);
this.questionLabel = richText;
const picRect = new ShapeRect(this.ctx);
picRect.setSize(h, h);
picRect.alpha = 0;
picRect.x = labelRect1.x + w - picRect.width;
picRect.y = labelRect1.y;
bg.addChild(picRect);
this.questionPicRect = picRect;
// const labelRect2 = new ShapeRect(this.ctx);
// labelRect2.setSize(w, h);
// labelRect2.alpha = 0.3;
// labelRect2.x = labelRect1.x;
// labelRect2.y = labelRect1.y;
// bg.addChild(labelRect2);
const richText2 = new RichText(this.ctx);
richText2.text = '';
richText2.disH = 0;
richText2.fontName = 'RoundedBold';
richText2.width = w;
richText2.x = labelRect1.x; // + labelRect1.width / 2;
richText2.y = labelRect1.y + labelRect1.height / 2 - richText.fontSize / 2;
richText2.fontSize = 48;
bg.addChild(richText2);
this.questionLabel2 = richText2;
const textBgH = 81;
const disH = 5;
const offX = labelRect1.x;
const offY = labelRect1.y + labelRect1.height + textBgH / 2 + 15;
this.textBgArr = [];
this.answerLabelArr = [];
const keyArr = ['a', 'b', 'c', 'd'];
for (let i = 0; i < 4; i++) {
const key = 'text_bg_' + keyArr[i];
const textBg = new MySprite(this.ctx);
textBg.init(this.images.get(key));
textBg.x = offX + textBg.width / 2;
textBg.y = offY + i * (textBgH + disH);
bg.addChild(textBg, 2);
this.textBgArr.push(textBg);
const label = new Label(this.ctx);
label.fontName = 'RoundedBold';
label.text = 'aaaaaaaa';
label.fontColor = '#000000';
// label.textAlign = 'center';
label.fontSize = 50;
label.setMaxSize(textBg.width - 230);
label.refreshSize();
label.x = -textBg.width / 2 + 90;
textBg.addChild(label);
const rightBg = new MySprite(this.ctx);
rightBg.init(this.images.get('text_right'));
rightBg.x = textBg.x;
rightBg.y = textBg.y;
bg.addChild(rightBg, 1);
rightBg.visible = false;
textBg['rightBg'] = rightBg;
const wrongBg = new MySprite(this.ctx);
wrongBg.init(this.images.get('text_wrong'));
wrongBg.x = textBg.x;
wrongBg.y = textBg.y;
bg.addChild(wrongBg, 1);
wrongBg.visible = false;
textBg['wrongBg'] = wrongBg;
this.answerLabelArr.push(label);
}
this.picBgArr = [];
this.answerTitleArr = [];
const picBgW = 236;
const disW = (w - picBgW * 4) / 3;
for (let i = 0; i < 4; i ++) {
const key = 'pic_bg_' + keyArr[i];
const picBg = new MySprite(this.ctx);
picBg.init(this.images.get(key));
picBg.x = offX + picBg.width / 2 + i * (picBgW + disW);
picBg.y = offY + picBg.height / 2 - textBgH / 2;
bg.addChild(picBg);
this.picBgArr.push(picBg);
const rightBg = new MySprite(this.ctx);
rightBg.init(this.images.get('pic_right'));
rightBg.x = picBg.x;
rightBg.y = picBg.y;
bg.addChild(rightBg, 1);
rightBg.visible = false;
picBg['rightBg'] = rightBg;
const wrongBg = new MySprite(this.ctx);
wrongBg.init(this.images.get('pic_wrong'));
wrongBg.x = picBg.x;
wrongBg.y = picBg.y;
bg.addChild(wrongBg, 1);
wrongBg.visible = false;
picBg['wrongBg'] = wrongBg;
const textKey = 'text_' + keyArr[i];
const title = new MySprite(this.ctx);
title.init(this.images.get(textKey));
title.x = picBg.x;
title.y = picBg.y - picBg.height / 2 + 39;
bg.addChild(title);
this.answerTitleArr.push(title);
}
this.hideArr(this.textBgArr);
const closeBtn = new MySprite(this.ctx);
closeBtn.init(this.images.get('close_btn'));
bg.addChild(closeBtn);
closeBtn.x = bg.width / 2 - 25;
closeBtn.y = -bg.height / 2 + 50;
this.closeBtn = closeBtn;
}
initItemView() {
}
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.imgArr = [];
// const arr = this.data.contentObj.imgItemArr;
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]));
// const img = {pic_url: data.pic_url};
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);
// hotZone['audio'] = this.audioObj[data.audio_url];
// this.imgArr.push(img);
}
//
//
// const hotZoneItemArr = this.data.contentObj.hotZoneItemArr;
// if (!hotZoneItemArr) {
// return;
// }
//
// if (!this.bg) {
// return;
// }
//
// const bgRect = this.bg.getBoundingBox();
// const bgItem = this.data.contentObj.bgItem;
//
// const rate = bgRect.width / bgItem.rect.width;
//
//
// for (let i = 0; i < hotZoneItemArr.length; i++) {
//
// const tmpData = hotZoneItemArr[i];
// const shapeRect = new ShapeRect(this.ctx);
// shapeRect.anchorX = 0;
// shapeRect.anchorY = 0;
// shapeRect.setSize(tmpData.rect.width, tmpData.rect.height);
// shapeRect.setScaleXY(this.bg.scaleX);
// shapeRect.x = (bgItem.rect.x - bgRect.x + tmpData.rect.x ) / rate;
// shapeRect.y = (bgItem.rect.y - bgRect.y + tmpData.rect.y ) / rate;
//
// // shapeRect.x = tmpData.rect.x - this.bg.width / 2;
// // shapeRect.y = tmpData.rect.y - this.bg.height / 2;
// // this.bg.addChild(shapeRect);
//
// this.renderArr.push(shapeRect);
// }
}
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);
// console.log('data: ', data);
return item;
}
initCard() {
const card = new MySprite(this.ctx);
card.init(this.images.get(this.getFrameColor()));
card.setScaleXY(this.mapScale);
card.x = this.canvasWidth / 2;
card.y = this.canvasHeight / 2;
this.addPic(card);
this.renderArr.push(card);
this.curCard = card;
this.addBottomCard();
}
getFrameColor() {
let arr = ['1', '2', '3'];
if (this.oldFrameColorId) {
removeItemFromArr(arr, this.oldFrameColorId);
}
arr = randomSortByArr(arr);
const colorId = arr[0];
this.oldFrameColorId = colorId;
return 'frame_' + colorId;
}
addPic(card) {
const curData = this.picArr[this.picIndex];
const w = 340;
const h = 340;
const pic = new MySprite(this.ctx);
pic.init(this.images.get(curData.pic_url));
const sx = w / pic.width;
const sy = h / pic.height;
const s = Math.min(sx, sy);
pic.setScaleXY(s);
pic.x = 5;
card.addChild(pic);
card.data = curData;
this.picIndex ++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
}
}
initRobot() {
const robot = new MySprite(this.ctx);
robot.init(this.images.get('robot'));
robot.setScaleXY(this.mapScale);
robot.x = this.canvasWidth / 2 - 50 * this.mapScale;
robot.y = this.canvasHeight / 2 + 50 * this.mapScale;
this.renderArr.push(robot);
this.robot = robot;
const stick = new MySprite(this.ctx);
stick.init(this.images.get('stick'));
stick.anchorY = 0.95;
stick.x = robot.width / 2 + stick.width / 2 - 5;
stick.y = -25;
robot.addChild(stick);
this.stick = stick;
const ball = new MySprite(this.ctx);
ball.init(this.images.get('ball'));
ball.x = stick.x;
ball.y = stick.y - stick.height;
robot.addChild(ball);
this.ball = ball;
const mask = new MySprite(this.ctx);
mask.init(this.images.get('mask'));
mask.x = 31;
mask.y = 2;
robot.addChild(mask);
this.mask = mask;
// const w = 800;
// const h = 260;
// const rect = new ShapeRect(this.ctx);
// rect.setSize(w, h);
// rect.anchorX = 0.5;
// rect.anchorY = 0.5;
// mask.addChild(rect);
}
initBg() {
this.bgArr = [];
const bg = new MySprite();
bg.init(this.images.get('bg'));
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(s);
this.bgArr.push(bg);
const title = new MySprite();
title.init(this.images.get('title'));
title.setScaleXY(this.mapScale);
title.x = this.canvasWidth / 2;
title.y = this.canvasHeight / 2 - 270 * this.mapScale;
this.bgArr.push(title);
}
initWheel() {
//
// const wheelBottom = new MySprite(this.ctx);
// wheelBottom.init(this.images.get('wheel_bottom'));
// wheelBottom.x = this.canvasWidth / 2;
// wheelBottom.y = this.canvasHeight / 2;
// wheelBottom.setScaleXY(this.mapScale);
// this.renderArr.push(wheelBottom);
//
//
// const num = this.picArr.length;
// const colorArr = ['#efd303', '#f0b904', '#ef9303'];
// const len = wheelBottom.width / 2 * wheelBottom.scaleX * 0.78;
// const wheel = new Wheel(this.ctx);
// wheel.initWheel(num, len, colorArr);
// wheel.x = wheelBottom.x;
// wheel.y = wheelBottom.y - 5;
// this.renderArr.push(wheel);
// this.wheel = wheel;
//
//
// const arrow = new MySprite(this.ctx);
// arrow.init(this.images.get('arrow'));
// arrow.setScaleXY(this.mapScale);
// arrow.x = wheel.x;
// arrow.y = wheel.y;
// this.renderArr.push(arrow);
// this.arrow = arrow;
// arrow['baseY'] = arrow.y;
//
//
// const wheelTop = new MySprite(this.ctx);
// wheelTop.init(this.images.get('wheel_top'));
// wheelTop.setScaleXY(this.mapScale);
// wheelTop.x = wheel.x;
// wheelTop.y = wheel.y;
// this.renderArr.push(wheelTop);
//
//
//
//
// const title = new MySprite(this.ctx);
// title.init(this.images.get('title'));
// title.setScaleXY(this.mapScale);
// title.x = (wheelBottom.x - wheelBottom.width / 2 * wheelBottom.scaleX) / 2;
// title.y = title.height * title.scaleY;
// this.bgArr.push(title);
//
//
//
//
// const addBallLight = (ball, key) => {
//
// const light = new MySprite(this.ctx);
// light.init(this.images.get(key + '_light'));
// // light.visible = false;
// light.alpha = 0;
// ball.addChild(light);
// ball.light = light;
// return light;
// };
//
//
// this.ballArr = [];
// let ballId = 1;
// const ballLen = len * 1.1;
// const addAngle = Math.round(360 / 16 * 100) / 100;
// let ballGroupObj = {};
// for (let i = 0; i < 16; i++) {
//
// const angle = i * addAngle;
// const pos = getPosByAngle(angle, ballLen);
//
//
// const key = 'ball_' + ballId;
// const ball = new MySprite(this.ctx);
// ball.init(this.images.get(key));
// ball.x = wheel.x ; // - 2;
// ball.y = wheel.y ; // - 5;
// ball.x += pos.x;
// ball.y += pos.y;
// this.renderArr.push(ball);
// // wheelBottom.addChild(ball);
// ball.setScaleXY(this.mapScale);
// const light = addBallLight(ball, key);
// this.ballArr.push(ball);
//
// if (!ballGroupObj[key]) {
// ballGroupObj[key] = {};
// ballGroupObj[key].id = ballId;
// ballGroupObj[key].arr = [];
// }
// ballGroupObj[key].arr.push(light);
//
//
// ballId ++;
// if (ballId > 4) {
// ballId = 1;
// }
// }
//
// this.ballGroupArr = [];
// for (let key in ballGroupObj) {
// this.ballGroupArr.push(ballGroupObj[key]);
// }
// this.ballGroupArr.sort((a, b) => {
// return a.id - b.id;
// });
//
//
// for (let i = 0; i < this.picArr.length; i++) {
//
// const picData = this.picArr[i];
// let pic;
// if (picData.pic_url) {
// pic = new MySprite(this.ctx);
// pic.init(this.images.get(picData.pic_url));
// } else {
// const label = new Label(this.ctx);
// label.text = picData.title;
// label.fontName = 'BRLNSDB';
// label.fontColor = '#000000';
// label.textAlign = 'center';
// label.refreshSize();
// pic = label;
// }
//
// this.wheel.addItem(pic, this.mapScale);
// }
}
resetArm() {
this.arm1.page1.removeChildren();
this.arm1.page2.removeChildren();
this.arm2.page1.removeChildren();
this.arm2.page2.removeChildren();
this.arm1.x = this.arm1.baseX;
this.arm1.y = this.arm1.baseY;
this.arm2.x = this.arm2.baseX;
this.arm2.y = this.arm2.baseY;
this.arm1.page1.visible = true;
this.arm2.page1.visible = true;
this.arm1.page2.visible = false;
this.arm2.page2.visible = false;
this.picIndex ++ ;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
this.picArr = randomSortByArr(this.picArr);
}
this.setPagePoint();
this.initPic();
} }
initPic() { initPic() {
const maxW = this.canvasWidth * 0.7; const w = 370; // * this.mapScale;
const h = 260;
const itemBgArr = this.itemBgArr;
// console.log('picArr:', this.picArr);
for (let i = 0; i < itemBgArr.length; i++) {
const itemBg = itemBgArr[i];
const picData = this.picArr[i];
if (picData) {
const picUrl = picData.pic_url;
// console.log('pirUrl: ', picUrl);
const pic = new MySprite(this.ctx);
pic.init(this.images.get(picUrl));
const sx = w / pic.width;
const sy = h / pic.height;
const s = Math.min(sx, sy);
pic.setScaleXY(s);
pic.x = -1;
pic.y = -9;
itemBg.addChild(pic);
itemBg['pic'] = pic;
}
const iconKey = 'icon_' + (i + 1);
const icon = new MySprite(this.ctx);
icon.init(this.images.get(iconKey));
icon.x = - itemBg.width / 2 + 40;
icon.y = - itemBg.height / 2 + 40;
itemBg.addChild(icon);
}
}
initArm() {
const pageOffX = this.pageOffX;
const arm1 = new MySprite(this.ctx);
arm1.init(this.images.get('arm_1_1'), 0, 1);
arm1.setScaleXY(this.mapScale);
arm1.x = - arm1.width * arm1.scaleX - this.pageW / 2 * this.mapScale;
arm1.y = this.canvasHeight + 60 * this.mapScale;
this.renderArr.push(arm1);
const page1 = new MySprite(this.ctx);
page1.init(this.images.get('page_1'), 0);
page1.x = arm1.width - pageOffX;
page1.y = - arm1.height + 80;
arm1.addChild(page1);
page1.alpha = 1;
const page1_2 = new MySprite(this.ctx);
page1_2.init(this.images.get('page_1_2'), 0);
page1_2.x = page1.x;
page1_2.y = page1.y;
page1_2.visible = false;
arm1.addChild(page1_2);
arm1['page1'] = page1;
arm1['page2'] = page1_2;
arm1['baseX'] = arm1.x;
arm1['baseY'] = arm1.y;
const finger = new MySprite(this.ctx);
finger.init(this.images.get('finger_1_1'), 0, 1);
arm1.addChild(finger);
const arm2 = new MySprite(this.ctx);
arm2.init(this.images.get('arm_2_1'), 1, 1);
arm2.setScaleXY(this.mapScale);
arm2.x = this.canvasWidth + arm2.width * arm2.scaleX + this.pageW / 2 * this.mapScale;
arm2.y = arm1.y;
this.renderArr.push(arm2);
const page2 = new MySprite(this.ctx);
page2.init(this.images.get('page_2'), 1);
page2.x = -arm2.width + pageOffX;
page2.y = - arm2.height + 80;
page2.alpha = 1;
arm2.addChild(page2);
const page2_2 = new MySprite(this.ctx);
page2_2.init(this.images.get('page_2_2'), 1);
page2_2.x = page2.x;
page2_2.y = page2.y;
page2_2.visible = false;
arm2.addChild(page2_2);
arm2['baseX'] = arm2.x;
arm2['baseY'] = arm2.y;
arm2['page1'] = page2;
arm2['page2'] = page2_2;
const finger2 = new MySprite(this.ctx);
finger2.init(this.images.get('finger_2_1'), 1, 1);
arm2.addChild(finger2);
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (arm1.width) * arm1.scaleX + pageOffX * arm1.scaleX;
// moveItem(arm1, tx, arm1.y);
//
// moveItem(arm2, this.canvasWidth - tx, arm2.y);
this.page1 = page1;
this.page2 = page2;
this.arm1 = arm1;
this.arm2 = arm2;
}
setPagePoint() {
const page1 = this.page1;
const page2 = this.page2;
const curData = this.picArr[this.picIndex];
console.log('this.picArr: ', this.picArr);
console.log('curData: ', curData);
if (!curData) {
return;
}
const wordArr1 = curData.wordArr_1;
const wordArr2 = curData.wordArr_2;
const centerW = 60;
const edge = 20;
const maxW = page1.width - (centerW + edge * 2);
let num = wordArr1.length;
let disW = 20;
let circleW = 68;
let totalW = edge * 2 + circleW * num + disW * (num - 1);
let s = 1;
if (totalW >= maxW) {
s = maxW / totalW;
totalW = maxW;
}
disW *= s;
circleW *= s;
let offX = (maxW - totalW) / 2 + edge + circleW / 2;
// const disW = (w - circleW * 3) / 4;
// const offX = disW + circleW / 2;
for (let i = 0; i < wordArr1.length; i++) {
const tmpData = wordArr1[i];
let color = 'green';
if (tmpData.color) {
color = tmpData.color;
}
const point = new MySprite(this.ctx);
const key = 'point_' + color;
point.init(this.images.get(key));
point.setScaleXY(s);
point.x = offX + i * (circleW + disW);
page1.addChild(point);
}
num = wordArr2.length;
disW = 20;
circleW = 68;
totalW = edge * 2 + circleW * num + disW * (num - 1);
s = 1;
if (totalW >= maxW) {
s = maxW / totalW;
totalW = maxW;
}
disW *= s;
circleW *= s;
offX = (maxW - totalW) / 2 + edge + circleW / 2;
for (let i = 0; i < wordArr2.length; i++) {
const tmpData = wordArr2[i];
let color = 'green';
if (tmpData.color) {
color = tmpData.color;
}
const point = new MySprite(this.ctx);
const key = 'point_' + color;
point.init(this.images.get(key));
point.setScaleXY(s);
point.x = (offX + centerW - page2.width) + i * (circleW + disW);
page2.addChild(point);
}
}
initCenterPage() {
this.centerPageArr = [];
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (this.arm1.width) * this.arm1.scaleX + this.pageOffX * this.arm1.scaleX;
const arm1_2 = new MySprite(this.ctx);
arm1_2.init(this.images.get('arm_1_2'), 0, 1);
arm1_2.setScaleXY(this.mapScale);
arm1_2.x = tx;
arm1_2.y = this.arm1.y;
// arm1_2.visible = false;
this.centerPageArr.push(arm1_2);
const finger = new MySprite(this.ctx);
finger.init(this.images.get('finger_1_2'), 0, 1);
arm1_2.addChild(finger, -2);
const arm2_2 = new MySprite(this.ctx);
arm2_2.init(this.images.get('arm_2_2'), 1, 1);
arm2_2.setScaleXY(this.mapScale);
arm2_2.x = this.canvasWidth - tx;
arm2_2.y = this.arm2.y;
// arm2_2.visible = false;
this.centerPageArr.push(arm2_2);
const finger2 = new MySprite(this.ctx);
finger2.init(this.images.get('finger_2_2'), 1, 1);
arm2_2.addChild(finger2, -2);
const centerPage = new MySprite(this.ctx);
centerPage.init(this.images.get('center_page'), 0);
centerPage.x = this.page1.x;
centerPage.y = this.page1.y;
arm1_2.addChild(centerPage, -1);
this.hideArr(this.centerPageArr);
// this.hideArr(this.centerPageArr);
}
initStartPage() {
this.starArr = [];
const maskLayer = new ShapeRect(this.ctx);
maskLayer.init(this.images.get(''));
maskLayer.setSize(this.canvasWidth, this.canvasHeight);
maskLayer.x = this.canvasWidth / 2;
maskLayer.y = this.canvasHeight / 2;
maskLayer.fillColor = '#000000';
maskLayer.alpha = 0.8;
this.startPageArr.push(maskLayer);
const startBtn = new MySprite(this.ctx);
startBtn.init(this.images.get('start_btn'));
startBtn.x = this.canvasWidth / 2;
startBtn.y = this.canvasHeight / 5 * 3;
startBtn.setScaleXY(this.mapScale);
this.startPageArr.push(startBtn);
this.startBtn = startBtn;
}
initEndPage() {
const maskLayer = new ShapeRect(this.ctx);
maskLayer.init(this.images.get(''));
maskLayer.setSize(this.canvasWidth, this.canvasHeight);
maskLayer.x = this.canvasWidth / 2;
maskLayer.y = this.canvasHeight / 2;
maskLayer.fillColor = '#000000';
maskLayer.alpha = 0.8;
this.endPageArr.push(maskLayer);
const leftWin = new MySprite(this.ctx);
leftWin.init(this.images.get('left_win'));
leftWin.x = this.canvasWidth / 2;
leftWin.y = this.canvasHeight / 2.5;
leftWin.setScaleXY(this.mapScale);
this.endPageArr.push(leftWin);
const rightWin = new MySprite(this.ctx);
rightWin.init(this.images.get('right_win'));
rightWin.x = this.canvasWidth / 2;
rightWin.y = this.canvasHeight / 2.5;
rightWin.setScaleXY(this.mapScale);
this.endPageArr.push(rightWin);
this.leftWin = leftWin;
this.rightWin = rightWin;
// const light = new MySprite(this.ctx);
// light.init(this.images.get('light_png'));
// light.x = this.canvasWidth / 2;
// light.y = this.canvasHeight / 5 * 2;
// light.setScaleXY(this.mapScale);
// this.endPageArr.push(light);
// this.light = light;
//
// const hand = new MySprite(this.ctx);
// hand.init(this.images.get('hand_png'));
// hand.x = this.canvasWidth / 2;
// hand.y = light.y;
// hand.setScaleXY(this.mapScale);
// this.endPageArr.push(hand);
// this.hand = hand;
const replayBtn = new MySprite(this.ctx);
replayBtn.init(this.images.get('replay_btn'));
replayBtn.x = this.canvasWidth / 2;
replayBtn.y = this.canvasHeight / 5 * 3.5;
replayBtn.setScaleXY(this.mapScale);
this.endPageArr.push(replayBtn);
this.replayBtn = replayBtn;
this.hideArr(this.endPageArr);
// const lightAction = () => {
// light.rotation = 0;
// rotateItem(light, 360, 10, () => {
// lightAction();
// });
// };
//
// lightAction();
}
initScore() {
const addLabelShadow = (label) => {
const labelShadow = new Label(this.ctx);
labelShadow.init();
labelShadow.text = label.text;
labelShadow.fontSize = label.fontSize;
labelShadow.fontName = label.fontName;
labelShadow.fontColor = '#e4688f';
labelShadow.textAlign = 'center';
labelShadow.y = 3;
labelShadow.setShadow(0, 2, 2, 'rgba(154, 23, 58, 0.5)');
label.addChild(labelShadow, -1);
label.shadowLabel = labelShadow;
};
const labelLeft = new Label(this.ctx);
labelLeft.init();
labelLeft.text = '0';
labelLeft.fontSize = 60;
labelLeft.fontName = 'BRLNSDB';
labelLeft.fontColor = '#fef9ff';
labelLeft.textAlign = 'center';
labelLeft.x = - this.bgTop.width / 4;
labelLeft.y = this.bgTop.height / 5;
labelLeft.refreshSize();
addLabelShadow(labelLeft);
this.bgTop.addChild(labelLeft);
this.leftScoreLabel = labelLeft;
const labelRight = new Label(this.ctx);
labelRight.init();
labelRight.text = '0';
labelRight.fontSize = 60;
labelRight.fontName = 'BRLNSDB';
labelRight.fontColor = '#fef9ff';
labelRight.textAlign = 'center';
labelRight.x = this.bgTop.width / 4;
labelRight.y = this.bgTop.height / 5;
labelRight.refreshSize();
addLabelShadow(labelRight);
this.bgTop.addChild(labelRight);
this.rightScoreLabel = labelRight;
// console.log('label.width: ', label.width);
}
showEndPage() {
this.showArr(this.endPageArr);
this.canTouch = true;
this.gameEndFlag = true;
this.showEndPatal();
this.successAudio.play();
if (this.leftScore >= this.maxScore) {
this.rightWin.visible = false;
} else {
this.leftWin.visible = false;
}
}
showEndPatal() {
this.endPageArr = [];
this.showPetalFlag = true;
this.addPetal();
}
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(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;
}
gameEnd() {
// this.showEndPage();
this.canTouch = true;
this.petalTime = 0;
this.playAudio('finish');
this.showEndPatal();
setTimeout(() => {
this.showPetalFlag = false;
}, 5000);
}
mapDown(event) {
if (!this.canTouch) {
return;
}
console.log(' in mapDown ');
const arr = this.itemArrA.concat(this.itemArrB);
for (let i = 0; i < arr.length; i++) {
if (this.checkClickTarget(arr[i])) {
this.clickItem(arr[i]);
return;
}
}
}
clickTextBg(index) {
if (this.rightFlag) {
return;
}
const data = this.picArr[this.picIndex];
if (index == Number(data.answerId)) {
this.textBgArr[index].rightBg.visible = true;
this.rightFlag = true;
this.playAudio('right');
} else {
this.textBgArr[index].wrongBg.visible = true;
this.playAudio('wrong');
}
}
clickPicBg(index) {
if (this.rightFlag) {
return;
}
const data = this.picArr[this.picIndex];
if (index == Number(data.answerId)) {
this.picBgArr[index].rightBg.visible = true;
this.rightFlag = true;
this.playAudio('right');
} else {
this.picBgArr[index].wrongBg.visible = true;
this.playAudio('wrong');
}
}
closeBtnClick() {
this.mask.visible = false;
// this.grouoLightIndex = 0;
this.animaNewStopRun = false;
// this.lightDelayTime = 1;
for (let i = 0; i < this.ballArr.length; i++) {
this.ballArr[i].light.alpha = 0;
}
this.initLightAnimaNew();
this.playAudio('click_1');
}
goBtnClick() {
this.canTouch = false;
this.wheelRun();
this.playAudio('click_1');
this.playAudio('bg');
}
getNextItemIndex() {
if (!this.idArr || this.idArr.length <= 0) {
this.idArr = [];
for (let i = 0; i < this.picArr.length; i++) {
this.idArr.push(i);
}
this.idArr = randomSortByArr(this.idArr);
}
return this.idArr.pop();
}
wheelRun() {
const rateArea = 0.9;
const num = this.picArr.length;
const id = this.getNextItemIndex();
const angle = 360 / num ; // this.picArr.length;
const targetAngle = 360 * 4 + id * angle - 90 - (angle * (1 - rateArea) / 2 + angle * rateArea * Math.random());
console.log('id: ', id);
this.picIndex = id;
this.lightDelayTime = 0;
rotateItem(this.wheel, 360 * 11, 2.2 , () => {
this.wheel.rotation = this.wheel.rotation % 360;
rotateItem(this.wheel, targetAngle, 1.6, () => {
this.wheel.rotation = this.wheel.rotation % 360;
this.showAllLight();
this.playAudio('tip');
moveItem(this.arrow, this.arrow.x, this.arrow.y - 20 * this.mapScale, 0.5, ( ) => {
setTimeout(() => {
this.showQuestionWindow();
}, 0.7 * 1000);
}, TWEEN.Easing.Elastic.Out);
}, TWEEN.Easing.Sinusoidal.Out);
});
moveItem(this.arrow, this.arrow.x, this.arrow.baseY, 0.3, ( ) => {
}, TWEEN.Easing.Cubic.Out);
this.animaStopRun = false;
this.animaNewStopRun = true;
for (let i = 0; i < this.ballArr.length; i++) {
this.ballArr[i].light.alpha = 0;
}
this.lightDelayTime = 0;
this.initLightAnima();
this.playAudio('wheel_run');
}
showAllLight() {
this.animaStopRun = true;
// clearTimeout(this.lightDelayId);
setTimeout(() => {
for (let i = 0; i < this.ballArr.length; i++) {
showItem(this.ballArr[i].light, 0.02);
// this.ballArr[i].light.alpha = 1;
}
}, 0.03 * 1000);
}
showQuestionWindow() {
this.setQuestionWindowData();
this.mask.visible = true;
this.questionBg.setScaleXY(this.mapScale * 0.9);
scaleItem(this.questionBg, this.mapScale, 0.5, () => {
this.canTouch = true;
}, TWEEN.Easing.Elastic.Out);
this.playAudio('show_window');
}
setQuestionWindowData() {
this.rightFlag = false;
const data = this.picArr[this.picIndex];
if (data.question_pic_url) {
this.questionLabel.text = data.question;
this.questionLabel.visible = true;
this.questionLabel2.visible = false;
} else {
this.questionLabel2.text = data.question;
this.questionLabel2.visible = true;
this.questionLabel.visible = false;
}
const answerArr = data.answerArr;
if (data.answerType == 'A') {
this.showArr(this.textBgArr);
this.hideArr(this.picBgArr);
this.hideArr(this.answerTitleArr);
} else {
this.showArr(this.picBgArr);
this.showArr(this.answerTitleArr);
this.hideArr(this.textBgArr);
}
for (let i = 0; i < answerArr.length; i++) {
this.textBgArr[i].rightBg.visible = false;
this.textBgArr[i].wrongBg.visible = false;
if (this.answerLabelArr[i] && answerArr[i].text) {
this.answerLabelArr[i].text = answerArr[i].text;
} else {
this.answerLabelArr[i].text = '';
}
}
if (data.question_pic_url) {
const picRect = this.questionPicRect;
picRect.removeChildren();
const pic = new MySprite(this.ctx);
pic.init(this.images.get(data.question_pic_url));
pic.setScaleXY(getMinScale(pic, picRect.width));
pic.x = picRect.width / 2;
pic.y = picRect.height / 2;
picRect.addChild(pic);
this.questionPicRect.visible = true;
} else {
this.questionPicRect.visible = false;
}
const picLen = 206;
for (let i = 0; i < 4; i++) {
const picBg = this.picBgArr[i];
picBg.removeChildren();
picBg.wrongBg.visible = false;
picBg.rightBg.visible = false;
const picUrl = answerArr[i].pic_url;
if (picUrl) {
const pic = new MySprite(this.ctx);
pic.init(this.images.get(picUrl));
pic.y = 35;
pic.setScaleXY(getMinScale(pic, picLen));
picBg.addChild(pic);
}
}
}
clickItem(item) {
const itemAudio = this.audioObj[item.data.audio_url];
if (itemAudio) {
itemAudio.pause();
itemAudio.curTime = 0;
}
if (item.linkFlag) {
if (itemAudio) {
itemAudio.play();
}
return;
}
// if (this.curItem == item) {
// return;
// }
if (this.curItem) {
if (this.curItem.type == item.type) {
// 切换
this.hideItemDot(this.curItem);
this.showItemDot(item);
} else if (this.curItem.data.id != item.data.id) {
// 错误
this.hideItemDot(this.curItem);
shake(item, 0.5, null, 0.5);
this.playAudio('wrong');
this.curItem = null;
return;
} else {
// 正确
this.showItemDot(item);
const oldItem = this.curItem;
const newItem = item;
setTimeout(() => {
this.showLinkAnima(oldItem, newItem);
}, 0.3 * 1000);
this.canTouch = false;
}
} else {
// 首次点
this.showItemDot(item);
}
item.setScaleXY(this.mapScale);
jelly(item, 0.6);
if (itemAudio) {
this.playAudio('click', true, () => {
itemAudio.play();
});
} else {
this.playAudio('click', true);
}
// if (!itemAudio) {
// this.playAudio('click', true);
// }
const curData = item;
console.log("curData: ", curData);
const audio = this.audioObj[curData.audio_url];
if (audio) {
audio.play();
}
this.curItem = item;
}
showItemDot(item) {
// if (item.dot.visible) {
// return;
// }
if (item.sTween) {
item.sTween.stop();
}
const dot = item.dot;
dot.visible = true;
dot.setScaleXY(0);
item.sTween = scaleItem(dot, this.mapScale, 0.3, () => {
item.sTween = null;
}, TWEEN.Easing.Cubic.Out);
}
hideItemDot(item) {
// if (!item.dot.visible) {
// return;
// }
if (item.sTween) {
item.sTween.stop();
}
const dot = item.dot;
dot.visible = true;
item.sTween = scaleItem(dot, 0, 0.3, () => {
item.sTween = null;
}, TWEEN.Easing.Cubic.Out);
}
showLinkAnima(oldItem, newItem) {
console.log('in showLinkAnima');
const id = this.getLinkLineId();
const key = 'line_' + id;
// const colorArr = [
// '#deffac',
// '#ffb062',
// '#ff66bf',
// '#fbff81',
// '#90ff62',
// '#9cffec',
// '#6dc5ff',
// '#ff6862',
// '#b8e887',
// '#ff8f8f',
// ];
const colorArr = [
'#9637FF',
'#FFA802',
'#41EFE6',
'#5CD923',
'#FF430E',
'#3F46FC',
];
const color = colorArr[id];
const oldPos = {x: oldItem.x, y: oldItem.y + oldItem.dot.y * oldItem.scaleY};
const newPos = {x: newItem.x, y: newItem.y + newItem.dot.y * newItem.scaleY};
const line = new MySprite();
line.init(this.images.get(key));
line.setScaleXY(this.mapScale);
line.anchorX = (line.width - line.height / 2) / line.width;
line.anchorY = 0;
line.x = oldPos.x;
line.y = oldPos.y;
this.bgArr.push(line);
if (newPos.x < oldPos.x) {
line.scaleX *= -1;
}
const angle = getAngleByPos(oldPos.x, oldPos.y, newPos.x, newPos.y);
line.rotation = angle + 180;
const distance = getPosDistance(oldPos.x, oldPos.y, newPos.x, newPos.y);
const targetS = distance / line.height;
// const dot = new ShapeCircle();
// dot.setRadius(11 / 2);
// dot.setScaleXY(this.mapScale);
// dot.fillColor = color;
// this.bgArr.push(dot);
tweenChange(line, {scaleY: targetS}, 1, () => {
this.linkEnd(oldItem, newItem);
}, TWEEN.Easing.Sinusoidal.Out , (i, pro) => {
// const len = line.height * line.scaleY;
// const p = getPosByAngle(angle, len);
// dot.x = line.x;
// dot.y = line.y;
// dot.x += p.x;
// dot.y -= p.y;
});
this.playAudio('line');
}
linkEnd(oldItem, newItem) {
this.canTouch = true;
this.curItem = null;
oldItem.linkFlag = true;
newItem.linkFlag = true;
showPopParticle(this.images.get('star'), oldItem.dot, oldItem);
scaleItem(oldItem.dot, 0, 0.5);
showPopParticle(this.images.get('star'), newItem.dot, newItem);
scaleItem(newItem.dot, 0, 0.5);
this.playAudio('star');
this.checkGameEnd();
}
checkGameEnd() {
for (let i = 0; i < this.itemArrA.length; i++) {
if (!this.itemArrA[i].linkFlag) {
return;
}
}
this.gameEnd();
}
getLinkLineId() {
if (!this.linkIdArr || this.linkIdArr.length <= 0) {
// this.linkIdArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
this.linkIdArr = [0, 1, 2, 3, 4, 5];
}
this.linkIdArr = randomSortByArr(this.linkIdArr);
return this.linkIdArr.pop();
}
changeCard() {
this.canTouch = false;
const x = this.canvasWidth * 1.5;
const y = this.canvasHeight * - 0.7;
moveItem(this.curCard, x, y, 1, () => {
// this.canTouch = true;
}, TWEEN.Easing.Sinusoidal.Out);
rotateItem(this.curCard, 150);
this.bottomCard.visible = true;
scaleItem(this.bottomCard, this.mapScale, 0.6, () => {
this.canTouch = true;
}, TWEEN.Easing.Elastic.Out);
this.curCard = this.bottomCard;
this.addBottomCard();
}
addBottomCard() {
const bottomCard = new MySprite(this.ctx);
bottomCard.init(this.images.get(this.getFrameColor()));
bottomCard.setScaleXY(this.mapScale * 0.95);
bottomCard.x = this.canvasWidth / 2;
bottomCard.y = this.canvasHeight / 2;
bottomCard.visible = false;
this.addPic(bottomCard);
this.renderArr.unshift(bottomCard);
this.bottomCard = bottomCard;
}
moveArm1() {
this.canTouch = false;
const arm1 = this.arm1;
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX;
moveItem(this.arm1, tx, arm1.y, 0.8, () => {
this.canTouch = true;
this.clickLeft();
} );
}
moveArm2() {
const arm1 = this.arm1;
const arm2 = this.arm2;
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX;
this.canTouch = false;
moveItem(arm2, this.canvasWidth - tx, arm2.y, 0.8, () => {
this.canTouch = true;
this.clickRight();
} );
}
clickTitle() {
this.titleAudio.play();
}
clickEmpty() {
this.moveDown();
}
clickBall() {
// console.log('in clickBall');
this.canTouch = false;
const down = () => {
const targetY = this.stick.y + this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => {
up();
}, TWEEN.Easing.Quadratic.In, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
});
if (this.curPic) {
hideItem(this.curPic, 0.7);
showItem(this.mask, 0.7);
}
};
const up = () => {
const targetY = this.stick.y - this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => {
this.canTouch = true;
}, TWEEN.Easing.Quadratic.Out, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
});
this.showPic();
};
down();
}
showPic() {
this.mask.removeChildren();
const data = this.picArr[this.picIndex];
this.curData = data;
const curPic = new MySprite(this.ctx);
curPic.init(this.images.get(data.pic_url));
const sx = this.picW / curPic.width;
const sy = this.picH / curPic.height;
const s = Math.min(sx, sy);
curPic.setScaleXY(s);
this.robot.addChild(curPic);
curPic.x = this.mask.x;
curPic.y = this.mask.y;
const pic1 = new MySprite(); this.curPic = curPic;
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); curPic.alpha = 0;
this.pic1 = pic1; showItem(curPic);
hideItem(this.mask);
this.picIndex ++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
}
}
clickPic() {
// console.log('in clickPic');
const curData = this.curData;
const audio = this.audioObj[curData.audio_url];
if (audio) {
audio.play();
}
}
clickLeft() {
const curData = this.picArr[this.picIndex];
const audio = this.audioObj[curData.word_1_audio_url];
if (audio) {
audio.play();
}
}
clickRight() {
const curData = this.picArr[this.picIndex];
const audio = this.audioObj[curData.word_2_audio_url];
if (audio) {
audio.play();
}
}
clickCenter() {
const label1 = new Label(); console.log(' in clickCenter');
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); this.canTouch = false;
this.arm1.visible = false;
this.arm2.visible = false;
this.showArr(this.centerPageArr);
setTimeout(() => {
this.arm1.visible = true;
this.arm2.visible = true;
this.hideArr(this.centerPageArr);
this.arm1.page1.visible = false;
this.arm1.page2.visible = true;
this.arm2.page1.visible = false;
this.arm2.page2.visible = true;
this.canTouch = true;
}, 0.25 * 1000);
// this.arm1.centerSpr.visible = true;
// this.arm1.centerSpr.x = this.arm1.x;
// this.arm1.centerSpr.y = this.arm1.y;
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
} }
btnLeftClicked() {
this.lastPage();
mapMove(event) {
} }
btnRightClicked() { mapUp(event) {
this.nextPage();
} }
lastPage() {
if (this.curPic == this.pic1) {
return;
}
moveDown() {
this.canTouch = false; this.canTouch = false;
const moveLen = this.canvasWidth; const data = {y: this.arm1.y};
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); const tween = tweenChange(data, {y: this.arm1.y + this.canvasHeight}, 1,
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => { () => {
this.canTouch = true; this.canTouch = true;
this.curPic = this.pic1; this.resetArm();
},
TWEEN.Easing.Quadratic.In,
(item, progress) => {
this.arm1.y = item.y;
this.arm2.y = item.y;
}); });
} }
nextPage() {
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false; update() {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
TWEEN.update();
// this.updateWordArr();
//
this.updateArr(this.bgArr);
this.updateArr(this.renderArr);
this.updateArr(this.endPageArr);
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.curPic = this.pic2;
});
} }
pic1Clicked() {
this.playAudio(this.data.audio_url); updateItem(item) {
if (item) {
item.update();
}
} }
pic2Clicked() { updateArr(arr) {
this.playAudio(this.data.audio_url_2); if (!arr) {
return;
}
for (let i = 0; i < arr.length; i++) {
arr[i].update(this);
}
} }
mapDown(event) { initListener() {
if (!this.canTouch) { this.winResizeEventStream
return; .pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('mousemove', (event) => {
setMxMyByMouse(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('mouseup', (event) => {
setMxMyByMouse(event);
this.mapUp(event);
});
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
} else {
this.canvas.nativeElement.addEventListener('touchstart', (event) => {
setMxMyByTouch(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('touchmove', (event) => {
setMxMyByTouch(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('touchend', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
const setMxMyByTouch = (event) => {
// console.log('in setMxMyByTouch', event);
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
};
}
}
playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key];
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
audio.onended = null;
};
}
audio.play();
} }
}
if ( this.checkClickTarget(this.btnLeft) ) { showArr(arr) {
this.btnLeftClicked(); if (!arr) {
return; return;
} }
for (let i = 0; i < arr.length; i++) {
arr[i].visible = true;
}
}
if ( this.checkClickTarget(this.btnRight) ) { hideArr(arr) {
this.btnRightClicked(); if (!arr) {
return; return;
} }
for (let i = 0; i < arr.length; i++) {
arr[i].visible = false;
}
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return; IsPC() {
if (window['ELECTRON']) {
return false; // 封装客户端标记
} }
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked(); if (document.body.ontouchmove !== undefined && document.body.ontouchmove !== undefined) {
return; return false;
} else {
return true;
} }
} }
mapMove(event) {
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value)
.then(img => {
this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(p);
});
this.rawAudios.forEach((value, key) => {// 预加载图片
const a = this.preloadAudio(value)
.then(() => {
// this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(a);
});
return Promise.all(pr);
} }
mapUp(event) { preload(url) {
return new Promise((resolve, reject) => {
const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
preloadAudio(url) {
return new Promise((resolve, reject) => {
const audio = new Audio();
audio.oncanplay = (a) => {
resolve();
};
audio.onerror = () => {
reject();
};
audio.src = url;
audio.load();
});
} }
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
update() {
// ---------------------------------------------------------- checkClickTarget(target) {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
}
return false;
}
this.updateArr(this.renderArr); getWorlRect(target) {
let rect = target.getBoundingBox();
if (target.parent) {
const pRect = this.getWorlRect(target.parent);
rect.x += pRect.x;
rect.y += pRect.y;
}
return rect;
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
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;
}
} }
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['bg', "assets/play/bg.png"],
['btn_left', "assets/play/btn_left.png"], ['dot', "assets/play/dot.png"],
['btn_right', "assets/play/btn_right.png"], ['title', "assets/play/title.png"],
// ['text_bg', "assets/play/text_bg.png"], ['star', "assets/play/star.png"],
['item_bg', "assets/play/item_bg.png"],
['line_0', "assets/play/line/0.png"],
['line_1', "assets/play/line/1.png"],
['line_2', "assets/play/line/2.png"],
['line_3', "assets/play/line/3.png"],
['line_4', "assets/play/line/4.png"],
['line_5', "assets/play/line/5.png"],
['line_6', "assets/play/line/6.png"],
['line_7', "assets/play/line/7.png"],
['line_8', "assets/play/line/8.png"],
['line_9', "assets/play/line/9.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
]; ];
...@@ -11,7 +29,13 @@ const res = [ ...@@ -11,7 +29,13 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['line', "assets/play/music/line.mp3"],
['star', "assets/play/music/star.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
['finish', "assets/play/music/finish.mp3"],
]; ];
......
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