Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
PU01
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
PU01
Commits
40281eec
Commit
40281eec
authored
Jun 23, 2020
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
dev commit
parent
13070a82
Changes
6
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
378 additions
and
130 deletions
+378
-130
form.component.html
src/app/form/form.component.html
+79
-2
form.component.scss
src/app/form/form.component.scss
+6
-0
form.component.ts
src/app/form/form.component.ts
+29
-5
Cartoon.ts
src/app/play/Cartoon.ts
+2
-1
play.component.ts
src/app/play/play.component.ts
+261
-121
defaultData.js
src/assets/play/default/formData/defaultData.js
+1
-1
No files found.
src/app/form/form.component.html
View file @
40281eec
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
class=
"card-config"
>
<div
class=
"card-config"
>
<div
class=
"card-item clearfix"
style=
"padding: 0.5vw; width: 100%;"
>
<div
class=
"card-item-content border"
>
<div
class=
"card-item-content"
>
<div
class=
"title"
>
题目素材
</div>
<div
class=
"section"
>
<div
class=
"section-content"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"float: left; text-align: right; margin-right: 10px; margin-left: 10px;"
>
<span>
显示选项
</span><span>
:
</span>
</div>
<div
style=
"float: left; width: 300px;"
>
<nz-radio-group
[(
ngModel
)]="
contentObj
.
question
.
type
"
(
ngModelChange
)="
handleQuestionTypeChange
()"
>
<label
nz-radio
[
nzValue
]="'
Text
'"
>
文字
</label>
<label
nz-radio
[
nzValue
]="'
Image
'"
>
图片
</label>
<label
nz-radio
[
nzValue
]="'
LongAudio
'"
>
长音频
</label>
</nz-radio-group>
</div>
<div
style=
"float: left; width: 300px;"
>
<div
*
ngIf=
"contentObj.question.type=='Image'"
>
<app-upload-image-with-preview
style=
"width: 100%;"
[
picUrl
]="
contentObj
.
question
.
image_url
"
(
imageUploaded
)="
onImageUploadSuccessByItem
($
event
,
contentObj
.
question
,
'
image_url
')"
></app-upload-image-with-preview>
</div>
<div
*
ngIf=
"contentObj.question.type=='Text'"
>
<textarea
type=
"text"
nz-input
placeholder=
""
[(
ngModel
)]="
contentObj
.
question
.
text
"
(
blur
)="
saveItem
()"
></textarea>
</div>
<div
*
ngIf=
"contentObj.question.type=='LongAudio'"
>
<app-audio-recorder
[
audioUrl
]="
contentObj
.
question
.
longAudio_url
"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
contentObj
.
question
,
'
longAudio_url
')"
></app-audio-recorder>
</div>
</div>
</div>
</div>
</div>
<div
class=
"section"
>
<div
class=
"section-content"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"float: left; text-align: right; margin-right: 10px; margin-left: 10px;"
>
<span>
卡片类型
</span><span>
:
</span>
</div>
<div
style=
"float: left; width: 300px;"
>
<nz-radio-group
[(
ngModel
)]="
contentObj
.
answerType
"
(
ngModelChange
)="
saveItem
()"
>
<label
nz-radio
[
nzValue
]="'
Text
'"
>
文字
</label>
<label
nz-radio
[
nzDisabled
]="
contentObj
.
question
.
type
!=
'
LongAudio
'"
[
nzValue
]="'
Image
'"
>
图片
</label>
</nz-radio-group>
</div>
<div
style=
"float: left; width: 300px;"
>
</div>
</div>
</div>
</div>
<div
class=
"section"
>
<div
class=
"section-content"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:1; text-align: right; margin-right: 10px;"
>
<span>
短音频
</span><span>
:
</span>
</div>
<div
style=
"flex:3"
>
<app-audio-recorder
[
audioUrl
]="
contentObj
.
question
.
shortAudio_url
"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
contentObj
.
question
,
'
shortAudio_url
')"
></app-audio-recorder>
</div>
<div
style=
"flex:8"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
*
ngFor=
"let item of contentObj.dataArray; let i = index"
class=
"card-item"
style=
"padding: 0.5vw; "
>
<div
*
ngFor=
"let item of contentObj.dataArray; let i = index"
class=
"card-item"
style=
"padding: 0.5vw; "
>
<div
class=
"card-item-content border"
>
<div
class=
"card-item-content border"
>
<div
class=
"card-item-content"
>
<div
class=
"card-item-content"
>
...
@@ -9,7 +86,7 @@
...
@@ -9,7 +86,7 @@
<div
class=
"section"
>
<div
class=
"section"
>
<div
class=
"section-content"
>
<div
class=
"section-content"
>
<div
style=
"flex:1"
>
<div
*
ngIf=
"contentObj.answerType=='Text'"
style=
"flex:1"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"display: flex; margin-bottom: 10px;"
>
<div
style=
"flex:1"
>
<div
style=
"flex:1"
>
文字
文字
...
@@ -20,7 +97,7 @@
...
@@ -20,7 +97,7 @@
</div>
</div>
</div>
</div>
<div
style=
"flex:1"
>
<div
*
ngIf=
"contentObj.answerType=='Image'"
style=
"flex:1"
>
<div
style=
"display: flex; "
>
<div
style=
"display: flex; "
>
<div
style=
"flex:1"
>
<div
style=
"flex:1"
>
图片
图片
...
...
src/app/form/form.component.scss
View file @
40281eec
...
@@ -53,3 +53,9 @@
...
@@ -53,3 +53,9 @@
}
}
}
}
}
}
.clearfix
:before
,
.clearfix
:after
{
content
:
""
;
display
:
block
;
clear
:
both
;
}
\ No newline at end of file
src/app/form/form.component.ts
View file @
40281eec
...
@@ -11,7 +11,7 @@ import defauleFormData from '../../assets/play/default/formData/defaultData.js'
...
@@ -11,7 +11,7 @@ import defauleFormData from '../../assets/play/default/formData/defaultData.js'
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
_item
:
any
;
_item
:
any
;
KEY
=
'
DataKey_PU0
8
'
;
KEY
=
'
DataKey_PU0
1
'
;
checkOptionsOne
=
[]
checkOptionsOne
=
[]
set
item
(
item
)
{
set
item
(
item
)
{
...
@@ -23,9 +23,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -23,9 +23,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
contentObj
=
{
contentObj
=
{
"
version
"
:
"
1.0
"
,
"
version
"
:
"
1.0
"
,
key
:
"
DataKey_PU01
"
,
key
:
"
DataKey_PU01
"
,
dataArray
:
[
question
:
{
{
text
:
""
,
image_url
:
""
}
type
:
"
Image
"
]
},
answerType
:
"
Text
"
,
dataArray
:
[]
}
}
@
Output
()
@
Output
()
...
@@ -34,6 +36,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -34,6 +36,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
handleQuestionTypeChange
(){
if
(
this
.
contentObj
.
question
.
type
!=
'
LongAudio
'
){
this
.
contentObj
.
answerType
=
'
Text
'
}
this
.
saveItem
()
}
ngOnInit
()
{
ngOnInit
()
{
this
.
item
=
{};
this
.
item
=
{};
this
.
item
.
contentObj
=
{};
this
.
item
.
contentObj
=
{};
...
@@ -113,7 +137,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -113,7 +137,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
onImageUploadSuccessByItem
(
e
,
item
,
key
)
{
onImageUploadSuccessByItem
(
e
,
item
,
key
)
{
item
[
key
]
.
image_url
=
e
.
url
item
[
key
]
=
e
.
url
this
.
save
();
this
.
save
();
}
}
...
...
src/app/play/Cartoon.ts
View file @
40281eec
...
@@ -14,6 +14,7 @@ import {
...
@@ -14,6 +14,7 @@ import {
ShapeCircle
,
ShapeCircle
,
MyAnimation
MyAnimation
}
from
"
./Unit
"
;
}
from
"
./Unit
"
;
import
{
matchesElement
}
from
'
@angular/animations/browser/src/render/shared
'
;
export
class
Cartoon
{
export
class
Cartoon
{
...
@@ -410,7 +411,7 @@ export class Cartoon {
...
@@ -410,7 +411,7 @@ export class Cartoon {
createAnimation
(
imageKey
,
length
,
runTime
,
endCallback
?,
order
?:
boolean
)
{
createAnimation
(
imageKey
,
length
,
runTime
,
endCallback
?,
order
?:
boolean
)
{
let
element
=
new
MyAnimation
()
let
element
=
new
MyAnimation
()
element
.
id
=
"
ANI-
"
+
imageKey
element
.
id
=
"
ANI-
"
+
imageKey
+
"
-
"
+
Math
.
floor
(
Math
.
random
()
*
10000
)
if
(
order
){
if
(
order
){
for
(
let
index
=
length
;
index
>
0
;
index
--
)
{
for
(
let
index
=
length
;
index
>
0
;
index
--
)
{
element
.
addFrameByImg
(
this
.
images
.
get
(
`
${
imageKey
}
(
${
index
}
)`
))
element
.
addFrameByImg
(
this
.
images
.
get
(
`
${
imageKey
}
(
${
index
}
)`
))
...
...
src/app/play/play.component.ts
View file @
40281eec
...
@@ -31,7 +31,8 @@ import {
...
@@ -31,7 +31,8 @@ import {
waterWave
,
waterWave
,
jelly
,
jelly
,
getAngleByPos
,
getAngleByPos
,
getPosDistance
getPosDistance
,
shake
}
from
"
./Unit
"
;
}
from
"
./Unit
"
;
import
{
localImages
,
localAudios
}
from
"
./resources
"
;
import
{
localImages
,
localAudios
}
from
"
./resources
"
;
...
@@ -52,7 +53,8 @@ const zIndexMap = {
...
@@ -52,7 +53,8 @@ const zIndexMap = {
questionKuang
:
50
,
questionKuang
:
50
,
imageContainer
:
20
,
imageContainer
:
20
,
shortAudio
:
60
,
shortAudio
:
60
,
progressBar
:
55
progressBar
:
55
,
animation
:
200
}
}
@
Component
({
@
Component
({
...
@@ -123,7 +125,8 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -123,7 +125,8 @@ export class PlayComponent implements OnInit, OnDestroy {
m_answerCard_All
=
[]
m_answerCard_All
=
[]
m_questionCard_All
=
[]
m_questionCard_All
=
[]
m_enableCardMove
=
false
;
m_enableCardMove
=
false
;
m_currentSelectedCardID
=
null
m_currentSelectedCardID
=
null
;
m_startGame
=
true
// ------------------------------------
// ------------------------------------
...
@@ -165,12 +168,21 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -165,12 +168,21 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
g_formData
.
dataArray
.
forEach
(
element
=>
{
this
.
g_formData
.
dataArray
.
forEach
(
element
=>
{
array
.
push
(
element
.
image_url
)
array
.
push
(
element
.
image_url
)
});
});
if
(
this
.
g_formData
.
question
.
image_url
){
array
.
push
(
this
.
g_formData
.
question
.
image_url
)
}
return
array
return
array
}
}
// 映射预加载音频[网路]资源 返回包含音频路径的数组
// 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray
(
contentObj
){
mapToAduioArray
(
contentObj
){
let
array
=
[]
let
array
=
[]
if
(
this
.
g_formData
.
question
.
longAudio_url
){
array
.
push
(
this
.
g_formData
.
question
.
longAudio_url
)
}
if
(
this
.
g_formData
.
question
.
shortAudio_url
){
array
.
push
(
this
.
g_formData
.
question
.
shortAudio_url
)
}
return
array
return
array
}
}
...
@@ -207,6 +219,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -207,6 +219,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
m_enableCardMove
=
false
;
this
.
m_enableCardMove
=
false
;
this
.
m_answerCard_All
=
[]
this
.
m_answerCard_All
=
[]
this
.
m_questionCard_All
=
[]
this
.
m_questionCard_All
=
[]
this
.
m_startGame
=
true
;
}
}
startGame
(){
startGame
(){
...
@@ -219,7 +232,9 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -219,7 +232,9 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
endGame
(){
endGame
(){
alert
(
"
End
"
)
this
.
showEndPatal
()
this
.
m_startGame
=
false
;
}
}
initBackground
(){
initBackground
(){
...
@@ -270,16 +285,18 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -270,16 +285,18 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
g_formData
.
dataArray
.
forEach
((
element
,
index
)
=>
{
this
.
g_formData
.
dataArray
.
forEach
((
element
,
index
)
=>
{
this
.
m_questionCard_All
.
push
(
this
.
createQuestionCardText
(
index
,
element
))
this
.
m_questionCard_All
.
push
(
this
.
createQuestionCardText
(
index
,
element
))
});
});
this
.
m_questionCard_All
=
this
.
randomArray_shuffle
(
this
.
m_questionCard_All
)
this
.
alignCenter
(
this
.
m_questionCard_All
,
20
*
this
.
g_mapScale
,
true
)
this
.
alignCenter
(
this
.
m_questionCard_All
,
20
*
this
.
g_mapScale
,
true
)
}
}
createQuestionCardText
(
index
,
text
){
createQuestionCardText
(
index
,
text
){
let
element
=
this
.
g_cartoon
.
createCartoonElementLabel
(
"
questioncard-text-
"
+
index
,
"
"
+
text
+
"
"
,
"
BRLNSDB
"
,
"
#FFFFFF
"
,
6
0
*
this
.
g_mapScale
,
0
,
this
.
g_cartoon
.
getOrigin
().
y
+
720
*
this
.
g_mapScale
-
250
*
this
.
g_mapScale
)
let
element
=
this
.
g_cartoon
.
createCartoonElementLabel
(
"
questioncard-text-
"
+
index
,
"
"
+
text
+
"
"
,
"
BRLNSDB
"
,
"
#FFFFFF
"
,
6
5
*
this
.
g_mapScale
,
0
,
this
.
g_cartoon
.
getOrigin
().
y
+
720
*
this
.
g_mapScale
-
250
*
this
.
g_mapScale
)
let
imageBD
=
element
.
ref
.
getBoundingBox
()
let
imageBD
=
element
.
ref
.
getBoundingBox
()
let
cardHeight
=
127
let
cardHeight
=
127
element
.
index
=
index
;
// 边框
// 边框
let
borderLeft
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
questioncard-text-border-left-
"
+
index
,
"
image_border_left
"
,
(
w
,
h
)
=>
{
let
borderLeft
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
questioncard-text-border-left-
"
+
index
,
"
image_border_left
"
,
(
w
,
h
)
=>
{
return
{
return
{
...
@@ -360,10 +377,10 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -360,10 +377,10 @@ export class PlayComponent implements OnInit, OnDestroy {
})
})
element
.
ref
.
addChild
(
borderRight_H
.
ref
)
element
.
ref
.
addChild
(
borderRight_H
.
ref
)
let
text_copy
=
this
.
g_cartoon
.
createCartoonElementLabel
(
"
questioncard-text-
"
+
index
+
"
-copy
"
,
text
,
"
BRLNSDB
"
,
"
#d94158
"
,
60
*
this
.
g_mapScale
,
0
,
0
)
element
.
text_copy
=
this
.
g_cartoon
.
createCartoonElementLabel
(
"
questioncard-text-
"
+
index
+
"
-copy
"
,
text
,
"
BRLNSDB
"
,
"
#d94158
"
,
65
*
this
.
g_mapScale
,
0
,
0
)
let
text_copy_shadow
=
this
.
g_cartoon
.
createCartoonElementLabel
(
"
questioncard-text-
"
+
index
+
"
-copy
"
,
text
,
"
BRLNSDB
"
,
"
#fdf0cd
"
,
60
*
this
.
g_mapScale
,
0
,
5
)
element
.
text_copy_shadow
=
this
.
g_cartoon
.
createCartoonElementLabel
(
"
questioncard-text-
"
+
index
+
"
-copy
"
,
text
,
"
BRLNSDB
"
,
"
#fdf0cd
"
,
65
*
this
.
g_mapScale
,
0
,
5
)
element
.
ref
.
addChild
(
text_copy_shadow
.
ref
)
element
.
ref
.
addChild
(
element
.
text_copy_shadow
.
ref
)
element
.
ref
.
addChild
(
text_copy
.
ref
)
element
.
ref
.
addChild
(
element
.
text_copy
.
ref
)
border_H
.
ref
.
visible
=
false
;
border_H
.
ref
.
visible
=
false
;
borderRight_H
.
ref
.
visible
=
false
;
borderRight_H
.
ref
.
visible
=
false
;
...
@@ -453,6 +470,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -453,6 +470,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
})
})
let
imageBD
=
element
.
ref
.
getBoundingBox
()
let
imageBD
=
element
.
ref
.
getBoundingBox
()
element
.
index
=
index
;
// 边框
// 边框
let
border
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
questioncard-image-border-
"
+
index
,
"
image_center
"
,
(
w
,
h
)
=>
{
let
border
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
questioncard-image-border-
"
+
index
,
"
image_center
"
,
(
w
,
h
)
=>
{
...
@@ -494,7 +512,6 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -494,7 +512,6 @@ export class PlayComponent implements OnInit, OnDestroy {
})
})
element
.
ref
.
addChild
(
borderRight
.
ref
)
element
.
ref
.
addChild
(
borderRight
.
ref
)
// 高亮边框
// 高亮边框
let
border_H
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
questioncard-image-border-h-
"
+
index
,
"
border_center
"
,
(
w
,
h
)
=>
{
let
border_H
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
questioncard-image-border-h-
"
+
index
,
"
border_center
"
,
(
w
,
h
)
=>
{
return
{
return
{
...
@@ -601,11 +618,9 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -601,11 +618,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 答案卡片 文字
// 答案卡片 文字
initAnsterCard_Text
(){
initAnsterCard_Text
(){
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardText
(
0
,
{}))
this
.
g_formData
.
dataArray
.
forEach
((
element
,
index
)
=>
{
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardText
(
1
,
{}))
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardText
(
index
,
element
))
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardText
(
2
,
{}))
});
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardText
(
3
,
{}))
this
.
alignCenter
(
this
.
m_answerCard_All
,
10
*
this
.
g_mapScale
,
true
)
this
.
alignCenter
(
this
.
m_answerCard_All
,
10
*
this
.
g_mapScale
,
true
)
}
}
...
@@ -621,24 +636,71 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -621,24 +636,71 @@ export class PlayComponent implements OnInit, OnDestroy {
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
720
*
this
.
g_mapScale
-
110
*
this
.
g_mapScale
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
720
*
this
.
g_mapScale
-
110
*
this
.
g_mapScale
}
}
})
})
element
.
index
=
index
;
element
.
shake
=
(
callback
?)
=>
{
rotateItem
(
element
.
ref
,
10
,
0.1
,
()
=>
{
rotateItem
(
element
.
ref
,
-
10
,
0.2
,
()
=>
{
rotateItem
(
element
.
ref
,
10
,
0.2
,
()
=>
{
rotateItem
(
element
.
ref
,
0
,
0.1
,
()
=>
{
callback
&&
callback
()
})
})
})
})
}
element
.
star
=
(
callback
?)
=>
{
element
.
starAni
=
this
.
g_cartoon
.
createAnimation
(
"
icon_star
"
,
5
,
300
,
()
=>
{
element
.
starAni
.
visible
=
false
;
this
.
deleteElementInRender
(
element
.
starAni
.
id
)
callback
&&
callback
()
})
element
.
starAni
.
setScaleXY
(
1
)
element
.
starAni
.
x
=
element
.
ref
.
x
element
.
starAni
.
y
=
element
.
ref
.
y
this
.
render
(
element
.
starAni
,
zIndexMap
.
animation
)
element
.
starAni
.
play
()
}
this
.
subscribeMapUpEvent
(
element
.
id
,
()
=>
{
this
.
subscribeMapUpEvent
(
element
.
id
,
()
=>
{
if
(
this
.
m_currentSelectedCardID
&&
this
.
m_enableCardMove
){
if
(
this
.
m_currentSelectedCardID
&&
this
.
m_enableCardMove
){
let
selectedCard
=
this
.
g_cartoon
.
getCartoonElement
(
this
.
m_currentSelectedCardID
)
let
selectedCard
=
this
.
g_cartoon
.
getCartoonElement
(
this
.
m_currentSelectedCardID
)
if
(
selectedCard
.
index
==
element
.
index
){
selectedCard
.
ref
.
x
=
element
.
ref
.
x
selectedCard
.
ref
.
x
=
element
.
ref
.
x
selectedCard
.
ref
.
y
=
element
.
ref
.
y
selectedCard
.
ref
.
y
=
element
.
ref
.
y
selectedCard
.
release
({
x
:
element
.
ref
.
x
,
y
:
element
.
ref
.
y
-
10
*
this
.
g_mapScale
},
()
=>
{
selectedCard
.
release
({
x
:
element
.
ref
.
x
,
y
:
element
.
ref
.
y
-
10
*
this
.
g_mapScale
},
()
=>
{
let
spacing
=
0
if
(
this
.
g_formData
.
answerType
==
"
Image
"
){
if
(
this
.
g_formData
.
answerType
==
"
Image
"
){
this
.
alignCenter
(
this
.
m_answerCard_All
,
30
*
this
.
g_mapScale
,
true
)
spacing
=
20
*
this
.
g_mapScale
}
else
{
}
else
{
this
.
alignCenter
(
this
.
m_answerCard_All
,
20
*
this
.
g_mapScale
,
true
)
spacing
=
20
*
this
.
g_mapScale
}
this
.
alignCenter
(
this
.
m_answerCard_All
,
spacing
,
true
,
()
=>
{
element
.
star
(()
=>
{
let
end
=
true
this
.
m_answerCard_All
.
forEach
(
item
=>
{
if
(
item
.
id
.
indexOf
(
"
answercard
"
)
!=-
1
){
end
=
false
}
})
if
(
end
){
this
.
endGame
()
}
}
})
})
})
})
selectedCard
.
disable
=
true
;
selectedCard
.
disable
=
true
;
selectedCard
.
text_copy
.
ref
.
fontColor
=
"
#608dec
"
let
index
=
this
.
m_answerCard_All
.
indexOf
(
element
)
let
index
=
this
.
m_answerCard_All
.
indexOf
(
element
)
this
.
m_answerCard_All
.
splice
(
index
,
1
,
selectedCard
)
this
.
m_answerCard_All
.
splice
(
index
,
1
,
selectedCard
)
this
.
deleteElementInRender
(
element
.
id
)
this
.
deleteElementInRender
(
element
.
id
)
this
.
topOfRenderArray
(
this
.
g_cartoon
.
getCartoonElement
(
"
background-main-xia
"
).
ref
)
this
.
topOfRenderArray
(
this
.
g_cartoon
.
getCartoonElement
(
"
background-main-xia
"
).
ref
)
}
else
{
selectedCard
.
release
()
this
.
disableMoveAsstant
();
element
.
shake
()
}
}
}
this
.
g_enableMapUp
=
true
;
this
.
g_enableMapUp
=
true
;
return
true
return
true
...
@@ -650,11 +712,9 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -650,11 +712,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 答案卡片 图片
// 答案卡片 图片
initAnsterCard_Image
(){
initAnsterCard_Image
(){
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardImage
(
0
,
{}))
this
.
g_formData
.
dataArray
.
forEach
((
element
,
index
)
=>
{
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardImage
(
1
,
{}))
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardImage
(
index
,
element
))
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardImage
(
2
,
{}))
});
this
.
m_answerCard_All
.
push
(
this
.
createAnswerCardImage
(
3
,
{}))
this
.
alignCenter
(
this
.
m_answerCard_All
,
20
*
this
.
g_mapScale
,
true
)
this
.
alignCenter
(
this
.
m_answerCard_All
,
20
*
this
.
g_mapScale
,
true
)
}
}
...
@@ -670,24 +730,70 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -670,24 +730,70 @@ export class PlayComponent implements OnInit, OnDestroy {
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
720
*
this
.
g_mapScale
-
140
*
this
.
g_mapScale
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
720
*
this
.
g_mapScale
-
140
*
this
.
g_mapScale
}
}
})
})
element
.
index
=
index
;
element
.
shake
=
(
callback
?)
=>
{
rotateItem
(
element
.
ref
,
10
,
0.1
,
()
=>
{
rotateItem
(
element
.
ref
,
-
10
,
0.2
,
()
=>
{
rotateItem
(
element
.
ref
,
10
,
0.2
,
()
=>
{
rotateItem
(
element
.
ref
,
0
,
0.1
,
()
=>
{
callback
&&
callback
()
})
})
})
})
}
element
.
star
=
(
callback
?)
=>
{
element
.
starAni
=
this
.
g_cartoon
.
createAnimation
(
"
icon_star
"
,
5
,
300
,
()
=>
{
element
.
starAni
.
visible
=
false
;
this
.
deleteElementInRender
(
element
.
starAni
.
id
)
callback
&&
callback
()
})
element
.
starAni
.
setScaleXY
(
1
)
element
.
starAni
.
x
=
element
.
ref
.
x
element
.
starAni
.
y
=
element
.
ref
.
y
this
.
render
(
element
.
starAni
,
zIndexMap
.
animation
)
element
.
starAni
.
play
()
}
this
.
subscribeMapUpEvent
(
element
.
id
,
()
=>
{
this
.
subscribeMapUpEvent
(
element
.
id
,
()
=>
{
if
(
this
.
m_currentSelectedCardID
&&
this
.
m_enableCardMove
){
if
(
this
.
m_currentSelectedCardID
&&
this
.
m_enableCardMove
){
let
selectedCard
=
this
.
g_cartoon
.
getCartoonElement
(
this
.
m_currentSelectedCardID
)
let
selectedCard
=
this
.
g_cartoon
.
getCartoonElement
(
this
.
m_currentSelectedCardID
)
if
(
selectedCard
.
index
==
element
.
index
){
selectedCard
.
ref
.
x
=
element
.
ref
.
x
selectedCard
.
ref
.
x
=
element
.
ref
.
x
selectedCard
.
ref
.
y
=
element
.
ref
.
y
selectedCard
.
ref
.
y
=
element
.
ref
.
y
selectedCard
.
release
({
x
:
element
.
ref
.
x
,
y
:
element
.
ref
.
y
-
6
*
this
.
g_mapScale
},
()
=>
{
selectedCard
.
release
({
x
:
element
.
ref
.
x
,
y
:
element
.
ref
.
y
-
6
*
this
.
g_mapScale
},
()
=>
{
let
spacing
=
0
if
(
this
.
g_formData
.
answerType
==
"
Image
"
){
if
(
this
.
g_formData
.
answerType
==
"
Image
"
){
this
.
alignCenter
(
this
.
m_answerCard_All
,
30
*
this
.
g_mapScale
,
true
)
spacing
=
20
*
this
.
g_mapScale
}
else
{
}
else
{
this
.
alignCenter
(
this
.
m_answerCard_All
,
20
*
this
.
g_mapScale
,
true
)
spacing
=
20
*
this
.
g_mapScale
}
this
.
alignCenter
(
this
.
m_answerCard_All
,
spacing
,
true
,
()
=>
{
element
.
star
(()
=>
{
let
end
=
true
this
.
m_answerCard_All
.
forEach
(
item
=>
{
if
(
item
.
id
.
indexOf
(
"
answercard
"
)
!=-
1
){
end
=
false
}
})
if
(
end
){
this
.
endGame
()
}
}
})
})
})
})
selectedCard
.
disable
=
true
;
selectedCard
.
disable
=
true
;
let
index
=
this
.
m_answerCard_All
.
indexOf
(
element
)
let
index
=
this
.
m_answerCard_All
.
indexOf
(
element
)
this
.
m_answerCard_All
.
splice
(
index
,
1
,
selectedCard
)
this
.
m_answerCard_All
.
splice
(
index
,
1
,
selectedCard
)
this
.
deleteElementInRender
(
element
.
id
)
this
.
deleteElementInRender
(
element
.
id
)
this
.
topOfRenderArray
(
this
.
g_cartoon
.
getCartoonElement
(
"
background-main-xia
"
).
ref
)
this
.
topOfRenderArray
(
this
.
g_cartoon
.
getCartoonElement
(
"
background-main-xia
"
).
ref
)
}
else
{
selectedCard
.
release
()
this
.
disableMoveAsstant
();
element
.
shake
()
}
}
}
this
.
g_enableMapUp
=
true
;
this
.
g_enableMapUp
=
true
;
return
true
return
true
...
@@ -698,7 +804,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -698,7 +804,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
initQuestionBackground
(){
initQuestionBackground
(){
if
(
this
.
g_formData
.
question
.
type
==
"
Audio
"
){
if
(
this
.
g_formData
.
question
.
type
==
"
Long
Audio
"
){
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question-audio-bg
"
,
"
bg_kuang2
"
,
(
w
,
h
)
=>
{
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question-audio-bg
"
,
"
bg_kuang2
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
this
.
g_cartoon
.
getCartoonElement
(
"
background-main
"
).
ref
.
scaleX
,
sx
:
this
.
g_cartoon
.
getCartoonElement
(
"
background-main
"
).
ref
.
scaleX
,
...
@@ -731,7 +837,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -731,7 +837,7 @@ export class PlayComponent implements OnInit, OnDestroy {
initQuestion
(){
initQuestion
(){
let
audio
=
this
.
initAudioPlayer
()
let
audio
=
this
.
initAudioPlayer
()
if
(
this
.
g_formData
.
question
.
type
==
"
Audio
"
){
if
(
this
.
g_formData
.
question
.
type
==
"
LongAudio
"
&&
this
.
g_formData
.
question
.
longAudio_url
!=
""
){
// 进度条
// 进度条
let
progressBar
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
audio-plyer-progress
"
,
"
bg_tiaodi
"
,
(
w
,
h
)
=>
{
let
progressBar
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
audio-plyer-progress
"
,
"
bg_tiaodi
"
,
(
w
,
h
)
=>
{
return
{
return
{
...
@@ -818,7 +924,6 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -818,7 +924,6 @@ export class PlayComponent implements OnInit, OnDestroy {
audioPlay
.
pauseIcon
.
ref
.
visible
=
false
audioPlay
.
pauseIcon
.
ref
.
visible
=
false
audioPlay
.
audio
.
pause
()
audioPlay
.
audio
.
pause
()
audioPlay
.
isPlaying
=
!
audioPlay
.
isPlaying
audioPlay
.
isPlaying
=
!
audioPlay
.
isPlaying
slider
.
ref
.
x
=
-
(
476
/
2
)
slider
.
ref
.
x
=
-
(
476
/
2
)
coverColor
.
width
=
0
;
coverColor
.
width
=
0
;
progressBar
.
currentTimeString
.
ref
.
text
=
"
00:00
"
progressBar
.
currentTimeString
.
ref
.
text
=
"
00:00
"
...
@@ -890,7 +995,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -890,7 +995,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
})
})
let
image
=
this
.
g_cartoon
.
createImage
(
"
lego-building
"
,
(
w
,
h
)
=>
{
let
image
=
this
.
g_cartoon
.
createImage
(
this
.
g_formData
.
question
.
image_url
,
(
w
,
h
)
=>
{
let
sx
=
590
/
w
let
sx
=
590
/
w
let
sy
=
360
/
h
let
sy
=
360
/
h
let
s
=
Math
.
min
(
sx
,
sy
)
let
s
=
Math
.
min
(
sx
,
sy
)
...
@@ -908,11 +1013,11 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -908,11 +1013,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
render
(
element
.
ref
,
zIndexMap
.
imageContainer
)
this
.
render
(
element
.
ref
,
zIndexMap
.
imageContainer
)
}
}
}
}
initAudioPlayer
(){
initAudioPlayer
(){
if
(
(
this
.
g_formData
.
question
.
type
==
"
LongAudio
"
&&
this
.
g_formData
.
question
.
longAudio_url
!=
""
)
||
this
.
g_formData
.
question
.
shortAudio_url
!=
""
){
let
audioType
=
"
L
"
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
bg-short-audio
"
,
"
bg_laba
"
,
(
w
,
h
)
=>
{
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
bg-short-audio
"
,
"
bg_laba
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
474
*
this
.
g_mapScale
/
w
,
sx
:
474
*
this
.
g_mapScale
/
w
,
...
@@ -921,10 +1026,11 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -921,10 +1026,11 @@ export class PlayComponent implements OnInit, OnDestroy {
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
let
x
=
0
;
let
x
=
0
;
let
y
=
0
let
y
=
0
if
(
this
.
g_formData
.
question
.
type
==
"
Audio
"
){
if
(
this
.
g_formData
.
question
.
type
==
"
Long
Audio
"
){
x
=
-
235
x
=
-
235
y
=
-
45
y
=
-
45
}
else
{
}
else
{
audioType
=
"
S
"
x
=
20
x
=
20
}
}
return
{
return
{
...
@@ -932,7 +1038,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -932,7 +1038,7 @@ export class PlayComponent implements OnInit, OnDestroy {
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
(
220
+
y
)
*
this
.
g_mapScale
y
:
this
.
g_cartoon
.
getOrigin
().
y
+
(
220
+
y
)
*
this
.
g_mapScale
}
}
})
})
element
.
audioType
=
audioType
element
.
playIcon
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
btn-audio-play
"
,
"
btn_videooff
"
,
(
w
,
h
)
=>
{
element
.
playIcon
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
btn-audio-play
"
,
"
btn_videooff
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
91
/
w
,
sx
:
91
/
w
,
...
@@ -960,9 +1066,16 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -960,9 +1066,16 @@ export class PlayComponent implements OnInit, OnDestroy {
element
.
ref
.
addChild
(
element
.
playIcon
.
ref
)
element
.
ref
.
addChild
(
element
.
playIcon
.
ref
)
element
.
ref
.
addChild
(
element
.
pauseIcon
.
ref
)
element
.
ref
.
addChild
(
element
.
pauseIcon
.
ref
)
element
.
audio
=
this
.
g_cartoon
.
audio
.
get
(
"
default_audio
"
)
if
(
this
.
g_formData
.
question
.
type
==
"
LongAudio
"
){
element
.
audio
=
this
.
g_cartoon
.
audio
.
get
(
this
.
g_formData
.
question
.
longAudio_url
)
}
else
{
element
.
audio
=
this
.
g_cartoon
.
audio
.
get
(
this
.
g_formData
.
question
.
shortAudio_url
)
}
element
.
isPlaying
=
false
element
.
isPlaying
=
false
this
.
subscribeMapDownEvent
(
element
.
playIcon
.
id
,
()
=>
{
this
.
subscribeMapDownEvent
(
element
.
playIcon
.
id
,
()
=>
{
if
(
element
.
audioType
==
"
L
"
){
if
(
element
.
isPlaying
){
if
(
element
.
isPlaying
){
element
.
playIcon
.
ref
.
visible
=
true
element
.
playIcon
.
ref
.
visible
=
true
element
.
pauseIcon
.
ref
.
visible
=
false
element
.
pauseIcon
.
ref
.
visible
=
false
...
@@ -975,11 +1088,31 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -975,11 +1088,31 @@ export class PlayComponent implements OnInit, OnDestroy {
element
.
isPlaying
=
!
element
.
isPlaying
element
.
isPlaying
=
!
element
.
isPlaying
}
}
this
.
g_enableMapDown
=
true
;
this
.
g_enableMapDown
=
true
;
}
else
{
element
.
playIcon
.
ref
.
visible
=
false
element
.
starAni
=
this
.
g_cartoon
.
createAnimation
(
"
btn_laba
"
,
3
,
500
)
element
.
starAni
.
loop
=
true
;
element
.
starAni
.
setScaleXY
(
this
.
g_mapScale
)
element
.
starAni
.
x
=
element
.
ref
.
x
-
140
*
this
.
g_mapScale
element
.
starAni
.
y
=
element
.
ref
.
y
-
80
*
this
.
g_mapScale
this
.
render
(
element
.
starAni
,
zIndexMap
.
animation
)
element
.
starAni
.
play
()
this
.
g_cartoon
.
playAudio
(
this
.
g_formData
.
question
.
shortAudio_url
,
false
,
()
=>
{
element
.
starAni
.
visible
=
false
;
this
.
deleteElementInRender
(
element
.
starAni
.
id
)
element
.
playIcon
.
ref
.
visible
=
true
this
.
g_enableMapDown
=
true
;
})
}
})
})
this
.
render
(
element
.
ref
,
zIndexMap
.
shortAudio
)
this
.
render
(
element
.
ref
,
zIndexMap
.
shortAudio
)
console
.
log
(
element
.
audio
)
return
element
.
audio
return
element
.
audio
}
else
{
return
null
}
}
}
...
@@ -1623,6 +1756,8 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -1623,6 +1756,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
m_renderObject
.
forEach
(
item
=>
{
this
.
m_renderObject
.
forEach
(
item
=>
{
this
.
m_renderArr
.
push
(
item
.
element
)
this
.
m_renderArr
.
push
(
item
.
element
)
})
})
}
else
{
console
.
warn
(
"
Can not found element id:
"
+
id
)
}
}
}
}
...
@@ -1679,24 +1814,29 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -1679,24 +1814,29 @@ export class PlayComponent implements OnInit, OnDestroy {
alignCenter
(
elementArray
,
spacing
,
withAni
?,
callback
?){
alignCenter
(
elementArray
,
spacing
,
withAni
?,
callback
?){
let
totlaWidth
=
0
let
totlaWidth
=
0
let
length
=
elementArray
.
length
elementArray
.
forEach
(
element
=>
{
elementArray
.
forEach
(
element
=>
{
let
bd
=
element
.
ref
.
getBoundingBox
()
let
bd
=
element
.
ref
.
getBoundingBox
()
totlaWidth
+=
bd
.
width
totlaWidth
+=
bd
.
width
});
});
totlaWidth
+=
(
elementArray
.
length
-
1
)
*
spacing
totlaWidth
+=
(
elementArray
.
length
-
1
)
*
spacing
let
laseX
=
this
.
g_canvasWidth
/
2
-
totlaWidth
/
2
;
let
laseX
=
this
.
g_canvasWidth
/
2
-
totlaWidth
/
2
;
elementArray
.
forEach
(
element
=>
{
elementArray
.
forEach
(
(
element
,
index
)
=>
{
let
bd
=
element
.
ref
.
getBoundingBox
()
let
bd
=
element
.
ref
.
getBoundingBox
()
if
(
withAni
){
if
(
withAni
){
tweenChange
(
element
.
ref
,
{
x
:
laseX
+
bd
.
width
/
2
},
0.2
,
()
=>
{
tweenChange
(
element
.
ref
,
{
x
:
laseX
+
bd
.
width
/
2
},
0.2
,
()
=>
{
this
.
g_cartoon
.
saveSize
(
element
.
id
)
this
.
g_cartoon
.
saveSize
(
element
.
id
)
if
(
length
==
(
index
+
1
)){
callback
&&
callback
()
callback
&&
callback
()
}
})
})
}
else
{
}
else
{
element
.
ref
.
x
=
laseX
+
bd
.
width
/
2
element
.
ref
.
x
=
laseX
+
bd
.
width
/
2
this
.
g_cartoon
.
saveSize
(
element
.
id
)
this
.
g_cartoon
.
saveSize
(
element
.
id
)
if
(
length
==
(
index
+
1
)){
callback
&&
callback
()
callback
&&
callback
()
}
}
}
laseX
=
(
laseX
+
bd
.
width
+
spacing
)
laseX
=
(
laseX
+
bd
.
width
+
spacing
)
});
});
...
...
src/assets/play/default/formData/defaultData.js
View file @
40281eec
...
@@ -5,5 +5,5 @@ export default {
...
@@ -5,5 +5,5 @@ export default {
type
:
"
Image
"
type
:
"
Image
"
},
},
answerType
:
"
Text
"
,
answerType
:
"
Text
"
,
dataArray
:
[
"
This is for test
"
,
"
Apple
"
,
"
Building
"
,
"
Lovely Puppy
"
]
dataArray
:
[
"
One
"
,
"
Two
"
,
"
Three
"
,
"
Four
"
]
}
}
\ No newline at end of file
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