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
Expand all
Show 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 @@
...
@@ -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 @@
...
@@ -324,6 +324,12 @@
"resolved"
:
"https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
,
"resolved"
:
"https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
,
"integrity"
:
"sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
,
"integrity"
:
"sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
,
"dev"
:
true
"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 @@
...
@@ -1563,6 +1569,11 @@
"integrity"
:
"sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
,
"integrity"
:
"sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
,
"dev"
:
true
"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"
:
{
"@types/webpack-sources"
:
{
"version"
:
"0.1.8"
,
"version"
:
"0.1.8"
,
"resolved"
:
"https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz"
,
"resolved"
:
"https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz"
,
...
@@ -9791,6 +9802,12 @@
...
@@ -9791,6 +9802,12 @@
"resolved"
:
"https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
,
"resolved"
:
"https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
,
"integrity"
:
"sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
,
"integrity"
:
"sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
,
"dev"
:
true
"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 @@
...
@@ -10558,6 +10575,14 @@
"requires"
:
{
"requires"
:
{
"faye-websocket"
:
"^0.10.0"
,
"faye-websocket"
:
"^0.10.0"
,
"uuid"
:
"^3.0.1"
"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"
:
{
"sockjs-client"
:
{
...
@@ -11811,6 +11836,12 @@
...
@@ -11811,6 +11836,12 @@
"requires"
:
{
"requires"
:
{
"ms"
:
"^2.1.1"
"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 @@
...
@@ -12038,10 +12069,9 @@
"dev"
:
true
"dev"
:
true
},
},
"uuid"
:
{
"uuid"
:
{
"version"
:
"3.4.0"
,
"version"
:
"8.3.2"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
,
"resolved"
:
"https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
,
"integrity"
:
"sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
,
"integrity"
:
"sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
"dev"
:
true
},
},
"validate-npm-package-license"
:
{
"validate-npm-package-license"
:
{
"version"
:
"3.0.4"
,
"version"
:
"3.0.4"
,
...
@@ -12662,6 +12692,14 @@
...
@@ -12662,6 +12692,14 @@
"requires"
:
{
"requires"
:
{
"ansi-colors"
:
"^3.0.0"
,
"ansi-colors"
:
"^3.0.0"
,
"uuid"
:
"^3.3.2"
"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"
:
{
"webpack-merge"
:
{
...
...
form/package.json
View file @
3be0e888
...
@@ -25,12 +25,14 @@
...
@@ -25,12 +25,14 @@
"@fortawesome/free-regular-svg-icons"
:
"^5.12.1"
,
"@fortawesome/free-regular-svg-icons"
:
"^5.12.1"
,
"@fortawesome/free-solid-svg-icons"
:
"^5.12.1"
,
"@fortawesome/free-solid-svg-icons"
:
"^5.12.1"
,
"@tweenjs/tween.js"
:
"~18.5.0"
,
"@tweenjs/tween.js"
:
"~18.5.0"
,
"@types/uuid"
:
"^8.3.1"
,
"ali-oss"
:
"^6.5.1"
,
"ali-oss"
:
"^6.5.1"
,
"compressing"
:
"^1.5.0"
,
"compressing"
:
"^1.5.0"
,
"ng-zorro-antd"
:
"^8.5.2"
,
"ng-zorro-antd"
:
"^8.5.2"
,
"rxjs"
:
"~6.5.4"
,
"rxjs"
:
"~6.5.4"
,
"spark-md5"
:
"^3.0.0"
,
"spark-md5"
:
"^3.0.0"
,
"tslib"
:
"^1.10.0"
,
"tslib"
:
"^1.10.0"
,
"uuid"
:
"^8.3.2"
,
"zone.js"
:
"~0.10.2"
"zone.js"
:
"~0.10.2"
},
},
"devDependencies"
:
{
"devDependencies"
:
{
...
...
form/src/app/play/Unit.ts
View file @
3be0e888
This diff is collapsed.
Click to expand it.
form/src/app/play/play.component.html
View file @
3be0e888
<div
class=
"game-container"
#
wrap
>
<div
class=
"game-container"
#
wrap
>
<canvas
id=
"canvas"
#
canvas
></canvas>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
</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
...
@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import
{
import
{
Label
,
Label
,
MySprite
,
tweenChange
,
MySprite
,
ScrollView
,
tweenChange
,
}
from
'
./Unit
'
;
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
...
@@ -330,7 +330,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -330,7 +330,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return
new
Promise
((
resolve
,
reject
)
=>
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
audio
=
new
Audio
();
const
audio
=
new
Audio
();
audio
.
oncanplay
=
(
a
)
=>
{
audio
.
oncanplay
=
(
a
)
=>
{
resolve
();
resolve
(
null
);
};
};
audio
.
onerror
=
()
=>
{
audio
.
onerror
=
()
=>
{
reject
();
reject
();
...
@@ -424,9 +424,6 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -424,9 +424,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// ======================================================编写区域==========================================================================
// ======================================================编写区域==========================================================================
/**
/**
* 添加默认数据 便于无数据时的展示
* 添加默认数据 便于无数据时的展示
*/
*/
...
@@ -438,38 +435,30 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -438,38 +435,30 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
}
}
/**
/**
* 添加预加载图片
* 添加预加载图片
*/
*/
initImg
()
{
initImg
()
{
this
.
addUrlToImages
(
this
.
data
.
pic_url
);
this
.
addUrlToImages
(
this
.
data
.
pic_url
);
this
.
addUrlToImages
(
this
.
data
.
pic_url_2
);
this
.
addUrlToImages
(
this
.
data
.
pic_url_2
);
}
}
/**
/**
* 添加预加载音频
* 添加预加载音频
*/
*/
initAudio
()
{
initAudio
()
{
// 音频资源
// 音频资源
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url
);
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url
);
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url_2
);
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url_2
);
// 音效
// 音效
this
.
addUrlToAudioObj
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
this
.
addUrlToAudioObj
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
}
}
/**
/**
* 初始化数据
* 初始化数据
*/
*/
initData
()
{
initData
()
{
const
sx
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
const
sx
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
const
sy
=
this
.
canvasHeight
/
this
.
canvasBaseH
;
const
sy
=
this
.
canvasHeight
/
this
.
canvasBaseH
;
const
s
=
Math
.
min
(
sx
,
sy
);
const
s
=
Math
.
min
(
sx
,
sy
);
...
@@ -478,11 +467,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -478,11 +467,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = sx;
// this.mapScale = sx;
// this.mapScale = sy;
// this.mapScale = sy;
this
.
renderArr
=
[];
this
.
renderArr
=
[];
}
}
...
@@ -491,160 +476,25 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -491,160 +476,25 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图
* 初始化试图
*/
*/
initView
()
{
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
)
{
mapDown
(
event
)
{
if
(
!
this
.
canTouch
)
{
if
(
!
this
.
canTouch
)
{
return
;
return
;
}
}
if
(
this
.
checkClickTarget
(
this
.
btnLeft
)
)
{
// if ( this.checkClickTarget(this.btnLeft) ) {
this
.
btnLeftClicked
();
// this.btnLeftClicked();
return
;
// return;
}
// }
if
(
this
.
checkClickTarget
(
this
.
btnRight
)
)
{
this
.
btnRightClicked
();
return
;
}
if
(
this
.
checkClickTarget
(
this
.
pic1
)
)
{
this
.
pic1Clicked
();
return
;
}
if
(
this
.
checkClickTarget
(
this
.
pic2
)
)
{
this
.
pic2Clicked
();
return
;
}
}
}
mapMove
(
event
)
{
mapMove
(
event
)
{
...
...
form/src/app/play/resources.js
View file @
3be0e888
const
res
=
[
const
res
=
[
[
'
opacity
'
,
"
assets/play/opacity.png
"
],
// ['bg', "assets/play/bg.jpg"],
[
'
white
'
,
"
assets/play/white.jpg
"
],
[
'
btn_left
'
,
"
assets/play/btn_left.png
"
],
[
'
btn_right
'
,
"
assets/play/btn_right.png
"
],
// ['text_bg', "assets/play/text_bg.png"],
];
];
const
resAudio
=
[
const
resAudio
=
[
// ['click', "assets/play/music/click.mp3"],
[
'
click
'
,
"
assets/play/music/click.mp3
"
],
];
];
export
{
res
,
resAudio
};
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