Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM04-3
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
JM04-3
Commits
649fd3cf
Commit
649fd3cf
authored
Jul 21, 2021
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
dev commit
parent
8d0fbb3e
Changes
13
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
265 additions
and
422 deletions
+265
-422
play.component.ts
src/app/play/play.component.ts
+253
-421
resources.js
src/app/play/resources.js
+12
-1
bg_block_focus.png
src/assets/play/bg_block_focus.png
+0
-0
bg_block_init.png
src/assets/play/bg_block_init.png
+0
-0
bg_block_right.png
src/assets/play/bg_block_right.png
+0
-0
bg_block_right_disable.png
src/assets/play/bg_block_right_disable.png
+0
-0
bg_block_wrong.png
src/assets/play/bg_block_wrong.png
+0
-0
bg_container.png
src/assets/play/bg_container.png
+0
-0
bg_container_left.png
src/assets/play/bg_container_left.png
+0
-0
bg_letter_target.png
src/assets/play/bg_letter_target.png
+0
-0
btn_shift.png
src/assets/play/btn_shift.png
+0
-0
btn_shift_shadow.png
src/assets/play/btn_shift_shadow.png
+0
-0
buttonShadow.png
src/assets/play/buttonShadow.png
+0
-0
No files found.
src/app/play/play.component.ts
View file @
649fd3cf
...
@@ -128,7 +128,12 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -128,7 +128,12 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------
// ------------ 游戏逻辑数据 ------------
m_openShift
:
boolean
=
false
;
m_blockGroup
=
null
;
m_blockFirstSubmit
=
null
;
m_submitTimes
=
null
;
m_wordAll
=
null
;
m_allBlocks
=
[];
// ------------------------------------
// ------------------------------------
...
@@ -188,11 +193,13 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -188,11 +193,13 @@ export class PlayComponent implements OnInit, OnDestroy {
console
.
log
(
this
.
g_formData
);
console
.
log
(
this
.
g_formData
);
this
.
initBackground
();
this
.
initBackground
();
this
.
initTitle
();
this
.
initTitle
();
this
.
initQuestion
()
this
.
initQuestion
();
this
.
initKeyboard
();
this
.
initOutputWindow
();
}
}
cleanGameVar
(){
cleanGameVar
(){
}
}
startGame
(){
startGame
(){
...
@@ -241,7 +248,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -241,7 +248,7 @@ export class PlayComponent implements OnInit, OnDestroy {
initQuestion
()
{
initQuestion
()
{
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question_container
"
,
"
bg_question
"
,
(
w
,
h
)
=>
{
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question_container
"
,
"
bg_question
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
2
40
8
*
this
.
g_mapScale
/
w
,
sx
:
2
04
8
*
this
.
g_mapScale
/
w
,
sy
:
240
*
this
.
g_mapScale
/
h
,
sy
:
240
*
this
.
g_mapScale
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
...
@@ -263,6 +270,18 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -263,6 +270,18 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
})
})
let
btnNextShadow
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question_next_shadow
"
,
"
buttonShadow
"
,
(
w
,
h
)
=>
{
return
{
sx
:
169
/
w
,
sy
:
166
/
h
,
}
},
(
w
,
h
)
=>
{
return
{
x
:
1010
,
y
:
35
}
})
let
btnPre
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question_pre
"
,
"
btn_pre
"
,
(
w
,
h
)
=>
{
let
btnPre
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question_pre
"
,
"
btn_pre
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
136
/
w
,
sx
:
136
/
w
,
...
@@ -274,6 +293,18 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -274,6 +293,18 @@ export class PlayComponent implements OnInit, OnDestroy {
y
:
0
y
:
0
}
}
})
})
let
btnPreShadow
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
question_pre_shadow
"
,
"
buttonShadow
"
,
(
w
,
h
)
=>
{
return
{
sx
:
169
/
w
,
sy
:
166
/
h
,
}
},
(
w
,
h
)
=>
{
return
{
x
:
-
1010
,
y
:
35
}
})
let
labelIndex
=
this
.
g_cartoon
.
createCartoonElementLabelFunc
(
"
question_index
"
,
""
,
"
Aileron-Bold
"
,
"
#3e9b31
"
,
48
,
(
w
,
h
)
=>
{
let
labelIndex
=
this
.
g_cartoon
.
createCartoonElementLabelFunc
(
"
question_index
"
,
""
,
"
Aileron-Bold
"
,
"
#3e9b31
"
,
48
,
(
w
,
h
)
=>
{
return
{
return
{
...
@@ -294,509 +325,310 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -294,509 +325,310 @@ export class PlayComponent implements OnInit, OnDestroy {
element
.
ref
.
addChild
(
labelIndex
.
ref
)
element
.
ref
.
addChild
(
labelIndex
.
ref
)
element
.
ref
.
addChild
(
questionText
.
ref
)
element
.
ref
.
addChild
(
questionText
.
ref
)
element
.
ref
.
addChild
(
btnNextShadow
.
ref
)
element
.
ref
.
addChild
(
btnPreShadow
.
ref
)
element
.
ref
.
addChild
(
btnNext
.
ref
)
element
.
ref
.
addChild
(
btnNext
.
ref
)
element
.
ref
.
addChild
(
btnPre
.
ref
)
element
.
ref
.
addChild
(
btnPre
.
ref
)
this
.
render
(
element
.
ref
)
this
.
render
(
element
.
ref
)
}
}
initTitle_Part
(){
initKeyboard
()
{
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
part-title
"
,
"
bg_title_part
"
,
(
w
,
h
)
=>
{
const
createWord
=
(
letter
,
x
,
y
)
=>
{
return
{
let
container
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`key_
${
letter
}
_click`
,
"
bg_letter_target
"
,
(
w
,
h
)
=>
{
sx
:
57
*
this
.
g_mapScale
/
w
,
return
{
sy
:
65
*
this
.
g_mapScale
/
h
,
sx
:
80
/
w
,
}
sy
:
80
/
h
,
},
(
w
,
h
)
=>
{
}
return
{
},
(
w
,
h
)
=>
{
x
:
53
*
this
.
g_mapScale
+
(
57
*
this
.
g_mapScale
)
/
2
,
return
{
y
:
(
65
*
this
.
g_mapScale
)
/
2
x
:
x
,
}
y
:
y
})
}
element
.
ref
.
x
=
this
.
g_partTitle_x
-
20
*
this
.
g_mapScale
+
(
57
*
this
.
g_mapScale
)
/
2
;
})
let
text
=
this
.
g_cartoon
.
createLabel
(
this
.
g_formData
.
title
.
NO
?
this
.
g_formData
.
title
.
NO
:
"
C
"
,
"
Berlin Sans FB Demi Bold
"
,
"
#facf46
"
,
48
)
element
.
ref
.
addChild
(
text
)
let
partBG
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
part-title-background
"
,
"
part_number_bg
"
,
(
w
,
h
)
=>
{
let
text
=
this
.
g_cartoon
.
createCartoonElementLabelFunc
(
`key_
${
letter
}
`
,
letter
,
"
Aileron-Bold
"
,
"
#3e9b31
"
,
72
,
(
w
,
h
)
=>
{
return
{
x
:
0
,
y
:
0
,
}
})
container
.
ref
.
addChild
(
text
.
ref
);
return
container
}
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
keyboard_container
"
,
"
bg_container
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
121
*
this
.
g_mapScale
/
w
,
sx
:
855
*
this
.
g_mapScale
/
w
,
sy
:
69
*
this
.
g_mapScale
/
h
,
sy
:
820
*
this
.
g_mapScale
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
{
return
{
x
:
(
121
*
this
.
g_mapScale
)
/
2
,
x
:
this
.
g_canvasWidth
/
2
+
855
*
this
.
g_mapScale
/
2
+
118
*
this
.
g_mapScale
,
y
:
(
69
*
this
.
g_mapScale
)
/
2
y
:
this
.
g_canvasHeight
/
2
+
150
*
this
.
g_mapScale
}
}
})
})
this
.
render
(
partBG
.
ref
)
let
letttes
=
[
'
a
'
,
'
b
'
,
'
c
'
,
'
d
'
,
'
e
'
,
'
f
'
,
'
g
'
,
'
h
'
,
'
i
'
,
'
j
'
,
'
k
'
,
'
l
'
,
'
m
'
,
'
n
'
,
'
o
'
,
'
p
'
,
'
q
'
,
'
r
'
,
'
s
'
,
'
t
'
,
'
u
'
,
'
v
'
,
'
w
'
,
'
x
'
,
'
y
'
,
'
z
'
]
this
.
render
(
element
.
ref
)
let
allLetterRefs
=
[]
}
let
baseX
=
-
855
/
2
;
let
baseY
=
-
820
/
2
;
initTitle_Main
(){
for
(
let
i
=
1
;
i
<=
letttes
.
length
;
i
++
)
{
let
labelWidth
=
0
let
le
=
createWord
(
letttes
[
i
-
1
],
baseX
,
baseY
)
let
text
=
this
.
g_cartoon
.
createCartoonElementLabelFunc
(
"
main-title
"
,
this
.
g_formData
.
title
.
mainText
,
"
FuturaBT Medium
"
,
"
#000000
"
,
36
,
(
w
,
h
)
=>
{
this
.
subscribeMapDownEvent
(
le
.
id
,
()
=>
{
labelWidth
=
w
/
2
jelly
(
le
.
ref
)
return
{
if
(
this
.
m_openShift
)
{
x
:
this
.
g_partTitle_x
-
20
*
this
.
g_mapScale
+
labelWidth
*
this
.
g_mapScale
,
console
.
log
(
letttes
[
i
-
1
].
toUpperCase
())
y
:
5
*
this
.
g_mapScale
+
(
65
*
this
.
g_mapScale
)
/
2
}
else
{
console
.
log
(
letttes
[
i
-
1
].
toLocaleLowerCase
())
}
this
.
g_enableMapDown
=
true
;
})
allLetterRefs
.
push
(
le
.
ref
.
children
[
1
])
element
.
ref
.
addChild
(
le
.
ref
)
if
(
i
%
6
==
0
)
{
baseX
=
-
855
/
2
;
baseY
+=
80
+
98
;
}
else
{
baseX
+=
80
+
85
;
}
}
})
}
text
.
ref
.
fontWeight
=
900
text
.
ref
.
setScaleXY
(
this
.
g_mapScale
)
// shfit按键
let
btnShift
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
keyboard_shfit
"
,
"
btn_shift
"
,
(
w
,
h
)
=>
{
let
background
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
main-title-background
"
,
"
_bg_50_20
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
labelWidth
*
2
/
w
,
sx
:
420
/
w
,
sy
:
50
*
this
.
g_mapScale
/
h
,
sy
:
128
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
{
return
{
x
:
this
.
g_partTitle_x
+
labelWidth
+
60
*
this
.
g_mapScale
,
x
:
baseX
+
350
,
y
:
5
*
this
.
g_mapScale
+
(
65
*
this
.
g_mapScale
)
/
2
y
:
baseY
}
}
})
})
let
btnShiftShadow
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
keyboard_shfit_shadow
"
,
"
btn_shift_shadow
"
,
(
w
,
h
)
=>
{
text
.
ref
.
x
=
this
.
g_partTitle_x
+
60
*
this
.
g_mapScale
text
.
ref
.
textAlign
=
"
left
"
this
.
subscribeMapDownEvent
(
background
.
id
,
()
=>
{
this
.
g_cartoon
.
stopAllAudio
()
this
.
g_cartoon
.
playAudio
(
this
.
g_formData
.
title
.
mainTextAudio_url
);
this
.
resetLongAudio
();
this
.
g_enableMapDown
=
true
;
})
this
.
render
(
background
.
ref
)
this
.
render
(
text
.
ref
)
}
initCards
()
{
let
cardContainer
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`background_card_container`
,
"
_bg_1280_720
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
1280
*
this
.
g_mapScale
*
0.94
/
w
,
sx
:
428
/
w
,
sy
:
720
*
this
.
g_mapScale
*
0.94
/
h
,
sy
:
141
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
{
return
{
x
:
this
.
g_canvasWidth
/
2
,
x
:
baseX
+
350
,
y
:
this
.
g_canvasHeight
/
2
y
:
baseY
+
50
}
}
})
})
this
.
render
(
cardContainer
.
ref
)
element
.
ref
.
addChild
(
btnShiftShadow
.
ref
)
element
.
ref
.
addChild
(
btnShift
.
ref
)
const
len
=
this
.
g_formData
.
dataArray
.
length
<=
4
?
"
4
"
:
"
6
"
;
this
.
subscribeMapDownEvent
(
btnShift
.
id
,
()
=>
{
this
.
m_openShift
=
!
this
.
m_openShift
;
const
pos
=
{
if
(
this
.
m_openShift
)
{
"
4
"
:
{
allLetterRefs
.
forEach
(
le
=>
{
cards
:
[
le
.
text
=
le
.
text
.
toUpperCase
()
{
x
:
-
270
,
y
:
-
142
},
{
x
:
270
,
y
:
-
142
},
{
x
:
-
270
,
y
:
142
},
{
x
:
270
,
y
:
142
}
],
icon
:
{
x
:
-
230
,
y
:
-
105
},
textMain
:
{
x
:
0
,
y
:
-
72
},
textLeft
:
{
x
:
-
140
,
y
:
82
},
textRight
:
{
x
:
140
,
y
:
82
},
targetLeft
:
{
x
:
-
260
,
y
:
10
},
targetRight
:
{
x
:
0
,
y
:
10
},
radioLeft
:
{
x
:
-
140
,
y
:
10
},
radioRight
:
{
x
:
140
,
y
:
10
},
circleSize
:
{
w
:
316
,
h
:
292
},
circleLeft
:
{
x
:
-
80
,
y
:
0
},
circleRight
:
{
x
:
80
,
y
:
0
}
},
"
6
"
:
{
cards
:
[
{
x
:
-
270
,
y
:
-
185
},
{
x
:
270
,
y
:
-
185
},
{
x
:
-
270
,
y
:
0
},
{
x
:
270
,
y
:
0
},
{
x
:
-
270
,
y
:
185
},
{
x
:
270
,
y
:
185
}
],
icon
:
{
x
:
-
230
,
y
:
-
60
},
textMain
:
{
x
:
0
,
y
:
-
40
},
textLeft
:
{
x
:
-
140
,
y
:
72
},
textRight
:
{
x
:
140
,
y
:
72
},
targetLeft
:
{
x
:
-
260
,
y
:
0
},
targetRight
:
{
x
:
0
,
y
:
0
},
radioLeft
:
{
x
:
-
140
,
y
:
20
},
radioRight
:
{
x
:
140
,
y
:
20
},
circleSize
:
{
w
:
300
,
h
:
220
},
circleLeft
:
{
x
:
-
80
,
y
:
0
},
circleRight
:
{
x
:
80
,
y
:
0
}
}
}
this
.
g_formData
.
dataArray
.
forEach
((
dataItem
,
i
)
=>
{
let
bgCard
=
null
if
(
len
==
"
4
"
)
{
bgCard
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`background_card_
${
i
}
`
,
`bg_card_4_
${
i
+
1
}
`
,
(
w
,
h
)
=>
{
return
{
sx
:
520
/
w
,
sy
:
267
/
h
,
}
},
(
w
,
h
)
=>
{
return
pos
[
len
].
cards
[
i
]
})
})
}
else
{
}
else
{
bgCard
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`background_card_
${
i
}
`
,
`bg_card_6_
${
i
+
1
}
`
,
(
w
,
h
)
=>
{
allLetterRefs
.
forEach
(
le
=>
{
return
{
le
.
text
=
le
.
text
.
toLocaleLowerCase
()
sx
:
520
/
w
,
sy
:
168
/
h
,
}
},
(
w
,
h
)
=>
{
return
pos
[
len
].
cards
[
i
]
})
})
}
}
jelly
(
btnShift
.
ref
)
this
.
g_enableMapDown
=
true
;
})
this
.
render
(
element
.
ref
)
}
let
numIcon
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_numIcon`
,
`num_icon_
${
i
+
1
}
`
,
(
w
,
h
)
=>
{
initOutputWindow
()
{
const
createBlock
=
(
letter
,
questionIndex
,
li
,
x
,
y
,
width
=
80
,
height
=
80
)
=>
{
let
container
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`block_
${
x
}
_
${
y
}
`
,
"
bg_letter_target
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
60
/
w
,
sx
:
80
/
w
*
width
/
80
,
sy
:
60
/
h
,
sy
:
80
/
h
*
height
/
80
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
pos
[
len
].
icon
})
bgCard
.
ref
.
addChild
(
numIcon
.
ref
)
let
textMainContainer
=
this
.
g_cartoon
.
createCartoonElementShapeRect
(
`popup-text-back-main-
${
i
}
-container`
,
386
,
100
,
"
#FFFF00
"
);
bgCard
.
ref
.
addChild
(
textMainContainer
.
ref
);
textMainContainer
.
ref
.
alpha
=
0
;
let
baseX
=
0
;
for
(
let
wi
=
0
;
wi
<
dataItem
.
letters_main
.
length
;
wi
++
)
{
let
letter
=
this
.
g_cartoon
.
createLabel
(
dataItem
.
letters_main
[
wi
].
letter_val
,
"
Century Gothic Bold
"
,
dataItem
.
letters_main
[
wi
].
letter_color
,
48
*
1
,
baseX
,
50
,
"
left
"
)
let
bd
=
letter
.
getBoundingBox
();
baseX
+=
bd
.
width
+
1
textMainContainer
.
ref
.
addChild
(
letter
)
}
textMainContainer
.
ref
.
width
=
baseX
;
textMainContainer
.
ref
.
x
=
-
(
pos
[
len
].
textMain
.
x
+
baseX
)
/
2
;
textMainContainer
.
ref
.
y
=
pos
[
len
].
textMain
.
y
-
50
;
let
textLeftContainer
=
this
.
g_cartoon
.
createCartoonElementShapeRect
(
`popup-text-back-left-
${
i
}
-container`
,
386
,
100
,
"
#FFFF00
"
);
let
lettersSpecLeft
=
[]
let
lettersLeft
=
[]
bgCard
.
ref
.
addChild
(
textLeftContainer
.
ref
);
textLeftContainer
.
ref
.
alpha
=
0
;
baseX
=
0
;
for
(
let
wi
=
0
;
wi
<
dataItem
.
letters_left
.
length
;
wi
++
)
{
let
letter
=
this
.
g_cartoon
.
createLabel
(
dataItem
.
letters_left
[
wi
].
letter_val
,
"
FuturaBT-Bold
"
,
"
#363333
"
,
42
*
1
,
baseX
,
50
,
"
left
"
)
let
bd
=
letter
.
getBoundingBox
();
baseX
+=
bd
.
width
+
1
textLeftContainer
.
ref
.
addChild
(
letter
);
if
(
dataItem
.
letters_left
[
wi
].
letter_color
==
"
#c8161e
"
)
{
lettersSpecLeft
.
push
(
letter
)
}
lettersLeft
.
push
(
letter
)
}
textLeftContainer
.
ref
.
width
=
baseX
;
textLeftContainer
.
ref
.
x
=
pos
[
len
].
textLeft
.
x
-
baseX
/
2
;
textLeftContainer
.
ref
.
y
=
pos
[
len
].
textLeft
.
y
-
50
;
let
textRightContainer
=
this
.
g_cartoon
.
createCartoonElementShapeRect
(
`popup-text-back-right-
${
i
}
-container`
,
386
,
100
,
"
#FFFF00
"
);
let
lettersSpecRight
=
[]
let
lettersRight
=
[];
bgCard
.
ref
.
addChild
(
textRightContainer
.
ref
);
textRightContainer
.
ref
.
alpha
=
0
;
baseX
=
0
;
for
(
let
wi
=
0
;
wi
<
dataItem
.
letters_right
.
length
;
wi
++
)
{
let
letter
=
this
.
g_cartoon
.
createLabel
(
dataItem
.
letters_right
[
wi
].
letter_val
,
"
FuturaBT-Bold
"
,
"
#363333
"
,
42
*
1
,
baseX
,
50
,
"
left
"
)
let
bd
=
letter
.
getBoundingBox
();
baseX
+=
bd
.
width
+
1
textRightContainer
.
ref
.
addChild
(
letter
)
if
(
dataItem
.
letters_right
[
wi
].
letter_color
==
"
#c8161e
"
)
{
lettersSpecRight
.
push
(
letter
)
}
lettersRight
.
push
(
letter
)
}
textRightContainer
.
ref
.
width
=
baseX
;
textRightContainer
.
ref
.
x
=
pos
[
len
].
textRight
.
x
-
baseX
/
2
;
textRightContainer
.
ref
.
y
=
pos
[
len
].
textRight
.
y
-
50
;
// let textLeft = this.g_cartoon.createLabel(dataItem.text_left, "FuturaBT-Bold", "#363333", 42, pos[len].textLeft.x, pos[len].textLeft.y, null, 225)
// bgCard.ref.addChild(textLeft)
// let textRight = this.g_cartoon.createLabel(dataItem.text_right, "FuturaBT-Bold", "#363333", 42, pos[len].textRight.x, pos[len].textRight.y, null, 225)
// bgCard.ref.addChild(textRight)
let
targetLeft
=
this
.
g_cartoon
.
createCartoonElementShapeRect
(
`card_
${
i
}
_target_left`
,
260
,
110
,
"
#FFFF00
"
)
targetLeft
.
ref
.
x
=
pos
[
len
].
targetLeft
.
x
;
targetLeft
.
ref
.
y
=
pos
[
len
].
targetLeft
.
y
;
bgCard
.
ref
.
addChild
(
targetLeft
.
ref
)
targetLeft
.
ref
.
alpha
=
0
;
let
targetRight
=
this
.
g_cartoon
.
createCartoonElementShapeRect
(
`card_
${
i
}
_target_right`
,
260
,
110
,
"
#FFFF00
"
)
targetRight
.
ref
.
x
=
pos
[
len
].
targetRight
.
x
;
targetRight
.
ref
.
y
=
pos
[
len
].
targetRight
.
y
;
bgCard
.
ref
.
addChild
(
targetRight
.
ref
)
targetRight
.
ref
.
alpha
=
0
;
let
radioButtonLeft_out
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_radio_left`
,
"
radio_out
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
38
/
w
,
x
:
x
,
sy
:
38
/
h
,
y
:
y
}
}
},
(
w
,
h
)
=>
{
return
pos
[
len
].
radioLeft
})
})
bgCard
.
ref
.
addChild
(
radioButtonLeft_out
.
ref
)
let
radioButtonLeft_inner
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_radio_left_inner`
,
"
radio_inner
"
,
(
w
,
h
)
=>
{
let
bgInit
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`block_
${
x
}
_
${
y
}
_container_init`
,
"
bg_block_init
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
2
0
/
w
,
sx
:
8
0
/
w
,
sy
:
2
0
/
h
,
sy
:
8
0
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
{
x
:
0
,
y
:
0
}
return
{
x
:
0
,
y
:
0
}
})
})
radioButtonLeft_out
.
ref
.
addChild
(
radioButtonLeft_inner
.
ref
)
let
radioButtonRight_out
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_radio_right`
,
"
radio_out
"
,
(
w
,
h
)
=>
{
let
bgDisable
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`block_
${
x
}
_
${
y
}
_container_disable`
,
"
bg_block_disable
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
38
/
w
,
sx
:
80
/
w
,
sy
:
38
/
h
,
sy
:
80
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
pos
[
len
].
radioRight
return
{
x
:
0
,
y
:
0
}
})
})
bg
Card
.
ref
.
addChild
(
radioButtonRight_out
.
ref
)
bg
Disable
.
ref
.
alpha
=
0
;
let
radioButtonRight_inner
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_radio_right_inner`
,
"
radio_inner
"
,
(
w
,
h
)
=>
{
let
bgRight
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`block_
${
x
}
_
${
y
}
_container_right`
,
"
bg_block_right
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
2
0
/
w
,
sx
:
8
0
/
w
,
sy
:
2
0
/
h
,
sy
:
8
0
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
{
x
:
0
,
y
:
0
}
return
{
x
:
0
,
y
:
0
}
})
})
radioButtonRight_out
.
ref
.
addChild
(
radioButtonRight_inner
.
ref
)
bgRight
.
ref
.
alpha
=
0
;
let
circleLeft
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_circle_left`
,
"
circle_l
"
,
(
w
,
h
)
=>
{
let
bgFocus
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`block_
${
x
}
_
${
y
}
_container_focus`
,
"
bg_block_focus
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
pos
[
len
].
circleSize
.
w
/
w
,
sx
:
80
/
w
,
sy
:
pos
[
len
].
circleSize
.
h
/
h
,
sy
:
80
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
pos
[
len
].
circleLeft
return
{
x
:
0
,
y
:
0
}
})
})
bgCard
.
ref
.
addChild
(
circleLeft
.
ref
)
bgFocus
.
ref
.
alpha
=
0
;
circleLeft
.
ref
.
alpha
=
0
;
let
circleRight
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`card_
${
i
}
_circle_right`
,
"
circle_r
"
,
(
w
,
h
)
=>
{
let
bgWrong
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`block_
${
x
}
_
${
y
}
_container_wrong`
,
"
bg_block_wrong
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
pos
[
len
].
circleSize
.
w
/
w
,
sx
:
80
/
w
,
sy
:
pos
[
len
].
circleSize
.
h
/
h
,
sy
:
80
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
pos
[
len
].
circleRight
return
{
x
:
0
,
y
:
0
}
})
})
bgCard
.
ref
.
addChild
(
circleRight
.
ref
)
bgWrong
.
ref
.
alpha
=
0
;
circleRight
.
ref
.
alpha
=
0
;
container
.
ref
.
addChild
(
bgInit
.
ref
)
radioButtonLeft_inner
.
ref
.
alpha
=
0
;
container
.
ref
.
addChild
(
bgDisable
.
ref
)
radioButtonRight_inner
.
ref
.
alpha
=
0
;
container
.
ref
.
addChild
(
bgRight
.
ref
)
bgCard
.
switchSelect
=
(
type
)
=>
{
container
.
ref
.
addChild
(
bgFocus
.
ref
)
switch
(
type
)
{
container
.
ref
.
addChild
(
bgWrong
.
ref
)
case
"
left
"
:
radioButtonLeft_inner
.
ref
.
alpha
=
255
;
container
.
switchStatus
=
(
status
)
=>
{
radioButtonRight_inner
.
ref
.
alpha
=
0
;
switch
(
status
)
{
case
"
init
"
:
bgInit
.
ref
.
alpha
=
1
;
bgDisable
.
ref
.
alpha
=
0
;
bgRight
.
ref
.
alpha
=
0
;
bgFocus
.
ref
.
alpha
=
0
;
bgWrong
.
ref
.
alpha
=
0
;
break
;
case
"
disable
"
:
bgInit
.
ref
.
alpha
=
0
;
bgDisable
.
ref
.
alpha
=
1
;
bgRight
.
ref
.
alpha
=
0
;
bgFocus
.
ref
.
alpha
=
0
;
bgWrong
.
ref
.
alpha
=
0
;
break
;
break
;
case
"
right
"
:
case
"
right
"
:
radioButtonLeft_inner
.
ref
.
alpha
=
0
;
bgInit
.
ref
.
alpha
=
0
;
radioButtonRight_inner
.
ref
.
alpha
=
255
;
bgDisable
.
ref
.
alpha
=
0
;
bgRight
.
ref
.
alpha
=
1
;
bgFocus
.
ref
.
alpha
=
0
;
bgWrong
.
ref
.
alpha
=
0
;
break
;
case
"
focus
"
:
bgInit
.
ref
.
alpha
=
0
;
bgDisable
.
ref
.
alpha
=
0
;
bgRight
.
ref
.
alpha
=
0
;
bgFocus
.
ref
.
alpha
=
1
;
bgWrong
.
ref
.
alpha
=
0
;
break
;
case
"
wrong
"
:
bgInit
.
ref
.
alpha
=
0
;
bgDisable
.
ref
.
alpha
=
0
;
bgRight
.
ref
.
alpha
=
0
;
bgFocus
.
ref
.
alpha
=
0
;
bgWrong
.
ref
.
alpha
=
1
;
break
;
break
;
default
:
radioButtonLeft_inner
.
ref
.
alpha
=
0
;
radioButtonRight_inner
.
ref
.
alpha
=
0
;
}
}
}
}
this
.
subscribeMapDownEvent
(
textMainContainer
.
id
,
()
=>
{
this
.
subscribeMapDownEvent
(
container
.
id
,
()
=>
{
if
(
dataItem
.
audio_url_main
)
{
container
.
switchStatus
(
"
wrong
"
)
this
.
g_cartoon
.
playAudio
(
dataItem
.
audio_url_main
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
this
.
g_enableMapDown
=
true
;
})
}
else
{
this
.
g_enableMapDown
=
true
;
}
})
this
.
subscribeMapDownEvent
(
textLeftContainer
.
id
,
()
=>
{
if
(
dataItem
.
audio_url_left
)
{
this
.
g_cartoon
.
playAudio
(
dataItem
.
audio_url_left
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
})
}
else
{
this
.
g_enableMapDown
=
true
;
}
})
this
.
subscribeMapDownEvent
(
textRightContainer
.
id
,
()
=>
{
if
(
dataItem
.
audio_url_right
)
{
this
.
g_cartoon
.
playAudio
(
dataItem
.
audio_url_right
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
})
}
else
{
this
.
g_enableMapDown
=
true
;
}
})
bgCard
.
selected
=
false
;
this
.
subscribeMapDownEvent
(
radioButtonRight_out
.
id
,
()
=>
{
if
(
!
bgCard
.
selected
)
{
bgCard
.
switchSelect
(
"
right
"
)
if
(
dataItem
.
rightSide
==
"
right
"
)
{
this
.
g_cartoon
.
playAudio
(
"
sm-correct
"
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
})
circleRight
.
ref
.
alpha
=
255
;
lettersSpecRight
.
forEach
(
le
=>
{
le
.
fontColor
=
"
#c8161e
"
})
lettersRight
.
forEach
(
le
=>
{
le
.
fontSize
=
48
})
bgCard
.
selected
=
true
;
}
else
{
this
.
g_cartoon
.
playAudio
(
"
sm-wrong
"
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
})
}
}
else
{
this
.
g_enableMapDown
=
true
;
}
})
this
.
subscribeMapDownEvent
(
radioButtonLeft_out
.
id
,
()
=>
{
if
(
!
bgCard
.
selected
)
{
bgCard
.
switchSelect
(
"
left
"
)
if
(
dataItem
.
rightSide
==
"
left
"
)
{
this
.
g_cartoon
.
playAudio
(
"
sm-correct
"
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
})
circleLeft
.
ref
.
alpha
=
255
;
lettersSpecLeft
.
forEach
(
le
=>
{
le
.
fontColor
=
"
#c8161e
"
})
lettersLeft
.
forEach
(
le
=>
{
le
.
fontSize
=
48
})
bgCard
.
selected
=
true
;
}
else
{
this
.
g_cartoon
.
playAudio
(
"
sm-wrong
"
,
false
,
()
=>
{
this
.
g_enableMapDown
=
true
;
})
}
}
else
{
this
.
g_enableMapDown
=
true
;
}
})
})
return
container
}
cardContainer
.
ref
.
addChild
(
bgCard
.
ref
)
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
"
output_container
"
,
"
bg_container_left
"
,
(
w
,
h
)
=>
{
});
}
initAudioPlayerAll
(){
let
element
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`audio-all`
,
"
icon_audio_container
"
,
(
w
,
h
)
=>
{
return
{
return
{
sx
:
76
*
this
.
g_mapScale
/
w
,
sx
:
900
*
this
.
g_mapScale
/
w
,
sy
:
77
*
this
.
g_mapScale
/
h
,
sy
:
900
*
this
.
g_mapScale
/
h
,
}
}
},
(
w
,
h
)
=>
{
},
(
w
,
h
)
=>
{
return
{
return
{
x
:
this
.
g_canvasWidth
-
66
*
this
.
g_mapScale
,
x
:
this
.
g_canvasWidth
/
2
-
900
*
this
.
g_mapScale
/
2
-
32
*
this
.
g_mapScale
,
y
:
this
.
g_canvasHeight
-
50
*
this
.
g_mapScale
,
y
:
this
.
g_canvasHeight
/
2
+
150
*
this
.
g_mapScale
}
}
})
})
element
.
ref
.
setScaleXY
(
0
)
let
play
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`audio-all-play`
,
"
icon_paly
"
,
(
w
,
h
)
=>
{
return
{
sx
:
76
/
w
,
sy
:
77
/
h
,
}
},
(
w
,
h
)
=>
{
return
{
x
:
0
,
y
:
0
}
})
let
pause
=
this
.
g_cartoon
.
createCartoonElementImageFunc
(
`audio-all-pause`
,
"
icon_pause
"
,
(
w
,
h
)
=>
{
return
{
sx
:
76
/
w
,
sy
:
77
/
h
,
}
},
(
w
,
h
)
=>
{
return
{
x
:
0
,
y
:
0
}
})
pause
.
ref
.
visible
=
false
;
element
.
playIcon
=
play
element
.
pauseIcon
=
pause
element
.
ref
.
addChild
(
element
.
playIcon
.
ref
)
element
.
ref
.
addChild
(
element
.
pauseIcon
.
ref
)
element
.
isPlaying
=
false
element
.
audio
=
this
.
g_cartoon
.
audio
.
get
(
this
.
g_formData
.
long_audio
.
audio_url
)
if
(
element
.
audio
){
element
.
audio
.
onended
=
()
=>
{
element
.
pause
()
}
}
element
.
play
=
()
=>
{
let
rolNum
=
this
.
g_formData
.
grid
.
length
;
if
(
!
element
.
audio
){
let
colNum
=
this
.
g_formData
.
grid
[
0
].
length
;
return
console
.
log
(
rolNum
,
colNum
)
}
element
.
isPlaying
=
true
;
let
width
=
900
;
this
.
g_cartoon
.
stopAllAudio
()
let
height
=
900
;
element
.
audio
.
play
()
element
.
playIcon
.
ref
.
visible
=
false
;
let
sX
=
-
1
*
width
/
2
+
width
/
colNum
/
2
element
.
pauseIcon
.
ref
.
visible
=
true
;
let
sY
=
-
height
/
2
+
height
/
rolNum
/
2
let
step
=
(
width
/
colNum
)
<
(
height
/
rolNum
)?(
width
/
colNum
):(
height
/
rolNum
);
this
.
m_blockGroup
=
new
Array
(
this
.
g_formData
.
dataArray
.
length
);
this
.
m_blockFirstSubmit
=
new
Array
(
this
.
g_formData
.
dataArray
.
length
);
this
.
m_submitTimes
=
new
Array
(
this
.
g_formData
.
dataArray
.
length
).
fill
(
0
);
this
.
m_wordAll
=
new
Array
(
this
.
g_formData
.
dataArray
.
length
).
fill
(
""
);
for
(
let
i
=
0
;
i
<
this
.
g_formData
.
dataArray
.
length
;
i
++
)
{
this
.
m_blockGroup
[
i
]
=
[]
this
.
m_blockFirstSubmit
[
i
]
=
true
;
}
}
element
.
pause
=
()
=>
{
for
(
let
j
=
0
;
j
<
rolNum
;
j
++
)
{
if
(
!
element
.
audio
){
for
(
let
i
=
0
;
i
<
colNum
;
i
++
)
{
return
let
qi
=
this
.
g_formData
.
grid
[
j
][
i
].
index
if
(
qi
>=
0
)
{
let
newBlock
=
createBlock
(
this
.
g_formData
.
grid
[
j
][
i
].
text
,
qi
,
i
,
sX
+
i
*
step
,
sY
+
j
*
step
,
900
/
colNum
-
5
,
900
/
colNum
-
5
)
this
.
m_wordAll
[
qi
]
+=
this
.
g_formData
.
grid
[
j
][
i
].
text
this
.
m_allBlocks
.
push
(
newBlock
)
element
.
ref
.
addChild
(
newBlock
.
ref
)
this
.
m_blockGroup
[
qi
].
push
(
newBlock
)
}
}
}
element
.
isPlaying
=
false
;
element
.
audio
.
pause
()
element
.
playIcon
.
ref
.
visible
=
true
;
element
.
pauseIcon
.
ref
.
visible
=
false
;
}
}
element
.
enable
=
false
element
.
out
=
()
=>
{
element
.
enable
=
true
;
tweenChange
(
element
.
ref
,
{
scaleX
:
element
.
initScaleX
,
scaleY
:
element
.
initScaleY
},
0.2
,
()
=>
{
this
.
showJellyAnimation
(
element
.
id
)
})
}
this
.
subscribeMapDownEvent
(
element
.
id
,
()
=>
{
if
(
!
element
.
audio
||
!
element
.
enable
){
this
.
g_enableMapDown
=
true
;
return
}
if
(
element
.
isPlaying
){
element
.
pause
()
}
else
{
element
.
play
()
}
this
.
g_enableMapDown
=
true
;
})
if
(
this
.
g_formData
.
long_audio
.
audio_url
)
{
element
.
out
()
}
this
.
render
(
element
.
ref
,
99
)
}
resetLongAudio
(){
let
audio
=
this
.
g_cartoon
.
getCartoonElement
(
`audio-all`
)
if
(
audio
.
enable
){
this
.
render
(
element
.
ref
)
audio
.
pause
()
}
}
}
...
...
src/app/play/resources.js
View file @
649fd3cf
...
@@ -38,8 +38,19 @@ const localImages = {
...
@@ -38,8 +38,19 @@ const localImages = {
'
btn_next
'
:
'
assets/play/btn_next.png
'
,
'
btn_next
'
:
'
assets/play/btn_next.png
'
,
'
btn_pre
'
:
'
assets/play/btn_pre.png
'
,
'
btn_pre
'
:
'
assets/play/btn_pre.png
'
,
'
bg_main_mask
'
:
'
assets/play/bg_main_mask.png
'
,
'
bg_main_mask
'
:
'
assets/play/bg_main_mask.png
'
,
};
'
buttonShadow
'
:
'
assets/play/buttonShadow.png
'
,
'
bg_container
'
:
'
assets/play/bg_container.png
'
,
'
bg_container_left
'
:
'
assets/play/bg_container_left.png
'
,
'
bg_letter_target
'
:
'
assets/play/bg_letter_target.png
'
,
'
btn_shift
'
:
'
assets/play/btn_shift.png
'
,
'
btn_shift_shadow
'
:
'
assets/play/btn_shift_shadow.png
'
,
'
bg_block_right
'
:
'
assets/play/bg_block_right.png
'
,
'
bg_block_disable
'
:
'
assets/play/bg_block_right_disable.png
'
,
'
bg_block_init
'
:
'
assets/play/bg_block_init.png
'
,
'
bg_block_focus
'
:
'
assets/play/bg_block_focus.png
'
,
'
bg_block_wrong
'
:
'
assets/play/bg_block_wrong.png
'
,
};
const
localAudios
=
{
const
localAudios
=
{
'
sm-back
'
:
"
assets/default/audio/sm-back.mp3
"
,
'
sm-back
'
:
"
assets/default/audio/sm-back.mp3
"
,
...
...
src/assets/play/bg_block_focus.png
0 → 100644
View file @
649fd3cf
272 Bytes
src/assets/play/bg_block_init.png
0 → 100644
View file @
649fd3cf
217 Bytes
src/assets/play/bg_block_right.png
0 → 100644
View file @
649fd3cf
272 Bytes
src/assets/play/bg_block_right_disable.png
0 → 100644
View file @
649fd3cf
267 Bytes
src/assets/play/bg_block_wrong.png
0 → 100644
View file @
649fd3cf
272 Bytes
src/assets/play/bg_container.png
0 → 100644
View file @
649fd3cf
6.21 KB
src/assets/play/bg_container_left.png
0 → 100644
View file @
649fd3cf
6.75 KB
src/assets/play/bg_letter_target.png
0 → 100644
View file @
649fd3cf
1.76 KB
src/assets/play/btn_shift.png
0 → 100644
View file @
649fd3cf
3.65 KB
src/assets/play/btn_shift_shadow.png
0 → 100644
View file @
649fd3cf
3.76 KB
src/assets/play/buttonShadow.png
0 → 100644
View file @
649fd3cf
30.5 KB
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