diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html index bef2a73dd8992c974ce157d1b68d3293efe1f8b1..7b9a6b70574e7b9d4f88e2b7273da5836c5d6972 100644 --- a/src/app/form/form.component.html +++ b/src/app/form/form.component.html @@ -2,244 +2,334 @@ <div class="model-content"> + <div style="position: absolute; left: 200px; top: 100px; width: 300px;"> + + <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> + + <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> + + </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" - nz-col nzSpan="8" > - <div class="item-box"> - <app-upload-image-with-preview - style="width: 100%" - [picUrl]="it.pic_url" - (imageUploaded)="onImageUploadSuccessByItem($event, it)" - ></app-upload-image-with-preview> - <div style="display: flex; justify-items: center; padding-top: 10px"> - <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)"> - <i nz-icon type="close"></i> - </button> - </div> - </div> - <!--<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>--> - <!--<app-upload-image-with-preview--> - <!--style="width: 100%"--> - <!--[picUrl]="it.pic_url"--> - <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"--> - <!--></app-upload-image-with-preview>--> - <!--<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>--> - <!--</div>--> - <!--<div style="display: flex; align-items: center; justify-content: center">--> - <!--<span style="width: 80px;">--> - <!--answer:--> - <!--</span>--> - <!--<app-audio-recorder--> - <!--[audioUrl]="it['a_audio_url']"--> - <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">--> - <!--</app-audio-recorder>--> - <!--</div>--> - <!--<nz-radio-group [(ngModel)]="it.radioValue" >--> - <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>--> - <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>--> - <!--</nz-radio-group>--> - </div> - <div nz-col nzSpan="8" class="add-btn-box" > +<!--<app-audio-recorder--> + <!--[audioUrl]="item.audio_url"--> + <!--(audioUploaded)="onAudioUploadSuccess($event)"--> +<!--></app-audio-recorder>--> + + <!--<div *ngFor="let it of picArr; let i = index"--> + <!--nz-col nzSpan="8" >--> + + + + <!--<div class="item-box">--> + + + <!--<app-upload-image-with-preview--> + <!--style="width: 100%"--> + <!--[picUrl]="it.pic_url"--> + <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"--> + <!--></app-upload-image-with-preview>--> + + + + <!--<div style="display: flex; justify-items: center; padding-top: 10px">--> + <!--<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)">--> + <!--<i nz-icon type="close"></i>--> + <!--</button>--> + <!--</div>--> - <!--<div style="width: 100%; height: 100%;">--> - <button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn" - (click)="addPic()"> - <i nz-icon nzType="plus-circle" nzTheme="outline"></i> - Add - </button> <!--</div>--> + <!--<!–<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>–>--> - </div> + + <!--<!–<app-upload-image-with-preview–>--> + <!--<!–style="width: 100%"–>--> + <!--<!–[picUrl]="it.pic_url"–>--> + <!--<!–(imageUploaded)="onImageUploadSuccessByItem($event, it)"–>--> + <!--<!–></app-upload-image-with-preview>–>--> + <!--<!–<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>–>--> + <!--<!–</div>–>--> + <!--<!–<div style="display: flex; align-items: center; justify-content: center">–>--> + <!--<!–<span style="width: 80px;">–>--> + <!--<!–answer:–>--> + <!--<!–</span>–>--> + <!--<!–<app-audio-recorder–>--> + <!--<!–[audioUrl]="it['a_audio_url']"–>--> + <!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">–>--> + <!--<!–</app-audio-recorder>–>--> + <!--<!–</div>–>--> - <!--<div style="padding-bottom: 30px;">--> + <!--<!–<nz-radio-group [(ngModel)]="it.radioValue" >–>--> + <!--<!–<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>–>--> + <!--<!–<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>–>--> + <!--<!–</nz-radio-group>–>--> - <!--<h5> title-sound: </h5>--> - <!--<app-audio-recorder--> - <!--[audioUrl]="item.contentObj.title_audio_url"--> - <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">--> - <!--</app-audio-recorder>--> <!--</div>--> - <!--<div style="padding-bottom: 30px;">--> - <!--<h5> bg-sound: </h5>--> - <!--<app-audio-recorder--> - <!--[audioUrl]="item.contentObj.bg_audio_url"--> - <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">--> - <!--</app-audio-recorder>--> + <!--<div nz-col nzSpan="8" class="add-btn-box" >--> + + <!--<!–<div style="width: 100%; height: 100%;">–>--> + <!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"--> + <!--(click)="addPic()">--> + <!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>--> + <!--Add--> + <!--</button>--> + <!--<!–</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)"--> - <!--></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>--> - <!--<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>--> - <!--<app-audio-recorder--> - <!--[audioUrl]="it2.audio_url"--> - <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">--> - <!--</app-audio-recorder>--> - <!--</div>--> + <!--<!–<div style="padding-bottom: 30px;">–>--> - <!--</div>--> + <!--<!–<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>--> + <!--<!–<div style="padding-bottom: 30px;">–>--> + <!--<!–<h5> bg-sound: </h5>–>--> + <!--<!–<app-audio-recorder–>--> + <!--<!–[audioUrl]="item.contentObj.bg_audio_url"–>--> + <!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">–>--> + <!--<!–</app-audio-recorder>–>--> + <!--<!–</div>–>--> - <!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">--> + <!--<!–<span style="margin-bottom: 20px"> 10 : 23 </span>–>--> + <!--<!–<div *ngFor="let it of picArr; let i = index">–>--> - <!--<div *ngFor="let it of picArr; let i = index"--> - <!--nz-col nzSpan="8" >--> - <!--<div class="item-box">--> + <!--<!–<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)"–>--> + <!--<!–></app-upload-image-with-preview>–>--> + <!--<!–</div>–>--> - <!--<h5> id-{{i+1}} </h5>--> + <!--<!–<div class="pic-sound-box">–>--> - <!--<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>--> + <!--<!–<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>–>--> - <!--<app-upload-image-with-preview--> - <!--style="width: 100%"--> - <!--[picUrl]="it.pic_url"--> - <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"--> - <!--></app-upload-image-with-preview>--> + <!--<!–</div>–>--> + <!--<!–<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>–>--> + <!--<!–<app-audio-recorder–>--> + <!--<!–[audioUrl]="it2.audio_url"–>--> + <!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">–>--> + <!--<!–</app-audio-recorder>–>--> + <!--<!–</div>–>--> - <!--<div style="display: flex; align-items: center; justify-content: center">--> + <!--<!–</div>–>--> - <!--<span style="width: 80px;">--> - <!--question:--> - <!--</span>--> - <!--<app-audio-recorder--> - <!--[audioUrl]="it['q_audio_url']"--> - <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">--> - <!--</app-audio-recorder>--> - <!--</div>--> + <!--<!–</div>–>--> - <!--<div style="display: flex; align-items: center; justify-content: center">--> + <!--<!–</div>–>--> - <!--<span style="width: 80px;">--> - <!--answer:--> - <!--</span>--> - <!--<app-audio-recorder--> - <!--[audioUrl]="it['a_audio_url']"--> - <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">--> - <!--</app-audio-recorder>--> - <!--</div>--> + <!--<!–<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">–>--> - <!--<nz-radio-group [(ngModel)]="it.radioValue" >--> - <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>--> - <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>--> - <!--</nz-radio-group>--> + <!--<!–<div *ngFor="let it of picArr; let i = index"–>--> + <!--<!–nz-col nzSpan="8" >–>--> + <!--<!–<div class="item-box">–>--> - <!--</div>--> + <!--<!–<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>–>--> - <!--</div>--> + <!--<!–<app-upload-image-with-preview–>--> + <!--<!–style="width: 100%"–>--> + <!--<!–[picUrl]="it.pic_url"–>--> + <!--<!–(imageUploaded)="onImageUploadSuccessByItem($event, it)"–>--> + <!--<!–></app-upload-image-with-preview>–>--> + <!--<!–<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>–>--> + <!--<!–</div>–>--> + <!--<!–<div style="display: flex; align-items: center; justify-content: center">–>--> -</div> + <!--<!–<span style="width: 80px;">–>--> + <!--<!–answer:–>--> + <!--<!–</span>–>--> + <!--<!–<app-audio-recorder–>--> + <!--<!–[audioUrl]="it['a_audio_url']"–>--> + <!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">–>--> + <!--<!–</app-audio-recorder>–>--> + + <!--<!–</div>–>--> + + + + <!--<!–<nz-radio-group [(ngModel)]="it.radioValue" >–>--> + <!--<!–<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>–>--> + <!--<!–<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>–>--> + <!--<!–</nz-radio-group>–>--> + + + <!--<!–</div>–>--> + + + + + <!--<!–</div>–>--> + + + + + + +<!--</div>--> diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss index fe8f5f4ec40ed32051afb9c811f77fb0b780ba11..0ab9a90ac7f69516abac1a1446f2adf4b900260d 100644 --- a/src/app/form/form.component.scss +++ b/src/app/form/form.component.scss @@ -5,50 +5,4 @@ width: 100%; height: 100%; - - - - - - .item-box{ - - width: 100%; - - display: flex; - align-items: center; - justify-content: center; - - flex-direction: column; - - padding: 10px; - padding-bottom: 5vw; - padding-top: 5vw; - } - - - .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; - - - } - - } diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index 166f73602f7076d0d7ff5bcea8564c99175242e8..427ef173645ed1f30bd12aea56265dabf4ada80a 100644 --- a/src/app/form/form.component.ts +++ b/src/app/form/form.component.ts @@ -9,30 +9,10 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap }) export class FormComponent implements OnInit, OnChanges, OnDestroy { - picArr = []; - - _item: any; - - - KEY = 'hw_000'; - - - - - - // @Input() - set item(item) { - this._item = item; - // this.init(); - - } - get item() { - return this._item; - } - - @Output() - update = new EventEmitter(); - + // å‚¨å˜æ•°æ®ç”¨ + saveKey = "test_0011"; + // 储å˜å¯¹è±¡ + item; constructor(private appRef: ApplicationRef) { @@ -43,162 +23,68 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ngOnInit() { this.item = {}; - this.item.contentObj = {}; - const getData = (<any> window).courseware.getData; - getData((data) => { + // 获å–å˜å‚¨çš„æ•°æ® + (<any> window).courseware.getData((data) => { if (data) { this.item = data; - } else { - this.item = {}; - } - - if ( !this.item.contentObj ) { - this.item.contentObj = {}; } - console.log('~data:', data); this.init(); this.refresh(); - }, this.KEY); + }, this.saveKey); - // this.initData(); } - ngOnChanges() { - - } - - ngOnDestroy() { - } - - init() { - - if (this.item.contentObj.picArr) { - this.picArr = this.item.contentObj.picArr; - } else { - this.picArr = this.getDefaultPicArr(); - this.item.contentObj.picArr = this.picArr; - } - - console.log('item:' , this.item); - // this.picArr = this.getDefaultPicArr(); - // this.item.contentObj.picArr = this.picArr; - // console.log('this.item:;', this.picArr); + ngOnChanges() { } - 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; + ngOnDestroy() { } - initData() { - - - } - - - deleteItem(data) { - const index = this.picArr.indexOf(data); - if (index !== -1) { - this.picArr.splice(index, 1); - } + init() { - // this.update.emit(this.item); - this.save(); } + /** + * 储å˜å›¾ç‰‡æ•°æ® + * @param e + */ + onImageUploadSuccess(e, key) { - - - - - 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); + this.item[key] = e.url; + this.save(); } + /** + * 储å˜éŸ³é¢‘æ•°æ® + * @param e + */ + onAudioUploadSuccess(e, key) { - - - 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.item[key] = e.url; this.save(); } - addPic() { - this.picArr.push({ - pic_url: '', - audio_url: '', - // text: '', - // radioValue: 'A' - }); - - this.saveItem(); - } - - radioClick(it, radioValue) { - it.radioValue = radioValue; - - this.saveItem(); - } - - clickCheckBox() { - console.log(' in clickCheckBox'); - this.saveItem(); - } - - - saveItem() { - // this.update.emit(this.item); - this.save(); - } - - + /** + * å‚¨å˜æ•°æ® + */ save() { - (<any> window).courseware.setData(this.item, null, this.KEY); + (<any> window).courseware.setData(this.item, null, this.saveKey); this.refresh(); } + /** + * 刷新 æ¸²æŸ“é¡µé¢ + */ refresh() { setTimeout(() => { this.appRef.tick(); diff --git a/src/app/play/Unit.ts b/src/app/play/Unit.ts index 6553101eb784c9a45ad195e67ac9ebdf91ef5d82..b08a8f92a706c4b174e8d7facc20bdcc95e59ec9 100644 --- a/src/app/play/Unit.ts +++ b/src/app/play/Unit.ts @@ -359,7 +359,7 @@ export class ColorSpr extends MySprite { g = 0; b = 0; - createGSCanvas(){ + createGSCanvas() { if (!this.img) { return; @@ -1327,6 +1327,16 @@ export function removeItemFromArr(arr, item) { +export function 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; +} + + + @@ -1370,13 +1380,6 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = } -export function 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; -} export function delayCall(callback, second) { const tween = new TWEEN.Tween(this) diff --git a/src/app/play/play.component.scss b/src/app/play/play.component.scss index 98bc27615cd8dac681e1e1aa12f8ce5d4a03b824..bbda49566c0a6aa2c621e2f863caf1849e492572 100644 --- a/src/app/play/play.component.scss +++ b/src/app/play/play.component.scss @@ -1,9 +1,7 @@ .game-container { width: 100%; height: 100%; - //background-image: url("/assets/listen-read-circle/bg.jpg"); background: #ffffff; - background-repeat: no-repeat; background-size: cover; } @@ -19,11 +17,3 @@ src: url("../../assets/font/BRLNSDB.TTF") ; } - -// -// -//@font-face -//{ -// font-family: 'RoundedBold'; -// src: url("../../assets/font/ArialRoundedBold.otf") ; -//} diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts index 52c4ddd51b0fda8fef4ab7b35c301c7a3144a8af..5e69db6206ef258722c88dcd5f8fdb4c9d9d4c99 100644 --- a/src/app/play/play.component.ts +++ b/src/app/play/play.component.ts @@ -1,12 +1,8 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import { - MySprite, Label, - moveItem, - rotateItem, - removeItemFromArr, - ShapeRect, + MySprite, tweenChange, } from './Unit'; import {res, resAudio} from './resources'; @@ -14,7 +10,6 @@ import {res, resAudio} from './resources'; import {Subject} from 'rxjs'; import {debounceTime} from 'rxjs/operators'; -import * as _ from 'lodash'; import TWEEN from '@tweenjs/tween.js'; @@ -26,36 +21,23 @@ import TWEEN from '@tweenjs/tween.js'; styleUrls: ['./play.component.scss'] }) export class PlayComponent implements OnInit, OnDestroy { - // æ•°æ® - _data; - - @Input() - set data(data) { - this._data = data; - } - get data() { - return this._data; - } - - @Input() - sid; @ViewChild('canvas') canvas: ElementRef; @ViewChild('wrap') wrap: ElementRef; - canvasWidth = 1280; - canvasHeight = 720; - canvasBaseW = 1280; - canvasBaseH = 720; + // æ•°æ® + data; ctx; - fps = 0; - frametime = 0; // 上一帧动画的时间, 两帧时间差 + canvasWidth = 1280; // canvas实际宽度 + canvasHeight = 720; // canvas实际高度 - mx; - my; // ç‚¹å‡»åæ ‡ + canvasBaseW = 1280; // canvas 资æºé¢„设宽度 + canvasBaseH = 720; // canvas 资æºé¢„设高度 + mx; // 点击xåæ ‡ + my; // 点击yåæ ‡ // èµ„æº @@ -67,806 +49,121 @@ export class PlayComponent implements OnInit, OnDestroy { animationId: any; winResizeEventStream = new Subject(); - audioObj = {}; + renderArr; mapScale = 1; canvasLeft; canvasTop; - - canTouch = true; - - - KEY = 'hw_000'; - - // ----- - picArr; - - pageLabel; - leftBtn; - rightBtn; - bgLayer; - curPageIndex; + saveKey = 'test_0011'; + btnLeft; + btnRight; + pic1; + pic2; - hotZoneArr; - - picIndex = 0; - - - bgArr; - endPageArr; - gameEndFlag; - showPetalFlag; - bg; - - + canTouch = true; + curPic; @HostListener('window:resize', ['$event']) onResize(event) { this.winResizeEventStream.next(); - - } - - - ngOnInit() { - - - const getData = (<any> window).courseware.getData; - getData((data) => { - - if (data && typeof data == 'object') { - this.data = data; - } else { - this.data = {}; - } - - console.log('data:' , data); - if (!this.data.contentObj) { - this.data.contentObj = {}; - } - - this.initDefaultData(); - - - - this.initAudio(); - this.initImg(); - this.initListener(); - - }, this.KEY); - - - // - // // this.initAudio(); - // this.initImg(); - // this.initListener(); - } - - - - - - initDefaultData() { - - - let picArr = this.data.contentObj.picArr; - // console.log('picArr: ', picArr); - if (!picArr || picArr.length == 0) { - - - const picArr = []; - for (let i = 0; i < 2; i++) { - picArr.push({ - 'pic_url': 'assets/play/default/pic.jpg', - 'audio_url': 'assets/play/default/audio.mp3' - }); - } - - this.data.contentObj.picArr = picArr; - - } - - - } - - ngOnDestroy() { - window['curCtx'] = null; - window.cancelAnimationFrame(this.animationId); - this.gameEndFlag = true; - } - - initData() { - - this.canvasWidth = this.wrap.nativeElement.clientWidth; - this.canvasHeight = this.wrap.nativeElement.clientHeight; - - this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth; - this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight; - - - const sx = this.canvasWidth / this.canvasBaseW; - const sy = this.canvasHeight / this.canvasBaseH; - const s = Math.min(sx, sy); - this.mapScale = s; - - // this.mapScale = this.canvasWidth / this.canvasBaseW; - // this.mapScale = this.canvasHeight / this.canvasBaseH; - this.renderArr = []; - - console.log(' in initData', this.data); - - - - - - - this.canTouch = true; - - this.curPageIndex = 0; - - // this.downFlag = false; - - this.endPageArr = []; - - // this.clockUpdateFlag = false; - - if (!this.data.contentObj.picArr) { - this.data.contentObj.picArr = []; - } - this.picArr = this.data.contentObj.picArr; - - this.picIndex = 0; - - - - } - - - - - - initAudio() { - - const contentObj = this.data.contentObj; - if (!contentObj) { return; } - - - - // const addAudio = (key) => { - // const audioUrl = contentObj[key]; - // if (audioUrl) { - // const audio = new Audio(); - // audio.src = audioUrl; - // audio.load(); - // this.audioObj[key] = audio; - // } - // } - // - // for (let i = 0; i < 4; i ++) { - // const key = i + '_audio_url'; - // addAudio(key); - // } - // - // addAudio('audio_url'); - // - - - const addUrlToAudioObj = (audioUrl) => { - - if (audioUrl) { - - // console.log('audioUrl:', audioUrl); - const audio = new Audio(); - audio.src = audioUrl; - audio.load(); - this.audioObj[audioUrl] = audio; - } - }; - - - let arr = contentObj.picArr; - - if (arr) { - // console.log('arr: ', arr); - for (let i = 0; i < arr.length; i++) { - addUrlToAudioObj(arr[i].audio_url); - } - } - - - - - - - - const audioObj = this.audioObj; - const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => { - - const audio = new Audio(); - audio.src = url; - audio.load(); - audio.loop = loop; - audio.volume = vlomue; - - audioObj[key] = audio; - - if (callback) { - audio.onended = () => { - callback(); - }; - } - }; - - - addOneAudio('click', this.rawAudios.get('click'), 0.3); - // addOneAudio('angry', this.rawAudios.get('angry'), 1); - // addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1); - // addOneAudio('eat', this.rawAudios.get('eat'), 1); - // addOneAudio('grass', this.rawAudios.get('grass'), 1); - // addOneAudio('happy', this.rawAudios.get('happy'), 1); - // addOneAudio('right', this.rawAudios.get('right'), 1); - // addOneAudio('wrong', this.rawAudios.get('wrong'), 1); - - - - // - // const titleUrl = this.data.contentObj.title_audio_url; - // if (titleUrl) { - // - // this.titleAudio.src = titleUrl; - // this.titleAudio.load(); - // } - - - - // this.bgAudio.src = 'assets/bat-mail/music/bg.mp3'; - // this.bgAudio.load(); - // 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(); - // }; - - - } - - initImg() { - - const contentObj = this.data.contentObj; - if (contentObj) { - - - const addPicUrl = (url) => { - if (url) { - this.rawImages.set(url, url); - } - }; - - - let arr = this.data.contentObj.picArr; - if (arr) { - - for (let i = 0; i < arr.length; i++) { - addPicUrl( arr[i].pic_url); - } - } - - - } - - - // this.initFontImg(); - - - - // é¢„åŠ è½½èµ„æº - - this.loadResources().then(() => { - window["air"].hideAirClassLoading(this.KEY,this.data); - // this.setfontData(); - this.init(); - this.update(); - }); - - } - - 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; - } - - setfontData() { - - // for (let key in this.fontDataW) { - // this.fontDataW[key] = this.images.get(this.fontDataW[key]); - // } - } - - - - - - - - - init() { - - this.initData(); - this.initCtx(); - - this.initView(); - - - - - } - - initCtx() { - - this.ctx = this.canvas.nativeElement.getContext('2d'); - this.canvas.nativeElement.width = this.canvasWidth; - this.canvas.nativeElement.height = this.canvasHeight; - - window['curCtx'] = this.ctx; - - - } - - - initView() { - - this.initBg(); - this.initPic(); - this.initBottomRight(); - - - this.refreshPageLabel(); - - - } - - initBottomRight() { - - const px = this.canvasWidth - 100 * this.mapScale; - const py = this.canvasHeight - 50 * this.mapScale; - const offX = 40 * this.mapScale; - - - - const leftBtn = new MySprite(); - leftBtn.init(this.images.get('btn_left')); - leftBtn.setScaleXY(this.mapScale); - leftBtn.x = px - offX; - leftBtn.y = py; - - const rightBtn = new MySprite(); - rightBtn.init(this.images.get('btn_right')); - rightBtn.setScaleXY(this.mapScale); - rightBtn.x = px + offX; - rightBtn.y = py; - - this.renderArr.push(leftBtn); - this.renderArr.push(rightBtn); - - const textBg = new MySprite(); - textBg.init(this.images.get('text_bg')); - textBg.setScaleXY(this.mapScale); - textBg.x = px; - textBg.y = py - 65 * this.mapScale; - this.renderArr.push(textBg); - - - - - const label = new Label(); - label.text = '0 / 0'; - label.fontName = 'BRLNSDB'; - label.fontSize = 24; - label.fontColor = '#ffffff'; - label.textAlign = 'center'; - label.setMaxSize( textBg.width * textBg.scaleX * 0.9 ); - textBg.addChild(label); - - - this.leftBtn = leftBtn; - this.rightBtn = rightBtn; - this.pageLabel = label; - - if (this.picArr.length <= 1) { - this.leftBtn.visible = false; - this.rightBtn.visible = false; - textBg.visible = false; - } - } - - - refreshPageLabel() { - - const label = this.pageLabel; - label.text = (this.curPageIndex + 1) + ' / ' + this.picArr.length; - - this.showAudio(); - } - - showAudio() { - const data = this.picArr[this.curPageIndex]; - const audio = this.audioObj[data.audio_url]; - if (audio) { - audio.play(); - } - } - - - - - initPic() { - - - - for (let i = 0; i < this.picArr.length; i++) { - - const data = this.picArr[i]; - - const pic = new MySprite(); - pic.init(this.images.get(data.pic_url)); - // pic.x = this.canvasWidth / 2; - // pic.y = this.canvasHeight / 2; - - const maxW = this.canvasWidth * 0.9; - const maxH = this.canvasHeight * 0.9; - const sx = maxW / pic.width; - const sy = maxH / pic.height; - const s = Math.min(sx, sy); - pic.setScaleXY(s); - // pic.setRadius(50 * this.mapScale); - - - const picBg = new ShapeRect(); - picBg.setSize(pic.width * pic.scaleX, pic.height * pic.scaleY); - picBg.x = this.canvasWidth / 2 + this.canvasWidth * i; - picBg.y = this.canvasHeight / 2; - picBg.init(); - picBg.fillColor = '#ffffff'; - // picBg.setRadius(50 * this.mapScale); - picBg.setShadow(0, 10, 20, 'rgba(0,0,0,0.3)'); - // picBg.alpha = 0; - // this.renderArr.push(picBg); - // this.renderArr.push(picShadow); - - picBg.addChild(pic); - - this.bgLayer.addChild(picBg); - } - - - - - - - } - - - - - - - - - - - - - - - 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.renderArr.push(bg); - - - this.bgLayer = new MySprite(); - this.renderArr.push(this.bgLayer); - - } - - - - - - - - - mapDown(event) { - - - if (!this.canTouch) { - return; - } - - - if (this.checkClickTarget(this.leftBtn)) { - this.lastPageClick(); - return; - } - - if (this.checkClickTarget(this.rightBtn)) { - this.nextPageClick(); - return; - } - - - } - - - - - - mapMove(event) { - - } - - - mapUp(event) { - - - } - - - - nextPageClick() { - console.log(' in leftBtnClick'); - - if (this.curPageIndex >= this.picArr.length - 1) { - return; - } - - this.curPageIndex ++; - - this.changePageByIndex(); - } - - lastPageClick() { - - console.log(' in rightBtnClick'); - - - if (this.curPageIndex <= 0) { - return; - } - - this.curPageIndex --; - - this.changePageByIndex(); - - } - - - changePageByIndex() { - - console.log(' in changePageByIndex'); - this.canTouch = false; - - - moveItem(this.bgLayer, -this.curPageIndex * this.canvasWidth, 0, 1, () => { - this.canTouch = true; - this.refreshPageLabel(); - // this.resetCurData(); - }, TWEEN.Easing.Cubic.Out); - - - this.playAudio('click', true); - } - - - - - - - - - - - - - - - update() { - - - this.animationId = window.requestAnimationFrame(this.update.bind(this)); - // 清除画布内容 - this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); - - TWEEN.update(); - - - - this.updateArr(this.renderArr); - } + ngOnInit() { + this.data = {}; + // èŽ·å–æ•°æ® + const getData = (<any> window).courseware.getData; + getData((data) => { + if (data && typeof data == 'object') { + this.data = data; + } + // console.log('data:' , data); + // åˆå§‹åŒ– å„äº‹ä»¶ç›‘å¬ + this.initListener(); + // è‹¥æ— æ•°æ® åˆ™ä¸ºé¢„è§ˆæ¨¡å¼ éœ€è¦å¡«å……一些默认数æ®ç”¨æ¥æ˜¾ç¤º + this.initDefaultData(); + // åˆå§‹åŒ– éŸ³é¢‘èµ„æº + this.initAudio(); + // åˆå§‹åŒ– å›¾ç‰‡èµ„æº + this.initImg(); + // å¼€å§‹é¢„åŠ è½½èµ„æº + this.load(); + }, this.saveKey); - updateItem(item) { - if (item) { - item.update(); - } - } - - updateArr(arr) { - if (!arr) { - return; - } - for (let i = 0; i < arr.length; i++) { - arr[i].update(this); - } - } - - - 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); - - } - - } - - - getHotZoneItem(data) { - const saveRect = data.rect; - const item = new ShapeRect(this.ctx); - item.setSize(saveRect.width, saveRect.height); - item.x = saveRect.x ; - item.y = saveRect.y ; - item['data'] = data; - - this.renderArr.push(item); + } - return item; + ngOnDestroy() { + window['curCtx'] = null; + window.cancelAnimationFrame(this.animationId); } - showEndPatal() { - this.endPageArr = []; - this.showPetalFlag = true; - this.addPetal(); - } + load() { - stopEndPatal() { - this.endPageArr = []; - this.showPetalFlag = false; + // é¢„åŠ è½½èµ„æº + this.loadResources().then(() => { + window["air"].hideAirClassLoading(this.saveKey, this.data); + this.init(); + this.update(); + }); } - addPetal() { - if (!this.showPetalFlag) { - return; - } + init() { - const petal = this.getPetal(); - this.endPageArr.push(petal); + this.initCtx(); + this.initData(); + this.initView(); + } - moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => { - removeItemFromArr(this.endPageArr, petal); - }); + initCtx() { + this.canvasWidth = this.wrap.nativeElement.clientWidth; + this.canvasHeight = this.wrap.nativeElement.clientHeight; + this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth; + this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight; - rotateItem(petal, petal['tr'], petal['time']); - setTimeout(() => { - this.addPetal(); - }, 200); + this.ctx = this.canvas.nativeElement.getContext('2d'); + this.canvas.nativeElement.width = this.canvasWidth; + this.canvas.nativeElement.height = this.canvasHeight; + window['curCtx'] = this.ctx; } - 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; + updateItem(item) { + if (item) { + item.update(); + } + } - const randomT = 2 + Math.random() * 5; - petal['time'] = randomT; + updateArr(arr) { + if (!arr) { + return; + } + for (let i = 0; i < arr.length; i++) { + arr[i].update(this); + } + } - let randomTR = 360 * Math.random(); // - 180; - if (Math.random() < 0.5) { randomTR *= -1; } - petal['tr'] = randomTR; - return petal; - } @@ -912,7 +209,6 @@ export class PlayComponent implements OnInit, OnDestroy { firstTouch = false; removeMouseListener(); } - console.log('touch down'); setMxMyByTouch(e); this.mapDown(e); }; @@ -930,7 +226,6 @@ export class PlayComponent implements OnInit, OnDestroy { firstTouch = false; removeTouchListener(); } - console.log('mouse down'); setMxMyByMouse(e); this.mapDown(e); }; @@ -995,43 +290,6 @@ export class PlayComponent implements OnInit, OnDestroy { - - showArr(arr) { - if (!arr) { - return; - } - for (let i = 0; i < arr.length; i++) { - arr[i].visible = true; - } - } - - hideArr(arr) { - if (!arr) { - return; - } - for (let i = 0; i < arr.length; i++) { - arr[i].visible = false; - } - } - - - - IsPC() { - - if (window['ELECTRON']) { - return false; // å°è£…å®¢æˆ·ç«¯æ ‡è®° - } - - - if (document.body.ontouchmove !== undefined && document.body.ontouchmove !== undefined) { - return false; - } else { - return true; - } - - } - - loadResources() { const pr = []; this.rawImages.forEach((value, key) => {// é¢„åŠ è½½å›¾ç‰‡ @@ -1045,7 +303,7 @@ export class PlayComponent implements OnInit, OnDestroy { pr.push(p); }); - this.rawAudios.forEach((value, key) => {// é¢„åŠ è½½å›¾ç‰‡ + this.rawAudios.forEach((value, key) => {// é¢„åŠ è½½éŸ³é¢‘ const a = this.preloadAudio(value) .then(() => { @@ -1091,6 +349,8 @@ export class PlayComponent implements OnInit, OnDestroy { + + checkClickTarget(target) { const rect = target.getBoundingBox(); @@ -1123,22 +383,297 @@ export class PlayComponent implements OnInit, OnDestroy { 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}; + + + addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { + + const audioObj = this.audioObj; + + if (url == null) { + url = 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); + } + + + + + + + // ======================================================编写区域========================================================================== + + + + + + /** + * æ·»åŠ é»˜è®¤æ•°æ® ä¾¿äºŽæ— æ•°æ®æ—¶çš„展示 + */ + initDefaultData() { + + if (!this.data.pic_url) { + this.data.pic_url = 'assets/play/default/pic.jpg'; + this.data.pic_url_2 = 'assets/play/default/pic.jpg'; + } + } + + + /** + * æ·»åŠ é¢„åŠ è½½å›¾ç‰‡ + */ + initImg() { + + this.addUrlToImages(this.data.pic_url); + this.addUrlToImages(this.data.pic_url_2); + + } + + /** + * æ·»åŠ é¢„åŠ è½½éŸ³é¢‘ + */ + initAudio() { + + // éŸ³é¢‘èµ„æº + this.addUrlToAudioObj(this.data.audio_url); + this.addUrlToAudioObj(this.data.audio_url_2); + + // 音效 + this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); + + } + + + + /** + * åˆå§‹åŒ–æ•°æ® + */ + initData() { + + const sx = this.canvasWidth / this.canvasBaseW; + const sy = this.canvasHeight / this.canvasBaseH; + const s = Math.min(sx, sy); + this.mapScale = s; + + // this.mapScale = sx; + // this.mapScale = sy; + + + this.renderArr = []; + + + + } + + + + /** + * åˆå§‹åŒ–试图 + */ + initView() { + + + this.initPic(); + + this.initBottomPart(); + + } + + initBottomPart() { + + const btnLeft = new MySprite(); + btnLeft.init(this.images.get('btn_left')); + btnLeft.x = this.canvasWidth - 150 * this.mapScale; + btnLeft.y = this.canvasHeight - 100 * this.mapScale; + + btnLeft.setScaleXY(this.mapScale); + + this.renderArr.push(btnLeft); + + this.btnLeft = btnLeft; + + + + const btnRight = new MySprite(); + btnRight.init(this.images.get('btn_right')); + btnRight.x = this.canvasWidth - 50 * this.mapScale; + btnRight.y = this.canvasHeight - 100 * this.mapScale; + btnRight.setScaleXY(this.mapScale); + + this.renderArr.push(btnRight); + + this.btnRight = btnRight; + } + + initPic() { + + const maxW = this.canvasWidth * 0.7; + + const pic1 = new MySprite(); + pic1.init(this.images.get(this.data.pic_url)); + pic1.x = this.canvasWidth / 2; + pic1.y = this.canvasHeight / 2; + pic1.setScaleXY(maxW / pic1.width); + + this.renderArr.push(pic1); + this.pic1 = pic1; + + + const label1 = new Label(); + label1.text = this.data.text; + label1.textAlign = 'center'; + label1.fontSize = 50; + label1.fontName = 'BRLNSDB'; + label1.fontColor = '#ffffff'; + + pic1.addChild(label1); + + + + + + 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(); + } + + btnRightClicked() { + + this.nextPage(); + } + + lastPage() { + + if (this.curPic == this.pic1) { + return; + } + + this.canTouch = false; + + 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.pic1; + }); + } + + nextPage() { + + if (this.curPic == this.pic2) { + return; + } + + this.canTouch = false; + + 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); + } + + pic2Clicked() { + this.playAudio(this.data.audio_url_2); + } + + + + + + mapDown(event) { + + if (!this.canTouch) { + return; + } + + if ( this.checkClickTarget(this.btnLeft) ) { + this.btnLeftClicked(); + return; + } + + if ( this.checkClickTarget(this.btnRight) ) { + this.btnRightClicked(); + return; + } + + if ( this.checkClickTarget(this.pic1) ) { + this.pic1Clicked(); + return; + } + + if ( this.checkClickTarget(this.pic2) ) { + this.pic2Clicked(); + return; + } + + } + + mapMove(event) { + + } + + mapUp(event) { } - 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; + + update() { + + // ---------------------------------------------------------- + this.animationId = window.requestAnimationFrame(this.update.bind(this)); + // 清除画布内容 + this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); + // tween 更新动画 + TWEEN.update(); + // ---------------------------------------------------------- + + + + this.updateArr(this.renderArr); + + } + + } diff --git a/src/app/play/resources.js b/src/app/play/resources.js index 57a1c19221fb47661ada0ff3eb780fa4a121d226..d9b584c92bc24d0c04374cb1568478fdbefba9c7 100644 --- a/src/app/play/resources.js +++ b/src/app/play/resources.js @@ -1,10 +1,9 @@ const res = [ - ['bg', "assets/play/bg.jpg"], + // ['bg', "assets/play/bg.jpg"], ['btn_left', "assets/play/btn_left.png"], ['btn_right', "assets/play/btn_right.png"], - ['text_bg', "assets/play/text_bg.png"], - + // ['text_bg', "assets/play/text_bg.png"], ]; @@ -12,10 +11,7 @@ const res = [ const resAudio = [ - - // ['click', "assets/play/music/click.mp3"], - - + ['click', "assets/play/music/click.mp3"], ]; diff --git a/src/app/services/config.service.spec.ts b/src/app/services/config.service.spec.ts deleted file mode 100644 index c8fff3dd4ab88ffec8b7c5a6b090c59a8ce2b314..0000000000000000000000000000000000000000 --- a/src/app/services/config.service.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { ConfigService } from './config.service'; - -describe('ConfigService', () => { - beforeEach(() => TestBed.configureTestingModule({})); - - it('should be created', () => { - const service: ConfigService = TestBed.get(ConfigService); - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/config.service.ts b/src/app/services/config.service.ts deleted file mode 100644 index ebbf2a7beadaa6a28cb6ed7eb912969d6f624d2b..0000000000000000000000000000000000000000 --- a/src/app/services/config.service.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Injectable } from '@angular/core'; -import {HttpClient} from "@angular/common/http"; -import {Observable} from "rxjs"; - -@Injectable({ - providedIn: 'root' -}) -export class ConfigService { - - configUrl = 'proxy.conf.json'; - - constructor( private http: HttpClient ) { } - - getConfig() { - return this.http.get(this.configUrl) - .pipe( - - - ); - } - - - showConfig() { - this.getConfig() - .subscribe((data) => { - console.log('data:', data); - - }); - } - - - test(data) { - - // return new Promise<any> { - // return new Promise((resolve, reject) => { - // this.http.get(url).subscribe((res) => { - // resolve(res); - // }, reject); - // }); - // - return this.get('/api/login'); - // return this.http.post('/login', data); - } - - - get(url: string): Promise<any> { - return new Promise((resolve, reject) => { - this.http.get(url).subscribe((res) => { - resolve(res); - }, reject); - }); - } - - // login(user): Observable<any> { - // - // - // return this.http.post('/login', user).pipe( - // tap((data => { - // console.log('login', data) - // localStorage.setItem('token', _.get(data, 'token')); - // delete data['token']; - // localStorage.setItem('info', JSON.stringify(data)); - // this.getInfoPromise = this.load('/user/getInfo'); - // })) - // ); - // } -}