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