Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
PU-17
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
PU-17
Commits
ada1e15e
Commit
ada1e15e
authored
Jun 29, 2020
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完善模板
parent
8c12485f
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
117 additions
and
50 deletions
+117
-50
form.component.html
src/app/form/form.component.html
+1
-39
AudioUtil.ts
src/app/play/AudioUtil.ts
+4
-4
Stage.ts
src/app/play/Stage.ts
+23
-3
Unit.ts
src/app/play/Unit.ts
+44
-0
play.component.ts
src/app/play/play.component.ts
+44
-4
resources.js
src/app/play/resources.js
+1
-0
card_box.png
src/assets/play/card_box.png
+0
-0
card_box_border.png
src/assets/play/card_box_border.png
+0
-0
wrong1.mp3
src/assets/play/music/wrong1.mp3
+0
-0
No files found.
src/app/form/form.component.html
View file @
ada1e15e
...
...
@@ -29,34 +29,6 @@
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
nzFor=
"add-btn"
nzNoColon=
true
>
备选颜色
</nz-form-label>
<nz-form-control
[
nzXs
]='
24
'
[
nzSm
]='
12
'
[
nzMd
]='
12
'
[
nzLg
]='
6
'
>
<button
nz-button
nzType=
"dashed"
class=
"add-btn"
id=
"add-btn"
[
disabled
]="
item
.
colorArr
.
length =
=
8
?
true
:
false
"
(
click
)="
addColorItem
()"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control
nzOffset=
'6'
[
nzXs
]='
24
'
[
nzSm
]='
16
'
[
nzMd
]='
16
'
[
nzLg
]='
10
'
>
<nz-table
#
borderedTable
nzBordered
nzTitle=
"颜色列表"
[
nzData
]="
item
.
colorArr
"
[
nzShowPagination
]=
false
>
<thead>
<tr>
<th>
序号
</th>
<th>
颜色
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr
*
ngFor=
"let color of borderedTable.data;let i = index"
>
<td>
{{ i + 1 }}
</td>
<td><div
[(
colorPicker
)]="
color
.
val
"
[
style
.
background
]="
color
.
val
"
style=
"cursor: pointer; width:50px;height:30px;border:1px solid #CCC;float:left;margin-left: 10px;"
(
colorPickerClose
)="
save
()"
></div></td>
<td><button
nz-button
nzType=
"danger"
(
click
)="
delColorItem
(
i
)"
><i
nz-icon
nzType=
"delete"
nzTheme=
"outline"
></i></button></td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
nzFor=
"add-btn"
nzNoColon=
true
>
图片
</nz-form-label>
<nz-form-control
[
nzXs
]='
24
'
[
nzSm
]='
12
'
[
nzMd
]='
12
'
[
nzLg
]='
6
'
>
...
...
@@ -80,17 +52,7 @@
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
nzNoColon=
true
>
涂色
</nz-form-label>
<nz-form-control
[
nzSpan
]="
18
"
>
<nz-select
[(
ngModel
)]="
data
.
color
"
style=
"width: 100%;"
id=
"color"
(
ngModelChange
)="
onChange
($
event
,
data
,
'
color
')"
nzPlaceHolder=
"color"
>
<nz-option
[
nzValue
]="
option
.
val
"
nzCustomContent
[
nzLabel
]="
option
.
val
"
*
ngFor=
"let option of item.colorArr"
><div
[
ngStyle
]="{'
background-color
'
:option
.
val
,'
height
'
:
'
30px
','
border
'
:
'
1px
solid
'}"
></div>
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control
nzOffset=
'6'
[
nzSpan
]="
6
"
>
<div
[
ngStyle
]="{'
background-color
'
:data
.
color
,'
height
'
:
'
30px
','
border
'
:
'
1px
solid
'}"
></div>
<div
[(
colorPicker
)]="
data
.
color
"
[
style
.
background
]="
data
.
color
"
style=
"cursor: pointer; width:50px;height:30px;border:1px solid #CCC;float:left;margin-left: 10px;"
(
colorPickerClose
)="
save
()"
></div>
</nz-form-control>
</nz-form-item>
</nz-card>
...
...
src/app/play/AudioUtil.ts
View file @
ada1e15e
...
...
@@ -27,7 +27,7 @@ export class AudioComponent extends Item {
ended
=
false
;
progress
:
ShapeRect
;
progress
:
ShapeRect
New
;
progressVal
=
0
;
...
...
@@ -100,8 +100,8 @@ export class AudioComponent extends Item {
bg
.
addChild
(
progressBar
);
this
.
progressVal
=
progressBar
.
getBoundingBox
().
width
;
const
progress
=
new
ShapeRect
();
progress
.
setSize
(
0
,
progressBar
.
getBoundingBox
().
height
);
const
progress
=
new
ShapeRect
New
();
progress
.
setSize
(
0
,
progressBar
.
getBoundingBox
().
height
,
13
*
this
.
scaleX
);
progress
.
x
=
this
.
progressInitX
;
progress
.
y
=
37
*
this
.
scaleY
;
progress
.
fillColor
=
"
#c80df3
"
;
...
...
@@ -109,7 +109,7 @@ export class AudioComponent extends Item {
this
.
progress
=
progress
;
const
progressBtn
=
new
MySprite
();
progressBtn
.
init
(
this
.
images
.
get
(
"
processBtn
"
),
0
,
0
);
progressBtn
.
init
(
this
.
images
.
get
(
"
processBtn
"
),
0
.5
,
0
);
progressBtn
.
scaleX
=
this
.
scaleX
;
progressBtn
.
scaleY
=
this
.
scaleY
;
progressBtn
.
x
=
this
.
progressInitX
;
...
...
src/app/play/Stage.ts
View file @
ada1e15e
import
{
Item
}
from
'
./Item
'
;
import
{
ShapeRect
,
MySprite
,
shake
,
ShapeRectNew
}
from
'
./Unit
'
;
import
{
ShapeRect
,
MySprite
,
shake
2
,
ShapeRectNew
}
from
'
./Unit
'
;
import
{
playAudio
}
from
'
./AudioUtil
'
;
import
{
Star
}
from
'
./StarUtil
'
import
{
PageBar
,
CyclePageBar
}
from
'
./PageBar
'
;
...
...
@@ -171,6 +171,10 @@ export class Card extends Item {
colorBg
:
ShapeRectNew
;
starBg
:
ShapeRect
;
cardBoxBorder
:
MySprite
;
set
x
(
x
)
{
this
.
_x
=
x
;
...
...
@@ -217,13 +221,27 @@ export class Card extends Item {
bg
.
addChild
(
cardBox
,
1
);
this
.
cardBox
=
cardBox
;
const
cardBoxBorder
=
this
.
getPic
(
'
card_box_border
'
);
cardBoxBorder
.
x
=
bg
.
width
/
2
;
cardBoxBorder
.
y
=
bg
.
height
/
2
;
bg
.
addChild
(
cardBoxBorder
,
3
);
this
.
cardBoxBorder
=
cardBoxBorder
;
const
cardLight
=
this
.
getPic
(
'
card_light
'
);
cardLight
.
x
=
bg
.
width
/
2
+
1
*
this
.
scaleX
;
cardLight
.
y
=
bg
.
height
/
2
+
3
*
this
.
scaleY
;
cardLight
.
alpha
=
0
;
bg
.
addChild
(
cardLight
,
3
);
bg
.
addChild
(
cardLight
,
4
);
this
.
cardLight
=
cardLight
;
const
starBg
=
new
ShapeRect
();
starBg
.
setSize
(
265
*
this
.
scaleX
,
294
*
this
.
scaleY
);
starBg
.
x
=
0
;
starBg
.
y
=
0
;
starBg
.
alpha
=
0
;
bg
.
addChild
(
starBg
,
999
);
this
.
starBg
=
starBg
;
this
.
initPic
();
}
...
...
@@ -271,6 +289,7 @@ export class Card extends Item {
}
this
.
colorBg
.
fillColor
=
color
;
this
.
colorBg
.
alpha
=
1
;
this
.
cardBoxBorder
.
alpha
=
0
;
}
clearColor
(){
...
...
@@ -278,6 +297,7 @@ export class Card extends Item {
return
;
}
this
.
colorBg
.
alpha
=
0
;
this
.
cardBoxBorder
.
alpha
=
1
;
}
checkRight
(
colorCode
,
color
,
callback
=
null
,
errCallback
=
null
)
{
...
...
@@ -300,7 +320,7 @@ export class Card extends Item {
this
.
cardLight
.
alpha
=
0
;
this
.
clearColor
();
playAudio
(
this
.
audioObj
[
'
wrong
'
]);
shake
(
this
.
bg
,
5
,
callback
);
shake
2
(
this
.
bg
,
5
,
callback
);
}
private
showRight
(
color
,
callback
=
null
)
{
...
...
src/app/play/Unit.ts
View file @
ada1e15e
...
...
@@ -1747,5 +1747,49 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
export
function
shake2
(
item
,
time
=
0.5
,
callback
=
null
,
rate
=
1
)
{
if
(
item
.
shakeTween
)
{
return
;
}
item
.
shakeTween
=
true
;
const
offX
=
15
*
item
.
scaleX
*
rate
;
const
baseX
=
item
.
x
;
const
baseY
=
item
.
y
;
const
easing
=
TWEEN
.
Easing
.
Sinusoidal
.
InOut
;
const
move4
=
()
=>
{
moveItem
(
item
,
baseX
,
baseY
,
time
/
4
,
()
=>
{
item
.
shakeTween
=
false
;
if
(
callback
)
{
callback
();
}
},
easing
);
};
const
move3
=
()
=>
{
moveItem
(
item
,
baseX
+
offX
/
4
,
baseY
,
time
/
4
,
()
=>
{
move4
();
},
easing
);
};
const
move2
=
()
=>
{
moveItem
(
item
,
baseX
-
offX
/
4
*
3
,
baseY
,
time
/
4
,
()
=>
{
move3
();
},
easing
);
};
const
move1
=
()
=>
{
moveItem
(
item
,
baseX
+
offX
,
baseY
,
time
/
7.5
,
()
=>
{
move2
();
},
easing
);
};
move1
();
}
// --------------- custom class --------------------
src/app/play/play.component.ts
View file @
ada1e15e
...
...
@@ -458,8 +458,28 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
data
.
picArr
=
[];
}
const
initColorArr
=
(
colorArr
)
=>
{
colorArr
.
push
({
code
:
'
01
'
,
name
:
'
红色
'
,
val
:
'
#f3440d
'
,
picUrl
:
'
assets/play/palette/red.png
'
});
colorArr
.
push
({
code
:
'
02
'
,
name
:
'
紫色
'
,
val
:
'
#c80df3
'
,
picUrl
:
'
assets/play/palette/purple.png
'
});
colorArr
.
push
({
code
:
'
03
'
,
name
:
'
绿色
'
,
val
:
'
#26eb45
'
,
picUrl
:
'
assets/play/palette/green.png
'
});
colorArr
.
push
({
code
:
'
04
'
,
name
:
'
蓝色
'
,
val
:
'
#404dfb
'
,
picUrl
:
'
assets/play/palette/blue.png
'
});
colorArr
.
push
({
code
:
'
05
'
,
name
:
'
橘色
'
,
val
:
'
#ff9600
'
,
picUrl
:
'
assets/play/palette/orange.png
'
});
colorArr
.
push
({
code
:
'
06
'
,
name
:
'
粉色
'
,
val
:
'
#ff6073
'
,
picUrl
:
'
assets/play/palette/pink.png
'
});
colorArr
.
push
({
code
:
'
07
'
,
name
:
'
天蓝色
'
,
val
:
'
#07d6ff
'
,
picUrl
:
'
assets/play/palette/skyBlue.png
'
});
colorArr
.
push
({
code
:
'
08
'
,
name
:
'
紫粉色
'
,
val
:
'
#ff07ff
'
,
picUrl
:
'
assets/play/palette/purplePink.png
'
});
}
if
(
!
this
.
data
.
colorArr
)
{
this
.
data
.
colorArr
=
[];
initColorArr
(
this
.
data
.
colorArr
);
}
console
.
log
(
this
.
data
);
...
...
@@ -525,6 +545,26 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
starRenderArr
=
[];
this
.
endRenderArr
=
[];
for
(
let
i
=
0
;
i
<
this
.
data
.
picArr
.
length
;
++
i
)
{
let
pic
=
this
.
data
.
picArr
[
i
];
let
exsit
=
false
;
for
(
let
j
=
0
;
j
<
this
.
data
.
colorArr
.
length
;
++
j
)
{
let
color
=
this
.
data
.
colorArr
[
j
];
if
(
color
.
val
===
pic
.
color
)
{
exsit
=
true
;
break
;
}
}
if
(
!
exsit
)
{
this
.
data
.
colorArr
.
push
({
val
:
pic
.
color
});
}
}
}
...
...
@@ -543,6 +583,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
initPic
();
this
.
canTouch
=
true
;
this
.
playAudio
(
'
into
'
);
}
initBg
()
{
...
...
@@ -740,11 +782,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
curCard
.
checkRight
(
colorCard
.
code
,
colorCard
.
color
,
()
=>
{
const
star
=
new
Star
(
this
.
starRenderArr
,
this
.
images
,
this
.
ctx
);
star
.
showStar
(
this
.
curCard
.
bg
.
getBoundingBox
(),
this
.
mapScale
,
1
,
200
,
20
);
showPopParticle
(
this
.
images
.
get
(
'
icon_star
'
),
{
x
:
this
.
curCard
.
width
/
2
,
y
:
this
.
curCard
.
height
/
2
}
,
this
.
curCard
.
starBg
,
20
,
40
,
this
.
curCard
.
height
*
0.6
,
2
);
setTimeout
(()
=>
{
star
.
stop
();
this
.
canTouch
=
true
;
...
...
@@ -752,7 +792,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
canTouch
=
false
;
this
.
showEnd
();
}
},
4
000
);
},
2
000
);
},
()
=>
{
this
.
canTouch
=
true
;
...
...
src/app/play/resources.js
View file @
ada1e15e
...
...
@@ -38,6 +38,7 @@ const res = [
[
'
card_box
'
,
"
assets/play/card_box.png
"
],
[
'
card_light
'
,
"
assets/play/card_light.png
"
],
[
'
card_box_border
'
,
"
assets/play/card_box_border.png
"
],
[
'
icon_star
'
,
"
assets/play/star.png
"
],
...
...
src/assets/play/card_box.png
View replaced file @
8c12485f
View file @
ada1e15e
6.06 KB
|
W:
|
H:
3.31 KB
|
W:
|
H:
2-up
Swipe
Onion skin
src/assets/play/card_box_border.png
0 → 100644
View file @
ada1e15e
4.67 KB
src/assets/play/music/wrong1.mp3
0 → 100644
View file @
ada1e15e
File added
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