eplayer 1.5.3 → 1.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/eplayer.js +41 -1
- package/docs/game.html +17 -0
- package/docs/index.html +21 -11
- package/docs/mug.js +358 -0
- package/docs/res/anniu1.png +0 -0
- package/docs/res/anniu2.png +0 -0
- package/docs/res/anniu3.png +0 -0
- package/docs/res/anniu4.png +0 -0
- package/docs/res/bad.png +0 -0
- package/docs/res/beiban.png +0 -0
- package/docs/res/beijing.png +0 -0
- package/docs/res/bjt1.png +0 -0
- package/docs/res/bjt2.png +0 -0
- package/docs/res/bjt3.png +0 -0
- package/docs/res/bjt4.png +0 -0
- package/docs/res/fanhuianniu.png +0 -0
- package/docs/res/good.png +0 -0
- package/docs/res/hong3.png +0 -0
- package/docs/res/huang3.png +0 -0
- package/docs/res/kaishianniu.png +0 -0
- package/docs/res/kong.png +0 -0
- package/docs/res/lan3.png +0 -0
- package/docs/res/lv3.png +0 -0
- package/docs/res/miss.png +0 -0
- package/docs/res/perfect.png +0 -0
- package/docs/res/touming.png +0 -0
- package/package.json +11 -5
- package/docs/pic.js +0 -107
- package/packages/danmuku/README.md +0 -27
- package/packages/danmuku/danmuku.js +0 -111
- package/packages/danmuku/package.json +0 -12
- package/packages/eplayer/index.js +0 -599
package/docs/eplayer.js
CHANGED
|
@@ -4,19 +4,22 @@ class Eplayer extends HTMLElement {
|
|
|
4
4
|
this.doms = {}
|
|
5
5
|
this.src = this.getAttribute('src')
|
|
6
6
|
this.type = this.getAttribute('type')
|
|
7
|
+
this.beatmap = this.getAttribute('beatmap')
|
|
7
8
|
|
|
8
9
|
this.init()
|
|
9
10
|
this.stream()
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
static get observedAttributes() {
|
|
13
|
-
return ['src', 'type']
|
|
14
|
+
return ['src', 'type', 'beatmap']
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
attributeChangedCallback(name, _, newVal) {
|
|
17
18
|
if (name === 'src') this.src = this.$('.video').src = newVal
|
|
18
19
|
if (name === 'type') this.type = newVal
|
|
20
|
+
if (name === 'beatmap') this.beatmap = newVal
|
|
19
21
|
this.stream()
|
|
22
|
+
this.startMug()
|
|
20
23
|
this.video.load()
|
|
21
24
|
}
|
|
22
25
|
|
|
@@ -30,6 +33,18 @@ class Eplayer extends HTMLElement {
|
|
|
30
33
|
this.$('.mark').classList.add('loading')
|
|
31
34
|
}
|
|
32
35
|
|
|
36
|
+
startMug() {
|
|
37
|
+
this.$('.mug').style.display = 'block'
|
|
38
|
+
this.$('.ep-video').style.display = 'none'
|
|
39
|
+
this.$('.controls').style.display = 'none'
|
|
40
|
+
if (!this.beatmap) return
|
|
41
|
+
const beats = this.beatmap.split('|').map(item => {
|
|
42
|
+
const [fps, button] = item.split(':')
|
|
43
|
+
return { fps, button }
|
|
44
|
+
})
|
|
45
|
+
new Mug(beats, this.$('.mug'), this.video)
|
|
46
|
+
}
|
|
47
|
+
|
|
33
48
|
stream() {
|
|
34
49
|
switch (this.type) {
|
|
35
50
|
case 'hls':
|
|
@@ -43,6 +58,7 @@ class Eplayer extends HTMLElement {
|
|
|
43
58
|
}
|
|
44
59
|
|
|
45
60
|
mark() {
|
|
61
|
+
if (this.beatmap) return
|
|
46
62
|
clearTimeout(this.timer)
|
|
47
63
|
this.timer = setTimeout(() => this.play(), 200)
|
|
48
64
|
}
|
|
@@ -55,6 +71,7 @@ class Eplayer extends HTMLElement {
|
|
|
55
71
|
}
|
|
56
72
|
|
|
57
73
|
play() {
|
|
74
|
+
if (this.beatmap) return
|
|
58
75
|
if (this.video.paused) {
|
|
59
76
|
this.video.play()
|
|
60
77
|
this.$('.ep-video').style.display = 'none'
|
|
@@ -231,6 +248,7 @@ class Eplayer extends HTMLElement {
|
|
|
231
248
|
overflow: hidden;
|
|
232
249
|
}
|
|
233
250
|
.controls{
|
|
251
|
+
display:${this.beatmap ? 'none' : 'block'};
|
|
234
252
|
position:absolute;
|
|
235
253
|
left:0;
|
|
236
254
|
right:0;
|
|
@@ -376,6 +394,7 @@ class Eplayer extends HTMLElement {
|
|
|
376
394
|
}
|
|
377
395
|
.ep-video {
|
|
378
396
|
position: absolute;
|
|
397
|
+
display:${this.beatmap ? 'none' : 'block'};
|
|
379
398
|
bottom: 25px;
|
|
380
399
|
right: 20px;
|
|
381
400
|
font-size:40px;
|
|
@@ -414,7 +433,25 @@ class Eplayer extends HTMLElement {
|
|
|
414
433
|
margin-left:-10px;
|
|
415
434
|
display:inline-block;
|
|
416
435
|
}
|
|
436
|
+
.mug {
|
|
437
|
+
height: 450px;
|
|
438
|
+
width: 281px;
|
|
439
|
+
position: absolute;
|
|
440
|
+
z-index: 999;
|
|
441
|
+
/* pointer-events: none; */
|
|
442
|
+
transform: translate(-50%, -50%);
|
|
443
|
+
left: 50%;
|
|
444
|
+
top: 50%;
|
|
445
|
+
opacity: 0.95;
|
|
446
|
+
display: ${this.beatmap ? 'block' : 'none'}
|
|
447
|
+
}
|
|
448
|
+
.wrap{
|
|
449
|
+
position: relative;
|
|
450
|
+
height: 450px;
|
|
451
|
+
}
|
|
417
452
|
</style>
|
|
453
|
+
<div class="wrap">
|
|
454
|
+
<div class="mug"></div>
|
|
418
455
|
<div class="eplayer">
|
|
419
456
|
<video id="video" class="video" src="${this.src || ''}"></video>
|
|
420
457
|
<div class="mark loading"></div>
|
|
@@ -459,6 +496,7 @@ class Eplayer extends HTMLElement {
|
|
|
459
496
|
<div class="epicon ep-video"></div>
|
|
460
497
|
<div class="panel"></div>
|
|
461
498
|
</div>
|
|
499
|
+
</div>
|
|
462
500
|
`
|
|
463
501
|
let template = document.createElement('template')
|
|
464
502
|
template.innerHTML = html
|
|
@@ -492,6 +530,7 @@ class Eplayer extends HTMLElement {
|
|
|
492
530
|
'.panel',
|
|
493
531
|
'.speed',
|
|
494
532
|
'.pip',
|
|
533
|
+
'.mug'
|
|
495
534
|
]
|
|
496
535
|
|
|
497
536
|
for (const key of doms) {
|
|
@@ -531,6 +570,7 @@ class Eplayer extends HTMLElement {
|
|
|
531
570
|
|
|
532
571
|
mount() {
|
|
533
572
|
this.video = this.$('.video')
|
|
573
|
+
this.mug = this.$('.mug')
|
|
534
574
|
this.video.volume = 0.5
|
|
535
575
|
setVolume(this.video.volume * 10, this.$('.line'))
|
|
536
576
|
this.video.onwaiting = this.waiting.bind(this)
|
package/docs/game.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/pixi.js/4.5.2/pixi.min.js"></script>
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
</body>
|
|
14
|
+
|
|
15
|
+
</html>
|
|
16
|
+
|
|
17
|
+
<script src="./mug-class.js"></script>
|
package/docs/index.html
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
8
8
|
<title>eplayer</title>
|
|
9
|
+
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/pixi.js/4.5.2/pixi.min.js"></script>
|
|
10
|
+
<script src="./mug.js"></script>
|
|
9
11
|
</head>
|
|
10
12
|
|
|
11
13
|
<body>
|
|
@@ -16,8 +18,10 @@
|
|
|
16
18
|
|
|
17
19
|
.wrapper {
|
|
18
20
|
width: 800px;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
position: absolute;
|
|
22
|
+
transform: translate(-50%, -50%);
|
|
23
|
+
left: 50%;
|
|
24
|
+
top: 50%;
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
@media screen and (max-width: 500px) {
|
|
@@ -39,16 +43,16 @@
|
|
|
39
43
|
box-sizing: border-box;
|
|
40
44
|
}
|
|
41
45
|
|
|
42
|
-
.wrapper a:nth-child(
|
|
46
|
+
.wrapper a:nth-child(2) {
|
|
43
47
|
background: #333;
|
|
44
48
|
}
|
|
45
49
|
|
|
46
|
-
.wrapper a:nth-child(
|
|
50
|
+
.wrapper a:nth-child(4) {
|
|
47
51
|
margin-top: 30px;
|
|
48
|
-
background: #
|
|
52
|
+
background: #946ce6;
|
|
49
53
|
}
|
|
50
54
|
|
|
51
|
-
.wrapper a:nth-child(
|
|
55
|
+
.wrapper a:nth-child(3) {
|
|
52
56
|
background: #1ea6e9;
|
|
53
57
|
}
|
|
54
58
|
</style>
|
|
@@ -96,18 +100,24 @@
|
|
|
96
100
|
}
|
|
97
101
|
}
|
|
98
102
|
</style>
|
|
103
|
+
<script>
|
|
104
|
+
setTimeout(() => {
|
|
105
|
+
document.querySelector('e-player').setAttribute('beatmap', '1:2|2:1|3:3|4:4|6:2|6:1|7:3|8:4|8:2|9:1|11:3|12:4|12:2|13:1|14:3|15:4|16:2|16:1|17:3|19:4|19:2|20:1|21:3|22:4')
|
|
106
|
+
}, 1000)
|
|
107
|
+
</script>
|
|
99
108
|
<div class="wrapper">
|
|
100
|
-
|
|
101
|
-
|
|
109
|
+
|
|
110
|
+
<e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4">
|
|
102
111
|
</e-player>
|
|
112
|
+
|
|
103
113
|
<a href="https://github.com/132yse/eplayer">github</a>
|
|
104
114
|
<a href="https://github.com/132yse/eplayer/blob/master/README.md">README</a>
|
|
105
|
-
<a href="https://www.clicli.
|
|
115
|
+
<a href="https://www.clicli.cc">clicli.cc</a>
|
|
106
116
|
</div>
|
|
107
117
|
<script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
|
|
108
118
|
<script src="https://unpkg.com/hls.js"></script>
|
|
109
119
|
<script src="./eplayer.js"></script>
|
|
110
|
-
<script src="./pic.js"></script>
|
|
120
|
+
<!-- <script src="./pic.js"></script> -->
|
|
111
121
|
</body>
|
|
112
122
|
|
|
113
|
-
</html>
|
|
123
|
+
</html>
|
package/docs/mug.js
ADDED
|
@@ -0,0 +1,358 @@
|
|
|
1
|
+
const assetUrl = 'https://registry.npmmirror.com/eplayer/1.5.4/files/docs/res'
|
|
2
|
+
|
|
3
|
+
class Mug {
|
|
4
|
+
constructor(beatMap, container, video) {
|
|
5
|
+
this.container = container
|
|
6
|
+
this.beatMap = beatMap
|
|
7
|
+
this.gameStatus = 0
|
|
8
|
+
this.buttonX = 85
|
|
9
|
+
|
|
10
|
+
this.buttonArray = []
|
|
11
|
+
this.imgNumber = 1
|
|
12
|
+
this.fps = 0
|
|
13
|
+
this.score = 0
|
|
14
|
+
this.str = "0"
|
|
15
|
+
this.app = new PIXI.Application(500, 800)
|
|
16
|
+
this.container.appendChild(this.app.view)
|
|
17
|
+
console.log(container)
|
|
18
|
+
this.app.view.style.width = container.offsetWidth + 'px'
|
|
19
|
+
this.video = video
|
|
20
|
+
|
|
21
|
+
this.drawUI()
|
|
22
|
+
const buttonArray = this.buttonArray
|
|
23
|
+
document.onkeydown = function (e) {
|
|
24
|
+
if (e && e.keyCode == 68) {
|
|
25
|
+
buttonArray[0].keyDown()
|
|
26
|
+
} else if (e && e.keyCode == 70) {
|
|
27
|
+
buttonArray[1].keyDown()
|
|
28
|
+
} else if (e && e.keyCode == 74) {
|
|
29
|
+
buttonArray[2].keyDown()
|
|
30
|
+
} else if (e && e.keyCode == 75) {
|
|
31
|
+
buttonArray[3].keyDown()
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
document.onkeyup = function (e) {
|
|
35
|
+
if (e && e.keyCode == 68) {
|
|
36
|
+
buttonArray[0].keyUp()
|
|
37
|
+
} else if (e && e.keyCode == 70) {
|
|
38
|
+
buttonArray[1].keyUp()
|
|
39
|
+
} else if (e && e.keyCode == 74) {
|
|
40
|
+
buttonArray[2].keyUp()
|
|
41
|
+
} else if (e && e.keyCode == 75) {
|
|
42
|
+
buttonArray[3].keyUp()
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
this.app.ticker.add(this.animate.bind(this))
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
animate() {
|
|
50
|
+
if (this.gameStatus == 0) {
|
|
51
|
+
return
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
this.fps = this.video.currentTime
|
|
55
|
+
//创建动物
|
|
56
|
+
const head = this.beatMap[0]
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
if (head && this.fps >= head.fps) {
|
|
60
|
+
console.log(this.fps)
|
|
61
|
+
this.beatMap.shift()
|
|
62
|
+
let button = this.buttonArray[head.button - 1]
|
|
63
|
+
button.createAnimal()
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
//图片移动
|
|
67
|
+
for (let i = 0; i < this.buttonArray.length; i++) {
|
|
68
|
+
let button = this.buttonArray[i]
|
|
69
|
+
button.animalMove()
|
|
70
|
+
button.deleteAnimal()
|
|
71
|
+
button.scoreMove()
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (!head) {
|
|
75
|
+
this.over()
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
drawUI() {
|
|
80
|
+
//游戏元素图层
|
|
81
|
+
let gameCeng = new PIXI.Container()
|
|
82
|
+
this.app.stage.addChild(gameCeng)
|
|
83
|
+
//游戏背景
|
|
84
|
+
let bg = new PIXI.Sprite.fromImage(`${assetUrl}/beijing.png`)
|
|
85
|
+
gameCeng.addChild(bg)
|
|
86
|
+
//ui图层
|
|
87
|
+
let uiCeng = new PIXI.Container()
|
|
88
|
+
this.app.stage.addChild(uiCeng)
|
|
89
|
+
this.uiCeng = uiCeng
|
|
90
|
+
|
|
91
|
+
//游戏对象层
|
|
92
|
+
let gameObjectCeng = new PIXI.Container()
|
|
93
|
+
gameCeng.addChild(gameObjectCeng)
|
|
94
|
+
|
|
95
|
+
//line 图层
|
|
96
|
+
let lineCeng = new PIXI.Container()
|
|
97
|
+
gameObjectCeng.addChild(lineCeng)
|
|
98
|
+
|
|
99
|
+
//兔子图片图层
|
|
100
|
+
let animalCeng = new PIXI.Container()
|
|
101
|
+
gameObjectCeng.addChild(animalCeng)
|
|
102
|
+
|
|
103
|
+
//score图层
|
|
104
|
+
let scoreCeng = new PIXI.Container()
|
|
105
|
+
gameObjectCeng.addChild(scoreCeng)
|
|
106
|
+
|
|
107
|
+
//点击位置
|
|
108
|
+
let touming = new PIXI.Sprite.fromImage(`${assetUrl}/touming.png`)
|
|
109
|
+
lineCeng.addChild(touming)
|
|
110
|
+
touming.y = 600
|
|
111
|
+
touming.x = 250
|
|
112
|
+
touming.anchor.set(0.5, 0.5)
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
for (let i = 0; i < 4; i++) {
|
|
116
|
+
let button = new Button(this.imgNumber, gameObjectCeng, uiCeng, lineCeng, animalCeng, this.buttonX, this)
|
|
117
|
+
this.buttonX = button.bjt.x + 110
|
|
118
|
+
this.imgNumber++
|
|
119
|
+
this.buttonArray.push(button)
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
let style = {
|
|
124
|
+
font: 'bold 40px 微软雅黑',//加粗 倾斜 字号 字体名称
|
|
125
|
+
fill: '#F7EDCA',//颜色
|
|
126
|
+
stroke: '#4a1850',//描边颜色
|
|
127
|
+
strokeThickness: 5,//描边宽度
|
|
128
|
+
dropShadow: true,//开启阴影
|
|
129
|
+
dropShadowColor: '#000000',//阴影颜色
|
|
130
|
+
dropShadowAngle: Math.PI / 6,//阴影角度
|
|
131
|
+
dropShadowDistance: 6,//投影距离
|
|
132
|
+
wordWrap: true,//开启自动换行(注：开启后在文本中空格处换行，如文本中没有空格则不换行)
|
|
133
|
+
wordWrapWidth: 150,//自动换行宽度
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
let text = new PIXI.Text("得分 ", style)
|
|
137
|
+
uiCeng.addChild(text)
|
|
138
|
+
text.x = 30
|
|
139
|
+
text.y = 30
|
|
140
|
+
|
|
141
|
+
//创建文本
|
|
142
|
+
let scoreTxt = new PIXI.Text(this.str, style)
|
|
143
|
+
this.scoreTxt = scoreTxt
|
|
144
|
+
uiCeng.addChild(scoreTxt)
|
|
145
|
+
scoreTxt.x = 130
|
|
146
|
+
scoreTxt.y = 30
|
|
147
|
+
|
|
148
|
+
let startBtn = new PIXI.Sprite.fromImage(`${assetUrl}/kaishianniu.png`)
|
|
149
|
+
uiCeng.addChild(startBtn)
|
|
150
|
+
startBtn.interactive = true
|
|
151
|
+
startBtn.on("pointerdown", () => {
|
|
152
|
+
startBtn.visible = false
|
|
153
|
+
this.gameStatus = 1
|
|
154
|
+
this.video.play()
|
|
155
|
+
})
|
|
156
|
+
|
|
157
|
+
startBtn.x = 200
|
|
158
|
+
startBtn.y = 345
|
|
159
|
+
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
over() {
|
|
163
|
+
this.video.pause()
|
|
164
|
+
let gameoverPanel = new PIXI.Sprite.fromImage(`${assetUrl}/beiban.png`)
|
|
165
|
+
this.uiCeng.addChild(gameoverPanel)
|
|
166
|
+
gameoverPanel.x = 20
|
|
167
|
+
gameoverPanel.y = 100
|
|
168
|
+
gameoverPanel.alpha = 0.9
|
|
169
|
+
|
|
170
|
+
let style = {
|
|
171
|
+
font: 'bold 40px 微软雅黑',//加粗 倾斜 字号 字体名称
|
|
172
|
+
fill: '#F7EDCA',//颜色
|
|
173
|
+
}
|
|
174
|
+
let scoreTxt = new PIXI.Text(this.score, style)
|
|
175
|
+
gameoverPanel.addChild(scoreTxt)
|
|
176
|
+
scoreTxt.x = 210
|
|
177
|
+
scoreTxt.y = 110
|
|
178
|
+
|
|
179
|
+
let restartBtn = new PIXI.Sprite.fromImage(`${assetUrl}/fanhuianniu.png`)
|
|
180
|
+
gameoverPanel.addChild(restartBtn)
|
|
181
|
+
restartBtn.x = 185
|
|
182
|
+
restartBtn.y = 330
|
|
183
|
+
restartBtn.interactive = true
|
|
184
|
+
restartBtn.on("click", function () {
|
|
185
|
+
window.location.reload()
|
|
186
|
+
})
|
|
187
|
+
restartBtn.on("touchstart", function () {
|
|
188
|
+
window.location.reload()
|
|
189
|
+
})
|
|
190
|
+
this.gameStatus = 0
|
|
191
|
+
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
//获取显示对象的世界坐标
|
|
197
|
+
function getWorldPosition(displayObject) {
|
|
198
|
+
let x = displayObject.transform.worldTransform.tx
|
|
199
|
+
let y = displayObject.transform.worldTransform.ty
|
|
200
|
+
return { "x": x, "y": y }
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
class Button {
|
|
204
|
+
constructor(imgNumber, gameObjectCeng, uiCeng, lineCeng, animalCeng, buttonX, that) {
|
|
205
|
+
this.gameObjectCeng = gameObjectCeng
|
|
206
|
+
this.bjt = new PIXI.Sprite.fromImage(`${assetUrl}/bjt${imgNumber}.png`)
|
|
207
|
+
gameObjectCeng.addChild(this.bjt)
|
|
208
|
+
this.bjt.anchor.set(0.5, 1)
|
|
209
|
+
this.bjt.x = buttonX
|
|
210
|
+
this.bjt.y = 800
|
|
211
|
+
this.bjt.visible = false
|
|
212
|
+
this.animalCeng = animalCeng
|
|
213
|
+
|
|
214
|
+
this.button = new PIXI.Sprite.fromImage(`${assetUrl}/anniu${imgNumber}.png`)
|
|
215
|
+
uiCeng.addChild(this.button)
|
|
216
|
+
this.button.anchor.set(0.5, 0.5)
|
|
217
|
+
this.button.y = 754
|
|
218
|
+
this.button.x = this.bjt.x
|
|
219
|
+
this.type = imgNumber
|
|
220
|
+
|
|
221
|
+
this.kong = new PIXI.Sprite.fromImage(`${assetUrl}/kong.png`)
|
|
222
|
+
lineCeng.addChild(this.kong)
|
|
223
|
+
this.kong.anchor.set(0.5, 0.5)
|
|
224
|
+
this.kong.x = this.bjt.x
|
|
225
|
+
this.kong.y = 600
|
|
226
|
+
|
|
227
|
+
this.button.interactive = true
|
|
228
|
+
this.animalArray = []
|
|
229
|
+
|
|
230
|
+
this.show = true
|
|
231
|
+
|
|
232
|
+
this.scoreArray = []
|
|
233
|
+
|
|
234
|
+
this.soft = that
|
|
235
|
+
|
|
236
|
+
// Handlers for button
|
|
237
|
+
this.button.on("pointerdown", this.buttonMouseHandler.bind(this))
|
|
238
|
+
this.button.on("pointerup", this.buttonMouseupHandler.bind(this))
|
|
239
|
+
this.button.on("click", this.buttonClick.bind(this))
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
createAnimal() {
|
|
243
|
+
let animal = new Animal(this.type, this.button.x)
|
|
244
|
+
this.animalCeng.addChild(animal.animal)
|
|
245
|
+
this.animalArray.push(animal)
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
animalMove() {
|
|
249
|
+
for (let i = 0; i < this.animalArray.length; i++) {
|
|
250
|
+
let animal = this.animalArray[i]
|
|
251
|
+
animal.move()
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
deleteAnimal() {
|
|
256
|
+
for (let i = this.animalArray.length - 1; i >= 0; i--) {
|
|
257
|
+
let animal = this.animalArray[i]
|
|
258
|
+
if (this.kong.y + 46 < animal.animal.y && this.show == true) {
|
|
259
|
+
this.scoreAction("miss")
|
|
260
|
+
this.show = false
|
|
261
|
+
}
|
|
262
|
+
if (animal.animal.y > 800) {
|
|
263
|
+
this.show = true
|
|
264
|
+
this.animalCeng.removeChild(animal.animal)
|
|
265
|
+
this.animalArray.splice(i, 1)
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
buttonMouseHandler() {
|
|
271
|
+
this.buttonClick()
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
buttonMouseupHandler() {
|
|
275
|
+
this.bjt.visible = false
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
buttonClick() {
|
|
279
|
+
const soft = this
|
|
280
|
+
this.bjt.visible = true
|
|
281
|
+
|
|
282
|
+
for (let i = 0; i < soft.animalArray.length; i++) {
|
|
283
|
+
if (soft.kong.y - 10 < soft.animalArray[i].animal.y && soft.kong.y + 10 > soft.animalArray[i].animal.y) {
|
|
284
|
+
this.soft.score += 10
|
|
285
|
+
this.soft.scoreTxt.text = this.soft.score
|
|
286
|
+
this.animalCeng.removeChild(soft.animalArray[i].animal)
|
|
287
|
+
soft.animalArray.splice(i, 1)
|
|
288
|
+
this.scoreAction("perfect")
|
|
289
|
+
|
|
290
|
+
} else if (soft.kong.y - 20 < soft.animalArray[i].animal.y && soft.kong.y + 20 > soft.animalArray[i].animal.y) {
|
|
291
|
+
this.soft.score += 5
|
|
292
|
+
this.soft.scoreTxt.text = this.soft.score
|
|
293
|
+
this.animalCeng.removeChild(soft.animalArray[i].animal)
|
|
294
|
+
soft.animalArray.splice(i, 1)
|
|
295
|
+
this.scoreAction("good")
|
|
296
|
+
} else if (soft.kong.y - 30 < soft.animalArray[i].animal.y && soft.kong.y + 30 > soft.animalArray[i].animal.y) {
|
|
297
|
+
this.soft.score += 1
|
|
298
|
+
this.soft.scoreTxt.text = this.soft.score
|
|
299
|
+
this.animalCeng.removeChild(soft.animalArray[i].animal)
|
|
300
|
+
soft.animalArray.splice(i, 1)
|
|
301
|
+
this.scoreAction("bad")
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
keyDown() {
|
|
307
|
+
this.buttonClick()
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
keyUp() {
|
|
311
|
+
this.bjt.visible = false
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
scoreAction(name) {
|
|
315
|
+
let score = new PIXI.Sprite.fromImage(`${assetUrl}/` + name + ".png")
|
|
316
|
+
this.gameObjectCeng.addChild(score)
|
|
317
|
+
score.y = 540
|
|
318
|
+
score.x = this.bjt.x
|
|
319
|
+
score.anchor.set(0.5, 0.5)
|
|
320
|
+
score.alpha = 1
|
|
321
|
+
this.scoreArray.push(score)
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
scoreMove() {
|
|
325
|
+
for (let i = 0; i < this.scoreArray.length; i++) {
|
|
326
|
+
let score = this.scoreArray[i]
|
|
327
|
+
score.alpha -= 0.01
|
|
328
|
+
score.y -= 2
|
|
329
|
+
}
|
|
330
|
+
for (let i = this.scoreArray.length - 1; i >= 0; i--) {
|
|
331
|
+
let score = this.scoreArray[i]
|
|
332
|
+
if (score.y <= 400) {
|
|
333
|
+
this.gameObjectCeng.removeChild(score)
|
|
334
|
+
this.scoreArray.splice(i, 1)
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
class Animal {
|
|
341
|
+
constructor(type, animalX) {
|
|
342
|
+
let number = 3
|
|
343
|
+
let typeMap = {
|
|
344
|
+
1: "lan",
|
|
345
|
+
2: "lv",
|
|
346
|
+
3: "hong",
|
|
347
|
+
4: "huang"
|
|
348
|
+
}
|
|
349
|
+
this.animal = new PIXI.Sprite.fromImage(`${assetUrl}/${typeMap[type]}${number}.png`)
|
|
350
|
+
this.animal.anchor.set(0.5, 0.5)
|
|
351
|
+
this.animal.x = animalX
|
|
352
|
+
this.animal.y = 0
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
move() {
|
|
356
|
+
this.animal.y += 3.33
|
|
357
|
+
}
|
|
358
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/docs/res/bad.png
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/docs/res/lv3.png
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "eplayer",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.5",
|
|
4
4
|
"description": "A web-components html5 video player facing future",
|
|
5
|
-
"main": "./
|
|
6
|
-
"module": "./
|
|
5
|
+
"main": "./docs/eplayer.js",
|
|
6
|
+
"module": "./docs/eplayer.js",
|
|
7
7
|
"unpkg": "./docs/eplayer.js",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
|
-
"build": "rollup -c"
|
|
10
|
+
"build": "rollup -c",
|
|
11
|
+
"start": "serve docs"
|
|
11
12
|
},
|
|
12
13
|
"repository": {
|
|
13
14
|
"type": "git",
|
|
@@ -19,5 +20,10 @@
|
|
|
19
20
|
"bugs": {
|
|
20
21
|
"url": "https://github.com/132yse/eplayer/issues"
|
|
21
22
|
},
|
|
22
|
-
"homepage": "https://github.com/132yse/eplayer#readme"
|
|
23
|
+
"homepage": "https://github.com/132yse/eplayer#readme",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"pixi-filters": "^6.0.4",
|
|
26
|
+
"pixi.js": "^8.1.8",
|
|
27
|
+
"serve": "^14.2.3"
|
|
28
|
+
}
|
|
23
29
|
}
|