Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
unit_demo
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
unit_demo
Commits
3be0e888
Commit
3be0e888
authored
Sep 10, 2021
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: ScrollView
parent
6d1968c0
Changes
16
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
149 additions
and
219 deletions
+149
-219
angular.json
form/angular.json
+5
-2
package-lock.json
form/package-lock.json
+42
-4
package.json
form/package.json
+2
-0
Unit.ts
form/src/app/play/Unit.ts
+82
-42
play.component.html
form/src/app/play/play.component.html
+3
-0
play.component.ts
form/src/app/play/play.component.ts
+12
-162
resources.js
form/src/app/play/resources.js
+3
-9
bg.jpg
form/src/assets/play/bg.jpg
+0
-0
btn_left.png
form/src/assets/play/btn_left.png
+0
-0
btn_right.png
form/src/assets/play/btn_right.png
+0
-0
audio.mp3
form/src/assets/play/default/audio.mp3
+0
-0
pic.jpg
form/src/assets/play/default/pic.jpg
+0
-0
click.mp3
form/src/assets/play/music/click.mp3
+0
-0
opacity.png
form/src/assets/play/opacity.png
+0
-0
text_bg.png
form/src/assets/play/text_bg.png
+0
-0
white.jpg
form/src/assets/play/white.jpg
+0
-0
No files found.
form/angular.json
View file @
3be0e888
...
...
@@ -128,5 +128,8 @@
}
}
},
"defaultProject"
:
"ng-template-generator"
}
"defaultProject"
:
"ng-template-generator"
,
"cli"
:
{
"analytics"
:
false
}
}
\ No newline at end of file
form/package-lock.json
View file @
3be0e888
...
...
@@ -324,6 +324,12 @@
"resolved"
:
"https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
,
"integrity"
:
"sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
,
"dev"
:
true
},
"uuid"
:
{
"version"
:
"3.4.0"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"dev"
:
true
}
}
},
...
...
@@ -1563,6 +1569,11 @@
"integrity"
:
"sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
,
"dev"
:
true
},
"@types/uuid"
:
{
"version"
:
"8.3.1"
,
"resolved"
:
"https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz"
,
"integrity"
:
"sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg=="
},
"@types/webpack-sources"
:
{
"version"
:
"0.1.8"
,
"resolved"
:
"https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz"
,
...
...
@@ -9791,6 +9802,12 @@
"resolved"
:
"https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
,
"integrity"
:
"sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
,
"dev"
:
true
},
"uuid"
:
{
"version"
:
"3.4.0"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"dev"
:
true
}
}
},
...
...
@@ -10558,6 +10575,14 @@
"requires"
:
{
"faye-websocket"
:
"^0.10.0"
,
"uuid"
:
"^3.0.1"
},
"dependencies"
:
{
"uuid"
:
{
"version"
:
"3.4.0"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"dev"
:
true
}
}
},
"sockjs-client"
:
{
...
...
@@ -11811,6 +11836,12 @@
"requires"
:
{
"ms"
:
"^2.1.1"
}
},
"uuid"
:
{
"version"
:
"3.4.0"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"dev"
:
true
}
}
},
...
...
@@ -12038,10 +12069,9 @@
"dev"
:
true
},
"uuid"
:
{
"version"
:
"3.4.0"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"dev"
:
true
"version"
:
"8.3.2"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
,
"integrity"
:
"sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"validate-npm-package-license"
:
{
"version"
:
"3.0.4"
,
...
...
@@ -12662,6 +12692,14 @@
"requires"
:
{
"ansi-colors"
:
"^3.0.0"
,
"uuid"
:
"^3.3.2"
},
"dependencies"
:
{
"uuid"
:
{
"version"
:
"3.4.0"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"dev"
:
true
}
}
},
"webpack-merge"
:
{
...
...
form/package.json
View file @
3be0e888
...
...
@@ -25,12 +25,14 @@
"@fortawesome/free-regular-svg-icons"
:
"^5.12.1"
,
"@fortawesome/free-solid-svg-icons"
:
"^5.12.1"
,
"@tweenjs/tween.js"
:
"~18.5.0"
,
"@types/uuid"
:
"^8.3.1"
,
"ali-oss"
:
"^6.5.1"
,
"compressing"
:
"^1.5.0"
,
"ng-zorro-antd"
:
"^8.5.2"
,
"rxjs"
:
"~6.5.4"
,
"spark-md5"
:
"^3.0.0"
,
"tslib"
:
"^1.10.0"
,
"uuid"
:
"^8.3.2"
,
"zone.js"
:
"~0.10.2"
},
"devDependencies"
:
{
...
...
form/src/app/play/Unit.ts
View file @
3be0e888
import
{
v4
as
uuidv4
}
from
'
uuid
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
interface
AirWindow
extends
Window
{
interface
AirWindow
extends
Window
{
air
:
any
;
curCtx
:
any
;
}
...
...
@@ -188,7 +188,7 @@ export class MySprite extends Sprite {
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
for
(
const
child
of
this
.
children
)
{
for
(
const
child
of
this
.
children
)
{
if
(
child
===
this
)
{
if
(
this
.
visible
)
{
this
.
drawSelf
();
...
...
@@ -243,14 +243,14 @@ export class MySprite extends Sprite {
if
(
this
.
children
[
i
])
{
if
(
this
.
children
[
i
]
!==
this
)
{
this
.
children
.
splice
(
i
,
1
);
i
--
;
i
--
;
}
}
}
}
_changeChildAlpha
(
alpha
)
{
for
(
const
child
of
this
.
children
)
{
for
(
const
child
of
this
.
children
)
{
if
(
child
!==
this
)
{
child
.
alpha
=
alpha
;
}
...
...
@@ -331,7 +331,7 @@ export class MySprite extends Sprite {
}
return
{
px
,
py
,
sx
,
sy
};
return
{
px
,
py
,
sx
,
sy
};
};
...
...
@@ -348,7 +348,7 @@ export class MySprite extends Sprite {
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return
{
x
,
y
,
width
,
height
};
return
{
x
,
y
,
width
,
height
};
}
}
...
...
@@ -378,10 +378,10 @@ export class ColorSpr extends MySprite {
const
c
=
this
.
ctx
.
getImageData
(
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
);
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
r
=
c
.
data
[
x
];
const
g
=
c
.
data
[
x
+
1
];
const
b
=
c
.
data
[
x
+
2
];
...
...
@@ -424,10 +424,10 @@ export class GrayscaleSpr extends MySprite {
const
rect
=
this
.
getBoundingBox
();
const
c
=
this
.
ctx
.
getImageData
(
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
);
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
r
=
c
.
data
[
x
];
const
g
=
c
.
data
[
x
+
1
];
const
b
=
c
.
data
[
x
+
2
];
...
...
@@ -484,7 +484,7 @@ export class BitMapLabel extends MySprite {
this
.
height
=
h
;
let
offX
=
-
totalW
/
2
;
for
(
const
label
of
labelArr
)
{
for
(
const
label
of
labelArr
)
{
label
.
x
=
offX
;
offX
+=
label
.
width
;
}
...
...
@@ -656,7 +656,7 @@ export class RichTextOld extends Label {
for
(
const
word
of
words
)
{
const
re
=
new
RegExp
(
word
,
'
g
'
);
newText
=
newText
.
replace
(
re
,
`#
${
word
}
#`
);
newText
=
newText
.
replace
(
re
,
`#
${
word
}
#`
);
// newText = newText.replace(word, `#${word}#`);
}
...
...
@@ -758,7 +758,7 @@ export class RichTextOld extends Label {
export
class
RichText
extends
Label
{
disH
=
30
;
disH
=
30
;
constructor
(
ctx
?:
any
)
{
super
(
ctx
);
...
...
@@ -794,7 +794,7 @@ export class RichText extends Label {
for
(
const
c
of
chr
)
{
for
(
const
c
of
chr
)
{
if
(
this
.
ctx
.
measureText
(
temp
).
width
<
w
&&
this
.
ctx
.
measureText
(
temp
+
(
c
)).
width
<=
w
)
{
temp
+=
'
'
+
c
;
}
else
{
...
...
@@ -814,16 +814,16 @@ export class RichText extends Label {
if
(
this
.
_outlineFlag
)
{
this
.
ctx
.
lineWidth
=
this
.
_outLineWidth
;
this
.
ctx
.
strokeStyle
=
this
.
_outLineColor
;
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
strokeText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
strokeText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
fillText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
fillText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
}
}
...
...
@@ -1089,7 +1089,7 @@ export class MyAnimation extends MySprite {
}
showAllFrame
()
{
for
(
const
frame
of
this
.
frameArr
)
{
for
(
const
frame
of
this
.
frameArr
)
{
frame
.
alpha
=
1
;
}
}
...
...
@@ -1119,7 +1119,7 @@ export class MyAnimation extends MySprite {
this
.
frameArr
[
this
.
frameIndex
].
visible
=
false
;
}
this
.
frameIndex
++
;
this
.
frameIndex
++
;
if
(
this
.
frameIndex
>=
this
.
frameArr
.
length
)
{
if
(
this
.
loop
)
{
this
.
frameIndex
=
0
;
...
...
@@ -1127,7 +1127,7 @@ export class MyAnimation extends MySprite {
this
.
restartFlag
=
false
;
this
.
frameIndex
=
0
;
}
else
{
this
.
frameIndex
--
;
this
.
frameIndex
--
;
this
.
playEnd
();
return
;
}
...
...
@@ -1188,7 +1188,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
tween
.
easing
(
easing
);
}
if
(
update
)
{
tween
.
onUpdate
(
(
a
,
b
)
=>
{
tween
.
onUpdate
((
a
,
b
)
=>
{
update
(
a
,
b
);
});
}
...
...
@@ -1220,7 +1220,7 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
export
function
scaleItem
(
item
,
scale
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
scaleX
:
scale
,
scaleY
:
scale
},
time
*
1000
);
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
scaleX
:
scale
,
scaleY
:
scale
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
...
...
@@ -1238,7 +1238,7 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
export
function
moveItem
(
item
,
x
,
y
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
x
,
y
},
time
*
1000
);
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
x
,
y
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
...
...
@@ -1281,7 +1281,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
}
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
0
},
time
*
1000
)
.
to
({
alpha
:
0
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
...
...
@@ -1308,7 +1308,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
item
.
visible
=
true
;
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
},
time
*
1000
)
.
to
({
alpha
:
1
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
...
...
@@ -1328,7 +1328,7 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
},
time
*
1000
)
.
to
({
alpha
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
...
...
@@ -1348,7 +1348,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
,
scale
:
1
},
time
*
1000
)
.
to
({
alpha
:
1
,
scale
:
1
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
...
...
@@ -1368,7 +1368,7 @@ export function randomSortByArr(arr) {
const
newArr
=
[];
const
tmpArr
=
arr
.
concat
();
while
(
tmpArr
.
length
>
0
)
{
const
randomIndex
=
Math
.
floor
(
tmpArr
.
length
*
Math
.
random
()
);
const
randomIndex
=
Math
.
floor
(
tmpArr
.
length
*
Math
.
random
()
);
newArr
.
push
(
tmpArr
[
randomIndex
]);
tmpArr
.
splice
(
randomIndex
,
1
);
}
...
...
@@ -1392,7 +1392,7 @@ export function getPosByAngle(angle, len) {
const
x
=
Math
.
sin
(
radian
)
*
len
;
const
y
=
Math
.
cos
(
radian
)
*
len
;
return
{
x
,
y
};
return
{
x
,
y
};
}
...
...
@@ -1448,12 +1448,12 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
const
r
=
getPosDistance
(
item
.
x
,
item
.
y
,
x0
,
y0
);
let
a
=
getAngleByPos
(
item
.
x
,
item
.
y
,
x0
,
y0
);
a
+=
90
;
const
obj
=
{
r
,
a
};
const
obj
=
{
r
,
a
};
item
.
_circleAngle
=
a
;
const
targetA
=
a
+
addR
;
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
_circleAngle
:
targetA
},
time
*
1000
);
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
_circleAngle
:
targetA
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
...
...
@@ -1464,7 +1464,7 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween
.
easing
(
easing
);
}
tween
.
onUpdate
(
(
item
,
progress
)
=>
{
tween
.
onUpdate
((
item
,
progress
)
=>
{
// console.log(item._circleAngle);
const
r
=
obj
.
r
;
...
...
@@ -1487,7 +1487,7 @@ 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
)
);
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
}
...
...
@@ -1518,8 +1518,9 @@ export function formatTime(fmt, date) {
};
if
(
/
(
y+
)
/
.
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
date
.
getFullYear
()
+
''
).
substr
(
4
-
RegExp
.
$1
.
length
));
}
for
(
const
k
in
o
)
{
if
(
new
RegExp
(
'
(
'
+
k
+
'
)
'
).
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
RegExp
.
$1
.
length
===
1
)
?
(
o
[
k
])
:
((
'
00
'
+
o
[
k
]).
substr
((
''
+
o
[
k
]).
length
)));
if
(
new
RegExp
(
'
(
'
+
k
+
'
)
'
).
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
RegExp
.
$1
.
length
===
1
)
?
(
o
[
k
])
:
((
'
00
'
+
o
[
k
]).
substr
((
''
+
o
[
k
]).
length
)));
}
}
return
fmt
;
...
...
@@ -1552,8 +1553,8 @@ export function jelly(item, time = 0.7) {
return
;
}
const
data
=
arr
[
index
];
const
t
=
tweenChange
(
item
,
{
scaleX
:
data
[
0
],
scaleY
:
data
[
1
]
},
data
[
2
],
()
=>
{
index
++
;
const
t
=
tweenChange
(
item
,
{
scaleX
:
data
[
0
],
scaleY
:
data
[
1
]
},
data
[
2
],
()
=>
{
index
++
;
run
();
},
TWEEN
.
Easing
.
Sinusoidal
.
InOut
);
item
.
jellyTween
=
t
;
...
...
@@ -1576,7 +1577,7 @@ export function jelly(item, time = 0.7) {
export
function
showPopParticle
(
img
,
pos
,
parent
,
num
=
20
,
minLen
=
40
,
maxLen
=
80
,
showTime
=
0.4
)
{
for
(
let
i
=
0
;
i
<
num
;
i
++
)
{
for
(
let
i
=
0
;
i
<
num
;
i
++
)
{
const
particle
=
new
MySprite
();
particle
.
init
(
img
);
...
...
@@ -1672,5 +1673,44 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
export
class
ScrollView
extends
MySprite
{
content
:
MySprite
;
contentCanvas
:
any
;
contentContext
:
any
;
constructor
(
ctx
=
null
)
{
super
(
ctx
);
}
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
super
.
init
(
imgObj
,
anchorX
,
anchorY
);
this
.
content
=
new
MySprite
();
this
.
content
.
init
(
imgObj
,
0
,
0
);
let
contentCanvas
=
document
.
createElement
(
"
canvas
"
);
contentCanvas
.
id
=
uuidv4
();
this
.
contentCanvas
=
contentCanvas
;
const
contentContext
=
contentCanvas
.
getContext
(
"
2d
"
);
this
.
contentContext
=
contentContext
;
let
scrollViewDiv
=
document
.
getElementById
(
"
scroll_view_div
"
);
scrollViewDiv
.
appendChild
(
contentCanvas
);
}
addContent
(
sprite
:
Sprite
)
{
this
.
content
.
addChild
(
sprite
);
sprite
.
ctx
=
this
.
contentContext
;
}
drawSelf
()
{
const
contentRect
=
this
.
content
.
getBoundingBox
();
const
rect
=
this
.
getBoundingBox
();
const
imgData
=
this
.
contentContext
.
getImageData
(
contentRect
.
x
,
contentRect
.
y
,
rect
.
width
,
rect
.
height
);
this
.
ctx
.
putImageData
(
imgData
,
this
.
_offX
,
this
.
_offY
);
}
}
// --------------- custom class --------------------
form/src/app/play/play.component.html
View file @
3be0e888
<div
class=
"game-container"
#
wrap
>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
<div
id=
"scroll_view_div"
>
</div>
form/src/app/play/play.component.ts
View file @
3be0e888
...
...
@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import
{
Label
,
MySprite
,
tweenChange
,
MySprite
,
ScrollView
,
tweenChange
,
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
...
...
@@ -330,7 +330,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return
new
Promise
((
resolve
,
reject
)
=>
{
const
audio
=
new
Audio
();
audio
.
oncanplay
=
(
a
)
=>
{
resolve
();
resolve
(
null
);
};
audio
.
onerror
=
()
=>
{
reject
();
...
...
@@ -424,9 +424,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
...
...
@@ -438,38 +435,30 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
/**
* 添加预加载图片
*/
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
);
...
...
@@ -478,11 +467,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = sx;
// this.mapScale = sy;
this
.
renderArr
=
[];
}
...
...
@@ -491,160 +476,25 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图
*/
initView
()
{
const
scrollView
=
new
ScrollView
();
scrollView
.
init
(
this
.
images
.
get
(
'
white
'
));
scrollView
.
scaleX
=
(
400
/
scrollView
.
width
);
scrollView
.
scaleY
=
(
300
/
scrollView
.
height
);
this
.
renderArr
.
push
(
scrollView
);
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
;
}
// if ( this.checkClickTarget(this.btnLeft) ) {
// this.btnLeftClicked();
// return;
// }
}
mapMove
(
event
)
{
...
...
form/src/app/play/resources.js
View file @
3be0e888
const
res
=
[
// ['bg', "assets/play/bg.jpg"],
[
'
btn_left
'
,
"
assets/play/btn_left.png
"
],
[
'
btn_right
'
,
"
assets/play/btn_right.png
"
],
// ['text_bg', "assets/play/text_bg.png"],
[
'
opacity
'
,
"
assets/play/opacity.png
"
],
[
'
white
'
,
"
assets/play/white.jpg
"
],
];
const
resAudio
=
[
[
'
click
'
,
"
assets/play/music/click.mp3
"
],
// ['click', "assets/play/music/click.mp3"],
];
export
{
res
,
resAudio
};
form/src/assets/play/bg.jpg
deleted
100644 → 0
View file @
6d1968c0
25.8 KB
form/src/assets/play/btn_left.png
deleted
100644 → 0
View file @
6d1968c0
1.97 KB
form/src/assets/play/btn_right.png
deleted
100644 → 0
View file @
6d1968c0
1.88 KB
form/src/assets/play/default/audio.mp3
deleted
100644 → 0
View file @
6d1968c0
File deleted
form/src/assets/play/default/pic.jpg
deleted
100644 → 0
View file @
6d1968c0
28.7 KB
form/src/assets/play/music/click.mp3
deleted
100644 → 0
View file @
6d1968c0
File deleted
form/src/assets/play/opacity.png
0 → 100644
View file @
3be0e888
937 Bytes
form/src/assets/play/text_bg.png
deleted
100644 → 0
View file @
6d1968c0
293 Bytes
form/src/assets/play/white.jpg
0 → 100644
View file @
3be0e888
795 Bytes
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