Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
C
cocosTest
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
cocosTest
Commits
a7e92ed4
Commit
a7e92ed4
authored
Jan 21, 2020
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update template
parent
c915a859
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
637 additions
and
1262 deletions
+637
-1262
form.component.html
src/app/form/form.component.html
+230
-140
form.component.scss
src/app/form/form.component.scss
+0
-46
form.component.ts
src/app/form/form.component.ts
+30
-144
Unit.ts
src/app/play/Unit.ts
+11
-8
play.component.scss
src/app/play/play.component.scss
+0
-10
play.component.ts
src/app/play/play.component.ts
+363
-828
resources.js
src/app/play/resources.js
+3
-7
config.service.spec.ts
src/app/services/config.service.spec.ts
+0
-12
config.service.ts
src/app/services/config.service.ts
+0
-67
No files found.
src/app/form/form.component.html
View file @
a7e92ed4
...
@@ -2,244 +2,334 @@
...
@@ -2,244 +2,334 @@
<div
class=
"model-content"
>
<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>-->
<!--</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>-->
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> bg-sound: </h5>-->
<!--<div nz-col nzSpan="8" class="add-btn-box" >-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.bg_audio_url"-->
<!--<!–<div style="width: 100%; height: 100%;">–>-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
<!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"-->
<!--</app-audio-recorder>-->
<!--(click)="addPic()">-->
<!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
<!--Add-->
<!--</button>-->
<!--<!–</div>–>-->
<!--</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">-->
<!--<!–<div style="padding-bottom: 30px;">–>-->
<!--<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>-->
<!--<!–<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">-->
<!--<!–<div nz-row style="width: 50%; padding-bottom: 20px;">–>-->
<!--<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 *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-->
<!--<!–</div>–>-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--<!–<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" >-->
<!--<!–<div *ngFor="let it of picArr; let i = index"–>-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<!–nz-col nzSpan="8" >–>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
<!--<!–<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>-->
src/app/form/form.component.scss
View file @
a7e92ed4
...
@@ -5,50 +5,4 @@
...
@@ -5,50 +5,4 @@
width
:
100%
;
width
:
100%
;
height
:
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
;
}
}
}
src/app/form/form.component.ts
View file @
a7e92ed4
...
@@ -9,30 +9,10 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
...
@@ -9,30 +9,10 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
})
})
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
picArr
=
[];
// 储存数据用
saveKey
=
"
test_0011
"
;
_item
:
any
;
// 储存对象
item
;
KEY
=
'
hw_000
'
;
// @Input()
set
item
(
item
)
{
this
.
_item
=
item
;
// this.init();
}
get
item
()
{
return
this
.
_item
;
}
@
Output
()
update
=
new
EventEmitter
();
constructor
(
private
appRef
:
ApplicationRef
)
{
constructor
(
private
appRef
:
ApplicationRef
)
{
...
@@ -43,162 +23,68 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -43,162 +23,68 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit
()
{
ngOnInit
()
{
this
.
item
=
{};
this
.
item
=
{};
this
.
item
.
contentObj
=
{};
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
// 获取存储的数据
getData
((
data
)
=>
{
(
<
any
>
window
).
courseware
.
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
.
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
()
{
ngOnDestroy
()
{
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
()
{
init
()
{
}
deleteItem
(
data
)
{
const
index
=
this
.
picArr
.
indexOf
(
data
);
if
(
index
!==
-
1
)
{
this
.
picArr
.
splice
(
index
,
1
);
}
// this.update.emit(this.item);
this
.
save
();
}
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
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);
}
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
onAudioUploadSuccessByItem
(
e
,
item
,
id
=
null
)
{
if
(
id
!=
null
)
{
item
[
id
+
'
_audio_url
'
]
=
e
.
url
;
}
else
{
item
.
audio_url
=
e
.
url
;
}
// this.update.emit(this.item);
this
.
save
();
this
.
save
();
}
}
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
()
{
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
KEY
);
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
this
.
refresh
();
this
.
refresh
();
}
}
/**
* 刷新 渲染页面
*/
refresh
()
{
refresh
()
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
this
.
appRef
.
tick
();
...
...
src/app/play/Unit.ts
View file @
a7e92ed4
...
@@ -359,7 +359,7 @@ export class ColorSpr extends MySprite {
...
@@ -359,7 +359,7 @@ export class ColorSpr extends MySprite {
g
=
0
;
g
=
0
;
b
=
0
;
b
=
0
;
createGSCanvas
(){
createGSCanvas
()
{
if
(
!
this
.
img
)
{
if
(
!
this
.
img
)
{
return
;
return
;
...
@@ -1327,6 +1327,16 @@ export function removeItemFromArr(arr, item) {
...
@@ -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 =
...
@@ -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
)
{
export
function
delayCall
(
callback
,
second
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
const
tween
=
new
TWEEN
.
Tween
(
this
)
...
...
src/app/play/play.component.scss
View file @
a7e92ed4
.game-container
{
.game-container
{
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
//background-image: url("/assets/listen-read-circle/bg.jpg");
background
:
#ffffff
;
background
:
#ffffff
;
background-repeat
:
no-repeat
;
background-size
:
cover
;
background-size
:
cover
;
}
}
...
@@ -19,11 +17,3 @@
...
@@ -19,11 +17,3 @@
src
:
url("../../assets/font/BRLNSDB.TTF")
;
src
:
url("../../assets/font/BRLNSDB.TTF")
;
}
}
//
//
//@font-face
//{
// font-family: 'RoundedBold';
// src: url("../../assets/font/ArialRoundedBold.otf") ;
//}
src/app/play/play.component.ts
View file @
a7e92ed4
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
import
{
MySprite
,
Label
,
Label
,
moveItem
,
MySprite
,
tweenChange
,
rotateItem
,
removeItemFromArr
,
ShapeRect
,
}
from
'
./Unit
'
;
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
...
@@ -14,7 +10,6 @@ import {res, resAudio} from './resources';
...
@@ -14,7 +10,6 @@ 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
'
;
...
@@ -26,36 +21,23 @@ import TWEEN from '@tweenjs/tween.js';
...
@@ -26,36 +21,23 @@ import TWEEN from '@tweenjs/tween.js';
styleUrls
:
[
'
./play.component.scss
'
]
styleUrls
:
[
'
./play.component.scss
'
]
})
})
export
class
PlayComponent
implements
OnInit
,
OnDestroy
{
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
(
'
canvas
'
)
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
)
wrap
:
ElementRef
;
@
ViewChild
(
'
wrap
'
)
wrap
:
ElementRef
;
canvasWidth
=
1280
;
canvasHeight
=
720
;
canvasBaseW
=
1280
;
// 数据
canvasBaseH
=
720
;
data
;
ctx
;
ctx
;
fps
=
0
;
frametime
=
0
;
// 上一帧动画的时间, 两帧时间差
canvasWidth
=
1280
;
// canvas实际宽度
canvasHeight
=
720
;
// canvas实际高度
mx
;
canvasBaseW
=
1280
;
// canvas 资源预设宽度
my
;
// 点击坐标
canvasBaseH
=
720
;
// canvas 资源预设高度
mx
;
// 点击x坐标
my
;
// 点击y坐标
// 资源
// 资源
...
@@ -67,806 +49,121 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -67,806 +49,121 @@ export class PlayComponent implements OnInit, OnDestroy {
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
'
;
canTouch
=
true
;
KEY
=
'
hw_000
'
;
// -----
picArr
;
pageLabel
;
leftBtn
;
rightBtn
;
bgLayer
;
curPageIndex
;
btnLeft
;
btnRight
;
pic1
;
pic2
;
hotZoneArr
;
canTouch
=
true
;
picIndex
=
0
;
bgArr
;
endPageArr
;
gameEndFlag
;
showPetalFlag
;
bg
;
curPic
;
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
onResize
(
event
)
{
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
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
()
{
load
()
{
this
.
endPageArr
=
[];
this
.
showPetalFlag
=
true
;
this
.
addPetal
();
}
stopEndPatal
()
{
// 预加载资源
this
.
endPageArr
=
[];
this
.
loadResources
().
then
(()
=>
{
this
.
showPetalFlag
=
false
;
window
[
"
air
"
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
this
.
init
();
this
.
update
();
});
}
}
addPetal
()
{
if
(
!
this
.
showPetalFlag
)
{
init
()
{
return
;
}
const
petal
=
this
.
getPetal
();
this
.
initCtx
();
this
.
endPageArr
.
push
(
petal
);
this
.
initData
();
this
.
initView
();
}
moveItem
(
petal
,
petal
.
x
,
this
.
canvasHeight
+
petal
.
height
*
petal
.
scaleY
,
petal
[
'
time
'
],
()
=>
{
initCtx
()
{
removeItemFromArr
(
this
.
endPageArr
,
petal
);
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
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
addPetal
()
;
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
},
200
)
;
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
;
updateItem
(
item
)
{
petal
.
rotation
=
randomR
;
if
(
item
)
{
item
.
update
();
const
randomX
=
Math
.
random
()
*
this
.
canvasWidth
;
}
petal
.
x
=
randomX
;
}
petal
.
y
=
-
petal
.
height
/
2
*
petal
.
scaleY
;
const
randomT
=
2
+
Math
.
random
()
*
5
;
updateArr
(
arr
)
{
petal
[
'
time
'
]
=
randomT
;
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 {
...
@@ -912,7 +209,6 @@ export class PlayComponent implements OnInit, OnDestroy {
firstTouch
=
false
;
firstTouch
=
false
;
removeMouseListener
();
removeMouseListener
();
}
}
console
.
log
(
'
touch down
'
);
setMxMyByTouch
(
e
);
setMxMyByTouch
(
e
);
this
.
mapDown
(
e
);
this
.
mapDown
(
e
);
};
};
...
@@ -930,7 +226,6 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -930,7 +226,6 @@ export class PlayComponent implements OnInit, OnDestroy {
firstTouch
=
false
;
firstTouch
=
false
;
removeTouchListener
();
removeTouchListener
();
}
}
console
.
log
(
'
mouse down
'
);
setMxMyByMouse
(
e
);
setMxMyByMouse
(
e
);
this
.
mapDown
(
e
);
this
.
mapDown
(
e
);
};
};
...
@@ -995,43 +290,6 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -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
()
{
loadResources
()
{
const
pr
=
[];
const
pr
=
[];
this
.
rawImages
.
forEach
((
value
,
key
)
=>
{
// 预加载图片
this
.
rawImages
.
forEach
((
value
,
key
)
=>
{
// 预加载图片
...
@@ -1045,7 +303,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -1045,7 +303,7 @@ export class PlayComponent implements OnInit, OnDestroy {
pr
.
push
(
p
);
pr
.
push
(
p
);
});
});
this
.
rawAudios
.
forEach
((
value
,
key
)
=>
{
// 预加载
图片
this
.
rawAudios
.
forEach
((
value
,
key
)
=>
{
// 预加载
音频
const
a
=
this
.
preloadAudio
(
value
)
const
a
=
this
.
preloadAudio
(
value
)
.
then
(()
=>
{
.
then
(()
=>
{
...
@@ -1091,6 +349,8 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -1091,6 +349,8 @@ export class PlayComponent implements OnInit, OnDestroy {
checkClickTarget
(
target
)
{
checkClickTarget
(
target
)
{
const
rect
=
target
.
getBoundingBox
();
const
rect
=
target
.
getBoundingBox
();
...
@@ -1123,22 +383,297 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -1123,22 +383,297 @@ export class PlayComponent implements OnInit, OnDestroy {
return
false
;
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
;
update
()
{
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
// ----------------------------------------------------------
this
.
animationId
=
window
.
requestAnimationFrame
(
this
.
update
.
bind
(
this
));
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
// tween 更新动画
TWEEN
.
update
();
// ----------------------------------------------------------
this
.
updateArr
(
this
.
renderArr
);
}
}
}
}
src/app/play/resources.js
View file @
a7e92ed4
const
res
=
[
const
res
=
[
[
'
bg
'
,
"
assets/play/bg.jpg
"
],
//
['bg', "assets/play/bg.jpg"],
[
'
btn_left
'
,
"
assets/play/btn_left.png
"
],
[
'
btn_left
'
,
"
assets/play/btn_left.png
"
],
[
'
btn_right
'
,
"
assets/play/btn_right.png
"
],
[
'
btn_right
'
,
"
assets/play/btn_right.png
"
],
[
'
text_bg
'
,
"
assets/play/text_bg.png
"
],
// ['text_bg', "assets/play/text_bg.png"],
];
];
...
@@ -12,10 +11,7 @@ const res = [
...
@@ -12,10 +11,7 @@ const res = [
const
resAudio
=
[
const
resAudio
=
[
[
'
click
'
,
"
assets/play/music/click.mp3
"
],
// ['click', "assets/play/music/click.mp3"],
];
];
...
...
src/app/services/config.service.spec.ts
deleted
100644 → 0
View file @
c915a859
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
();
});
});
src/app/services/config.service.ts
deleted
100644 → 0
View file @
c915a859
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');
// }))
// );
// }
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment