webgal-engine 4.5.14 → 4.5.15
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/dist/assets/LXGWWenKai-Regular-9375313a.ttf.gz +0 -0
- package/dist/assets/OPPOSans-R-ea925359.ttf.gz +0 -0
- package/dist/assets/SourceHanSerifCN-Regular-1e60cc2e.ttf.gz +0 -0
- package/dist/assets/index-33661c0e.js +4132 -0
- package/dist/assets/index-33661c0e.js.gz +0 -0
- package/dist/assets/index-52a967b4.css +1 -0
- package/dist/assets/index-52a967b4.css.gz +0 -0
- package/dist/assets/index.es-b0893633.js +14 -0
- package/dist/assets/index.es-b0893633.js.gz +0 -0
- package/dist/assets/initRegister-53c31d84.js +1 -0
- package/dist/assets/initRegister-53c31d84.js.gz +0 -0
- package/dist/index.html +338 -290
- package/package.json +4 -3
- package/dist/assets/index-3eeb86b4.js +0 -4106
- package/dist/assets/index-a8388d26.css +0 -1
- package/dist/assets/index.es-91e0b61f.js +0 -14
- package/dist/assets/initRegister-3e6399ee.js +0 -1
package/dist/index.html
CHANGED
|
@@ -1,233 +1,350 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="zh-Hans">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/x-icon" href="./icons/favicon.ico" />
|
|
6
|
+
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
|
|
7
|
+
<link rel="manifest" href="./manifest.json" />
|
|
8
|
+
<title>WebGAL</title>
|
|
9
|
+
<style>
|
|
10
|
+
.html-body__effect-background {
|
|
11
|
+
height: 100vh;
|
|
12
|
+
width: 100vw;
|
|
13
|
+
filter: blur(50px);
|
|
14
|
+
background-position: center;
|
|
15
|
+
background-repeat: no-repeat;
|
|
16
|
+
background-size: cover;
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
left: 0;
|
|
20
|
+
}
|
|
13
21
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
22
|
+
.html-body__title-enter {
|
|
23
|
+
width: 2560px;
|
|
24
|
+
height: 1440px;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 0;
|
|
28
|
+
z-index: 14;
|
|
29
|
+
opacity: 1;
|
|
30
|
+
transition: opacity 1.5s;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.title-enter__initial-background {
|
|
34
|
+
height: 100%;
|
|
35
|
+
width: 100%;
|
|
36
|
+
position: absolute;
|
|
37
|
+
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
|
|
38
|
+
top: 0;
|
|
39
|
+
opacity: 1;
|
|
40
|
+
transition: opacity 1s;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.title-enter__white-background {
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
opacity: 0;
|
|
49
|
+
background: linear-gradient(
|
|
50
|
+
165deg,
|
|
51
|
+
rgba(255, 255, 255, 0.25) 0%,
|
|
52
|
+
rgba(255, 255, 255, 1) 50%,
|
|
53
|
+
rgba(255, 255, 255, 0.25) 100%
|
|
54
|
+
);
|
|
55
|
+
transition: opacity 1s;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.title-enter__container {
|
|
59
|
+
width: 100%;
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: 0;
|
|
62
|
+
height: 100%;
|
|
63
|
+
opacity: 1;
|
|
64
|
+
font-size: 175%;
|
|
65
|
+
transition: opacity 1s;
|
|
66
|
+
z-index: 15;
|
|
67
|
+
font-family: '思源宋体', Georgia, serif;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.title-enter-container__center-text {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100%;
|
|
73
|
+
display: flex;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
align-items: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.title-enter-container__center-text > div {
|
|
79
|
+
letter-spacing: 0.25em;
|
|
80
|
+
padding: 2em 2em 2em 2em;
|
|
81
|
+
text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
|
|
82
|
+
transition: text-shadow 1s;
|
|
83
|
+
font-size: 175%;
|
|
84
|
+
animation: title-enter-container__center-text--blink 4s infinite;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@keyframes title-enter-container__center-text--blink {
|
|
88
|
+
0% {
|
|
89
|
+
text-shadow: 0 0 15px rgba(0, 0, 0, 0.65);
|
|
90
|
+
}
|
|
91
|
+
50% {
|
|
92
|
+
text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
|
|
93
|
+
}
|
|
94
|
+
100% {
|
|
95
|
+
text-shadow: 0 0 15px rgba(0, 0, 0, 0.65);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.title-enter-container__link-to-github {
|
|
100
|
+
position: absolute;
|
|
75
101
|
bottom: 1em;
|
|
76
|
-
color
|
|
102
|
+
color: #999;
|
|
77
103
|
font-size: 75%;
|
|
78
104
|
display: flex;
|
|
79
105
|
justify-content: center;
|
|
80
106
|
width: 100%;
|
|
81
107
|
flex-flow: column;
|
|
82
|
-
align-items: center
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
108
|
+
align-items: center;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.title-enter-container__link-to-github > div {
|
|
112
|
+
padding: 0 0 0.25em 0;
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
115
|
+
<script type="module" crossorigin src="./assets/index-33661c0e.js"></script>
|
|
116
|
+
<link rel="stylesheet" href="./assets/index-52a967b4.css">
|
|
117
|
+
</head>
|
|
118
|
+
<body>
|
|
119
|
+
<!-- 背景模糊 -->
|
|
120
|
+
<div class="html-body__effect-background"></div>
|
|
121
|
+
<!-- 落地页 -->
|
|
122
|
+
<div class="html-body__title-enter">
|
|
123
|
+
<div class="title-enter__initial-background"></div>
|
|
124
|
+
<div class="title-enter__white-background"></div>
|
|
125
|
+
<div class="title-enter__container">
|
|
126
|
+
<div class="title-enter-container__center-text">
|
|
127
|
+
<div>PRESS THE SCREEN TO START</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="title-enter-container__link-to-github">
|
|
130
|
+
<div>Powered by <a> WebGAL </a> Framework</div>
|
|
86
131
|
</div>
|
|
87
132
|
</div>
|
|
88
133
|
</div>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
const targetWidth = 2560;
|
|
134
|
+
<!-- 紧急回避页挂载点 -->
|
|
135
|
+
<div id="html-body__panic-overlay"></div>
|
|
136
|
+
<!-- 应用挂载点 -->
|
|
137
|
+
<div id="root"></div>
|
|
138
|
+
<!-- 在窗口大小改变时进行强制缩放 -->
|
|
139
|
+
<script>
|
|
140
|
+
(() => {
|
|
141
|
+
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
142
|
+
const resize = () => {
|
|
143
|
+
const targetHeight = 1440; // 目标高度
|
|
144
|
+
const targetWidth = 2560; // 目标宽度
|
|
101
145
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
146
|
+
const h = window.innerHeight; // 窗口高度
|
|
147
|
+
const w = window.innerWidth; // 窗口宽度
|
|
148
|
+
const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
|
|
149
|
+
const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
|
|
150
|
+
const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
|
|
151
|
+
const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
|
|
152
|
+
let mh = (targetHeight - h) / 2; // y轴移动距离
|
|
153
|
+
let mw = (targetWidth - w) / 2; // x轴移动距离
|
|
154
|
+
let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
|
|
155
|
+
let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
|
|
156
|
+
let transform = '';
|
|
157
|
+
let effectBackgroundTransform = '';
|
|
158
|
+
const root = document.querySelector('#root'); // 获取根元素
|
|
159
|
+
const titleEnter = document.querySelector('.html-body__title-enter');
|
|
160
|
+
const effectBackground = document.querySelector('.html-body__effect-background');
|
|
161
|
+
const elements = [root, titleEnter];
|
|
162
|
+
if (w > h) {
|
|
163
|
+
if (effectBackground) {
|
|
164
|
+
effectBackground.style.height = `100vh`;
|
|
165
|
+
effectBackground.style.width = `100vw`;
|
|
166
|
+
effectBackgroundTransform = '';
|
|
167
|
+
}
|
|
168
|
+
mw = -mw;
|
|
169
|
+
mh = -mh;
|
|
170
|
+
if (w * (9 / 16) >= h) {
|
|
171
|
+
transform = `translate(${mw}px, ${mh}px) ` + `scale(${zoomH}, ${zoomH}) `;
|
|
172
|
+
}
|
|
173
|
+
if (w * (9 / 16) < h) {
|
|
174
|
+
transform = `translate(${mw}px, ${mh}px) ` + `scale(${zoomW}, ${zoomW}) `;
|
|
175
|
+
}
|
|
176
|
+
} else {
|
|
177
|
+
// 旋转
|
|
178
|
+
if (effectBackground) {
|
|
179
|
+
effectBackground.style.height = `${targetHeight}px `;
|
|
180
|
+
effectBackground.style.width = `${targetWidth}px `;
|
|
181
|
+
}
|
|
182
|
+
mw2os = -mw2os;
|
|
183
|
+
if (h * (9 / 16) >= w) {
|
|
184
|
+
effectBackgroundTransform =
|
|
185
|
+
`rotate(90deg) ` + `translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomH2 * 1.75}, ${zoomH2 * 1.75}) `;
|
|
186
|
+
transform = `rotate(90deg) ` + `translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomH2},${zoomH2}) `;
|
|
187
|
+
}
|
|
188
|
+
if (h * (9 / 16) < w) {
|
|
189
|
+
effectBackgroundTransform =
|
|
190
|
+
`rotate(90deg) ` + ` translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomW2 * 1.75}, ${zoomW2 * 1.75}) `;
|
|
191
|
+
transform = `rotate(90deg) ` + `translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomW2},${zoomW2}) `;
|
|
192
|
+
}
|
|
193
|
+
// iOS 不强制旋转
|
|
194
|
+
if (isIOS) {
|
|
195
|
+
const zoomWi = w / targetWidth;
|
|
196
|
+
transform = `translate(${-mw}px, ${-mh}px) ` + `scale(${zoomWi},${zoomWi}) `;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
if (effectBackground) {
|
|
200
|
+
effectBackground.style.transform = effectBackgroundTransform;
|
|
201
|
+
}
|
|
202
|
+
for (const element of elements) {
|
|
203
|
+
if (element) {
|
|
204
|
+
element.style.transform = transform;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
if (!isIOS) {
|
|
209
|
+
// 非 IOS
|
|
210
|
+
// 创建一个新的 meta 标签
|
|
211
|
+
const metaTag = document.createElement('meta');
|
|
212
|
+
metaTag.name = 'viewport';
|
|
213
|
+
metaTag.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
|
|
214
|
+
// 将该标签添加到 head 中
|
|
215
|
+
document.head.appendChild(metaTag);
|
|
216
|
+
resize();
|
|
217
|
+
window.onload = resize;
|
|
218
|
+
window.onresize = resize;
|
|
219
|
+
// 监听键盘 F11 键按下事件,全屏时触发页面调整
|
|
220
|
+
document.onkeydown = (e) => {
|
|
221
|
+
if (e && e.key === 'F11') {
|
|
222
|
+
setTimeout(() => {
|
|
223
|
+
resize();
|
|
224
|
+
}, 100);
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
} else {
|
|
228
|
+
// IOS
|
|
229
|
+
const metaTag = document.createElement('meta');
|
|
230
|
+
metaTag.name = 'viewport';
|
|
231
|
+
metaTag.content = 'width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1';
|
|
232
|
+
// 将该标签添加到 head 中
|
|
233
|
+
document.head.appendChild(metaTag);
|
|
234
|
+
const styleTag = document.createElement('style');
|
|
235
|
+
styleTag.textContent = '* { font-synthesis: none !important; }';
|
|
236
|
+
document.head.appendChild(styleTag);
|
|
156
237
|
}
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
238
|
+
})();
|
|
239
|
+
</script>
|
|
240
|
+
<!-- 注册 Service Worker -->
|
|
241
|
+
<script>
|
|
242
|
+
(() => {
|
|
243
|
+
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
244
|
+
if ('serviceWorker' in navigator && !isIOS) {
|
|
245
|
+
navigator.serviceWorker
|
|
246
|
+
.register('./webgal-serviceworker.js')
|
|
247
|
+
.then((reg) => {
|
|
248
|
+
console.log('Registration succeeded. Scope is ' + reg.scope);
|
|
249
|
+
})
|
|
250
|
+
.catch((error) => {
|
|
251
|
+
console.log('Registration failed with ' + error);
|
|
252
|
+
});
|
|
164
253
|
}
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
254
|
+
})();
|
|
255
|
+
</script>
|
|
256
|
+
<!-- 首屏加载 -->
|
|
257
|
+
<script>
|
|
258
|
+
(() => {
|
|
259
|
+
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
260
|
+
let enterPromiseResolve;
|
|
261
|
+
const enterPromise = new Promise((res) => {
|
|
262
|
+
enterPromiseResolve = res;
|
|
263
|
+
});
|
|
264
|
+
const renderPromise = new Promise((res) => {
|
|
265
|
+
window.renderPromiseResolve = () => {
|
|
266
|
+
res();
|
|
267
|
+
delete window.renderPromiseResolve;
|
|
268
|
+
};
|
|
269
|
+
});
|
|
270
|
+
// 将播放bgm的事件发送出去
|
|
271
|
+
Promise.all([enterPromise, renderPromise]).then(() => {
|
|
272
|
+
const event = new MouseEvent('click', {
|
|
273
|
+
view: window,
|
|
274
|
+
bubbles: true,
|
|
275
|
+
cancelable: true,
|
|
276
|
+
});
|
|
277
|
+
const target = document.querySelector('.title__enter-game-target');
|
|
278
|
+
if (target) {
|
|
279
|
+
target.dispatchEvent(event);
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
/** 点击屏幕,进入引擎主界面 */
|
|
283
|
+
const enter = () => {
|
|
284
|
+
const initialBackground = document.querySelector('.title-enter__initial-background');
|
|
285
|
+
if (initialBackground) {
|
|
286
|
+
initialBackground.style.opacity = '0';
|
|
287
|
+
}
|
|
288
|
+
const container = document.querySelector('.title-enter__container');
|
|
289
|
+
if (container) {
|
|
290
|
+
container.style.opacity = '0';
|
|
291
|
+
}
|
|
292
|
+
const whiteBackground = document.querySelector('.title-enter__white-background');
|
|
182
293
|
setTimeout(() => {
|
|
183
|
-
|
|
184
|
-
|
|
294
|
+
if (whiteBackground) {
|
|
295
|
+
whiteBackground.style.opacity = '1';
|
|
296
|
+
}
|
|
297
|
+
}, 50); // 在50ms后开始显示白色渐变
|
|
298
|
+
const titleEnter = document.querySelector('.html-body__title-enter');
|
|
299
|
+
setTimeout(() => {
|
|
300
|
+
if (titleEnter) titleEnter.style.opacity = '0';
|
|
301
|
+
}, 500); // 500ms后开始降低落地页透明度
|
|
302
|
+
if (!isIOS && titleEnter) {
|
|
303
|
+
titleEnter.style.pointerEvents = 'none'; // 落地页不再响应点击
|
|
304
|
+
titleEnter.style.background = 'linear-gradient( #a1c4fd 0%, #c2e9fb 100%)'; // 改变标题渐变效果
|
|
305
|
+
}
|
|
306
|
+
setTimeout(() => {
|
|
307
|
+
if (titleEnter) {
|
|
308
|
+
titleEnter.style.display = 'none';
|
|
309
|
+
}
|
|
310
|
+
}, 2000); // 将落地页设置为不显示
|
|
311
|
+
enterPromiseResolve();
|
|
312
|
+
};
|
|
313
|
+
const titleEnter = document.querySelector('.html-body__title-enter');
|
|
314
|
+
if (titleEnter) {
|
|
315
|
+
titleEnter.onclick = enter;
|
|
185
316
|
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
<!--<script type="module" src="/src/Core/util/resize.ts"></script>-->
|
|
218
|
-
<script>
|
|
219
|
-
function loadScript(url) {
|
|
220
|
-
return new Promise((resolve, reject) => {
|
|
221
|
-
const script = document.createElement('script');
|
|
222
|
-
script.src = url;
|
|
223
|
-
script.onload = () => resolve(`Loaded: ${url}`);
|
|
224
|
-
script.onerror = (error) => reject(`Failed to load: ${url}`);
|
|
225
|
-
document.head.appendChild(script);
|
|
226
|
-
});
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
async function loadLive2D() {
|
|
230
|
-
try {
|
|
317
|
+
const linkToGithub = document.querySelector('.title-enter-container__link-to-github');
|
|
318
|
+
const aTag = linkToGithub?.querySelector('a');
|
|
319
|
+
if (aTag) {
|
|
320
|
+
aTag.href = 'https://github.com/OpenWebGAL/WebGAL';
|
|
321
|
+
aTag.onclick = (event) => event.stopPropagation();
|
|
322
|
+
}
|
|
323
|
+
})();
|
|
324
|
+
</script>
|
|
325
|
+
<!-- 加载IIFE插件 -->
|
|
326
|
+
<script>
|
|
327
|
+
(() => {
|
|
328
|
+
const loadScript = (url, type) => {
|
|
329
|
+
return new Promise((resolve, reject) => {
|
|
330
|
+
const script = document.createElement('script');
|
|
331
|
+
script.src = url;
|
|
332
|
+
if (type) script.type = type;
|
|
333
|
+
script.onload = () => resolve(`Loaded: ${url}`);
|
|
334
|
+
script.onerror = () => reject(new Error(`Failed to load: ${url}`));
|
|
335
|
+
document.head.appendChild(script);
|
|
336
|
+
});
|
|
337
|
+
};
|
|
338
|
+
const loadIifePlugin = async (pluginPath) => {
|
|
339
|
+
try {
|
|
340
|
+
const info = await loadScript(pluginPath);
|
|
341
|
+
console.log(info);
|
|
342
|
+
return true;
|
|
343
|
+
} catch (error) {
|
|
344
|
+
console.warn(error);
|
|
345
|
+
return false;
|
|
346
|
+
}
|
|
347
|
+
};
|
|
231
348
|
// 尝试加载 Live2D SDK,
|
|
232
349
|
// 只有在用户自行取得 Live2D 许可并放到下面的目录时,这里才可能加载成功。
|
|
233
350
|
// 本项目 **没有** 引入 Live2D SDK
|
|
@@ -237,81 +354,12 @@
|
|
|
237
354
|
// Live2D SDK の読み込みを試みます。
|
|
238
355
|
// ユーザーが Live2D ライセンスを取得し、以下のディレクトリに配置した場合のみ、読み込みが成功します。
|
|
239
356
|
// このプロジェクトには Live2D SDK は**含まれていません**
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
</script>
|
|
249
|
-
<script>
|
|
250
|
-
let enterPromise = new Promise(res => window.enterPromise = res);
|
|
251
|
-
let renderPromise = new Promise(res => window.renderPromise = res);
|
|
252
|
-
/**
|
|
253
|
-
* 将播放bgm的事件发送出去
|
|
254
|
-
*/
|
|
255
|
-
Promise.all([enterPromise, renderPromise]).then(() => {
|
|
256
|
-
const event = new MouseEvent("click", {
|
|
257
|
-
"view": window,
|
|
258
|
-
"bubbles": true,
|
|
259
|
-
"cancelable": true
|
|
260
|
-
});
|
|
261
|
-
const target = document.getElementById("enter_game_target");
|
|
262
|
-
if (target) {
|
|
263
|
-
target.dispatchEvent(event);
|
|
264
|
-
}
|
|
265
|
-
if (event) {
|
|
266
|
-
const logo = document.getElementById("logo_target");
|
|
267
|
-
if (logo) {
|
|
268
|
-
logo.style.display = "contents";
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
});
|
|
272
|
-
|
|
273
|
-
function jump(event, url) {
|
|
274
|
-
// 获取点击事件,阻止点击事件冒泡触发 `enter` 事件
|
|
275
|
-
event.stopPropagation();
|
|
276
|
-
// window.location = url;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
/**
|
|
280
|
-
* 点击屏幕,进入引擎主界面
|
|
281
|
-
*/
|
|
282
|
-
function enter() {
|
|
283
|
-
const bgContainer = document.getElementById("Title_bg_container");
|
|
284
|
-
if (bgContainer) {
|
|
285
|
-
bgContainer.style.opacity = "0"; // 调整标题背景的透明度
|
|
286
|
-
}
|
|
287
|
-
const enterText = document.getElementById("Title_enter_text");
|
|
288
|
-
if (enterText) {
|
|
289
|
-
enterText.style.opacity = "0"; // 调整标题文字的透明度
|
|
290
|
-
}
|
|
291
|
-
const whiteContainer = document.getElementById("Title_white_container");
|
|
292
|
-
setTimeout(() => {
|
|
293
|
-
if (whiteContainer) {
|
|
294
|
-
whiteContainer.style.opacity = "1";
|
|
295
|
-
}
|
|
296
|
-
}, 50); // 在50ms后开始显示白色渐变
|
|
297
|
-
const title = document.getElementById("Title_enter_page");
|
|
298
|
-
setTimeout(() => {
|
|
299
|
-
if (title)
|
|
300
|
-
title.style.opacity = "0";
|
|
301
|
-
}, 500); //500ms后开始降低落地页透明度
|
|
302
|
-
if (!isIOS && title) {
|
|
303
|
-
title.style.pointerEvents = "none"; //落地页不再响应点击
|
|
304
|
-
title.style.background = "linear-gradient( #a1c4fd 0%, #c2e9fb 100%)"; //改变标题渐变效果
|
|
305
|
-
}
|
|
306
|
-
setTimeout(() => {
|
|
307
|
-
if (title) {
|
|
308
|
-
title.style.display = "none";
|
|
309
|
-
}
|
|
310
|
-
}, 2000); // 将落地页设置为不显示
|
|
311
|
-
window.enterPromise();
|
|
312
|
-
delete window.enterPromise;
|
|
313
|
-
}
|
|
314
|
-
</script>
|
|
315
|
-
</body>
|
|
316
|
-
|
|
357
|
+
const live2d2Promise = loadIifePlugin('lib/live2d.min.js');
|
|
358
|
+
const live2d4Promise = loadIifePlugin('lib/live2dcubismcore.min.js');
|
|
359
|
+
window.live2dPromise = Promise.all([live2d2Promise, live2d4Promise]);
|
|
360
|
+
})();
|
|
361
|
+
</script>
|
|
362
|
+
<!-- main文件 -->
|
|
363
|
+
|
|
364
|
+
</body>
|
|
317
365
|
</html>
|