Hugging Face's logo

Spaces:
pgsoft
/
h5staging
Running

App Files Community
anan66 commited on
Commit
524a854
·
1 Parent(s): 7653510

upload snake game

Browse files
Files changed (6) hide show
  1. .gitattributes +1 -0
  2. snake/GluttonousSnake.html +173 -135
  3. snake/GluttonousSnake.js +0 -0
  4. snake/Logo.png +3 -0
  5. snake/loadback.png +0 -0
  6. snake/loadfront.png +0 -0
.gitattributes CHANGED
@@ -39,3 +39,4 @@ snake/GluttonousSnake.pck filter=lfs diff=lfs merge=lfs -text
39
  watermelon/WatermelonGame.pck filter=lfs diff=lfs merge=lfs -text
40
  house/MatchNGame.pck filter=lfs diff=lfs merge=lfs -text
41
  matchn/Logo.png filter=lfs diff=lfs merge=lfs -text
 
 
39
  watermelon/WatermelonGame.pck filter=lfs diff=lfs merge=lfs -text
40
  house/MatchNGame.pck filter=lfs diff=lfs merge=lfs -text
41
  matchn/Logo.png filter=lfs diff=lfs merge=lfs -text
42
+ snake/Logo.png filter=lfs diff=lfs merge=lfs -text
snake/GluttonousSnake.html CHANGED
@@ -51,14 +51,34 @@
51
  visibility: hidden;
52
  }
53
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  #status-progress {
55
- width: 366px;
56
- height: 7px;
57
- background-color: #38363A;
58
- border: 1px solid #444246;
59
- padding: 1px;
60
- box-shadow: 0 0 2px 1px #1B1C22;
61
- border-radius: 2px;
 
 
 
62
  visibility: visible;
63
  }
64
 
@@ -69,14 +89,16 @@
69
  }
70
 
71
  #status-progress-inner {
 
72
  height: 100%;
73
- width: 0;
74
- box-sizing: border-box;
75
- transition: width 0.5s linear;
76
- background-color: #202020;
77
- border: 1px solid #222223;
78
- box-shadow: 0 0 1px 1px #27282E;
79
- border-radius: 3px;
 
80
  }
81
 
82
  #status-indeterminate {
@@ -112,140 +134,156 @@
112
  visibility: visible;
113
  }
114
  </style>
115
- <link id='-gd-engine-icon' rel='icon' type='image/png' href='GluttonousSnake.icon.png' />
116
  <link rel='apple-touch-icon' href='GluttonousSnake.apple-touch-icon.png'/>
117
 
118
- <script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
119
- <script type="text/javascript" src="./anan.tool.js"></script>
120
- <script type="text/javascript" src="./gameapp.js"></script>
 
 
121
  </head>
122
  <body>
123
- <canvas id='canvas'>
124
- HTML5 canvas appears to be unsupported in the current browser.<br />
125
- Please try updating or use a different browser.
126
- </canvas>
127
- <div id='status'>
128
- <div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
129
- <div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
130
- <div></div>
131
- <div></div>
132
- <div></div>
133
- <div></div>
134
- <div></div>
135
- <div></div>
136
- <div></div>
137
- <div></div>
138
- </div>
139
- <div id='status-notice' class='godot' style='display: none;'></div>
140
  </div>
 
 
141
 
142
- <script type='text/javascript' src='GluttonousSnake.js'></script>
143
- <script type='text/javascript'>//<![CDATA[
144
 
145
- const GODOT_CONFIG = {"args":[],"canvasResizePolicy":0,"executable":"GluttonousSnake","experimentalVK":true,"fileSizes":{"GluttonousSnake.pck":62000112,"GluttonousSnake.wasm":19761972},"focusCanvas":true,"gdnativeLibs":[]};
146
- var engine = new Engine(GODOT_CONFIG);
147
 
148
- (function() {
149
- const INDETERMINATE_STATUS_STEP_MS = 100;
150
- var statusProgress = document.getElementById('status-progress');
151
- var statusProgressInner = document.getElementById('status-progress-inner');
152
- var statusIndeterminate = document.getElementById('status-indeterminate');
153
- var statusNotice = document.getElementById('status-notice');
 
154
 
155
- var initializing = true;
156
- var statusMode = 'hidden';
157
 
158
- var animationCallbacks = [];
159
- function animate(time) {
160
- animationCallbacks.forEach(callback => callback(time));
161
- requestAnimationFrame(animate);
162
- }
163
- requestAnimationFrame(animate);
164
-
165
- function setStatusMode(mode) {
166
-
167
- if (statusMode === mode || !initializing)
168
- return;
169
- [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
170
- elem.style.display = 'none';
171
- });
172
- animationCallbacks = animationCallbacks.filter(function(value) {
173
- return (value != animateStatusIndeterminate);
174
- });
175
- switch (mode) {
176
- case 'progress':
177
- statusProgress.style.display = 'block';
178
- break;
179
- case 'indeterminate':
180
- statusIndeterminate.style.display = 'block';
181
- animationCallbacks.push(animateStatusIndeterminate);
182
- break;
183
- case 'notice':
184
- statusNotice.style.display = 'block';
185
- break;
186
- case 'hidden':
187
- break;
188
- default:
189
- throw new Error('Invalid status mode');
190
- }
191
- statusMode = mode;
192
- }
193
 
194
- function animateStatusIndeterminate(ms) {
195
- var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
196
- if (statusIndeterminate.children[i].style.borderTopColor == '') {
197
- Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
198
- child.style.borderTopColor = '';
199
- });
200
- statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
201
- }
202
- }
203
 
204
- function setStatusNotice(text) {
205
- while (statusNotice.lastChild) {
206
- statusNotice.removeChild(statusNotice.lastChild);
207
- }
208
- var lines = text.split('\n');
209
- lines.forEach((line) => {
210
- statusNotice.appendChild(document.createTextNode(line));
211
- statusNotice.appendChild(document.createElement('br'));
212
- });
213
- };
214
-
215
- function displayFailureNotice(err) {
216
- var msg = err.message || err;
217
- console.error(msg);
218
- setStatusNotice(msg);
219
- setStatusMode('notice');
220
- initializing = false;
221
- };
222
-
223
- if (!Engine.isWebGLAvailable()) {
224
- displayFailureNotice('WebGL not available');
225
- } else {
226
- setStatusMode('indeterminate');
227
- engine.startGame({
228
- 'onProgress': function (current, total) {
229
- if (total > 0) {
230
- statusProgressInner.style.width = current/total * 100 + '%';
231
- setStatusMode('progress');
232
- if (current === total) {
233
- // wait for progress bar animation
234
- setTimeout(() => {
235
- setStatusMode('indeterminate');
236
- }, 500);
237
- }
238
- } else {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  setStatusMode('indeterminate');
240
- }
241
- },
242
- }).then(() => {
243
- setStatusMode('hidden');
244
- initializing = false;
245
- }, displayFailureNotice);
246
- }
247
- })();
248
- //]]></script>
 
 
 
 
 
249
  </body>
250
  </html>
251
 
 
 
 
51
  visibility: hidden;
52
  }
53
 
54
+ @keyframes breathing {
55
+ 0% { opacity: 0.5; }
56
+ 50% { opacity: 1; }
57
+ 100% { opacity: 0.5; }
58
+ }
59
+
60
+ #loading-logo {
61
+ width: 180px;
62
+ position: absolute;
63
+ top: 40%;
64
+ left: 50%;
65
+ transform: translate(-50%, -50%);
66
+ animation: breathing 3s infinite ease-in-out;
67
+ z-index: 10;
68
+ visibility: visible;
69
+ }
70
+
71
  #status-progress {
72
+ width: 512px; /* 确保和图片大小一致 */
73
+ height: 512px; /* 让背景图片完全覆盖 */
74
+ background-image: url('loadback.png');
75
+ background-size: contain; /* 防止拉伸 */
76
+ background-repeat: no-repeat;
77
+ background-position: center;
78
+ position: absolute;
79
+ top: 50%;
80
+ left: 50%;
81
+ transform: translate(-50%, -50%); /* 居中显示 */
82
  visibility: visible;
83
  }
84
 
 
89
  }
90
 
91
  #status-progress-inner {
92
+ width: 100%; /* 初始填充 */
93
  height: 100%;
94
+ background-image: url('loadfront.png');
95
+ background-size: contain; /* 保持原始比例 */
96
+ background-repeat: no-repeat;
97
+ background-position: center;
98
+ position: absolute;
99
+ clip-path: inset(0 100% 0 0); /* 通过裁剪实现进度增长 */
100
+ transition: clip-path 0.5s linear;
101
+ visibility: visible;
102
  }
103
 
104
  #status-indeterminate {
 
134
  visibility: visible;
135
  }
136
  </style>
137
+ <link id='-gd-engine-icon' rel='icon' type='image/png' href='GluttonousSnake.icon.png' />
138
  <link rel='apple-touch-icon' href='GluttonousSnake.apple-touch-icon.png'/>
139
 
140
+ <link id='-gd-engine-icon' rel='icon' type='image/png' href='res://PlayGo_Game_CommonLibrary/Common/LoadingScene/res/loading_anim/1.png' />
141
+ <link rel='apple-touch-icon' href='GluttonousSnake.apple-touch-icon.png'/>
142
+ <script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
143
+ <script type="text/javascript" src="./anan.tool.js"></script>
144
+ <script type="text/javascript" src="./gameapp.js"></script>
145
  </head>
146
  <body>
147
+ <canvas id='canvas'>
148
+ HTML5 canvas appears to be unsupported in the current browser.<br />
149
+ Please try updating or use a different browser.
150
+ </canvas>
151
+ <div id='status'>
152
+ <img id="loading-logo" src="Logo.png" alt="Loading Logo"/>
153
+ <div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
154
+ <div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
155
+ <div></div>
156
+ <div></div>
157
+ <div></div>
158
+ <div></div>
159
+ <div></div>
160
+ <div></div>
161
+ <div></div>
162
+ <div></div>
 
163
  </div>
164
+ <div id='status-notice' class='godot' style='display: none;'></div>
165
+ </div>
166
 
167
+ <script type='text/javascript' src='GluttonousSnake.js'></script>
168
+ <script type='text/javascript'>//<![CDATA[
169
 
170
+ const GODOT_CONFIG = {"args":[],"canvasResizePolicy":0,"executable":"GluttonousSnake","experimentalVK":false,"fileSizes":{"GluttonousSnake.pck":56207824,"GluttonousSnake.wasm":25658069},"focusCanvas":true,"gdnativeLibs":[]};
171
+ var engine = new Engine(GODOT_CONFIG);
172
 
173
+ (function() {
174
+ const INDETERMINATE_STATUS_STEP_MS = 100;
175
+ var logo = document.getElementById('loading-logo');
176
+ var statusProgress = document.getElementById('status-progress');
177
+ var statusProgressInner = document.getElementById('status-progress-inner');
178
+ var statusIndeterminate = document.getElementById('status-indeterminate');
179
+ var statusNotice = document.getElementById('status-notice');
180
 
181
+ var initializing = true;
182
+ var statusMode = 'hidden';
183
 
184
+ var animationCallbacks = [];
185
+ function animate(time) {
186
+ animationCallbacks.forEach(callback => callback(time));
187
+ requestAnimationFrame(animate);
188
+ }
189
+ requestAnimationFrame(animate);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
 
191
+ function setStatusMode(mode) {
 
 
 
 
 
 
 
 
192
 
193
+ if (statusMode === mode || !initializing)
194
+ return;
195
+ [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
196
+ elem.style.display = 'none';
197
+ });
198
+ animationCallbacks = animationCallbacks.filter(function(value) {
199
+ return (value != animateStatusIndeterminate);
200
+ });
201
+ switch (mode) {
202
+ case 'progress':
203
+ statusProgress.style.display = 'block';
204
+ logo.style.display = 'block';
205
+ break;
206
+ case 'indeterminate':
207
+ statusIndeterminate.style.display = 'block';
208
+ logo.style.display = 'block';
209
+ animationCallbacks.push(animateStatusIndeterminate);
210
+ break;
211
+ case 'notice':
212
+ statusNotice.style.display = 'block';
213
+ logo.style.display = 'block';
214
+ break;
215
+ case 'hidden':
216
+ if (logo) logo.style.display = 'none';
217
+ break;
218
+ default:
219
+ throw new Error('Invalid status mode');
220
+ }
221
+ statusMode = mode;
222
+ }
223
+
224
+ function animateStatusIndeterminate(ms) {
225
+ var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
226
+ if (statusIndeterminate.children[i].style.borderTopColor == '') {
227
+ Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
228
+ child.style.borderTopColor = '';
229
+ });
230
+ statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
231
+ }
232
+ }
233
+
234
+ function setStatusNotice(text) {
235
+ while (statusNotice.lastChild) {
236
+ statusNotice.removeChild(statusNotice.lastChild);
237
+ }
238
+ var lines = text.split('\n');
239
+ lines.forEach((line) => {
240
+ statusNotice.appendChild(document.createTextNode(line));
241
+ statusNotice.appendChild(document.createElement('br'));
242
+ });
243
+ };
244
+
245
+ function displayFailureNotice(err) {
246
+ var msg = err.message || err;
247
+ console.error(msg);
248
+ setStatusNotice(msg);
249
+ setStatusMode('notice');
250
+ initializing = false;
251
+ };
252
+
253
+ if (!Engine.isWebGLAvailable()) {
254
+ displayFailureNotice('WebGL not available');
255
+ } else {
256
+ // statusProgressInner.style.width = 1 * 100 + '%';
257
+ // statusProgressInner.style.clipPath = `inset(0 ${100 - current/total}% 0 0)`;
258
+ // setStatusMode('progress');
259
+
260
+ setStatusMode('indeterminate');
261
+ engine.startGame({
262
+ 'onProgress': function (current, total) {
263
+ if (total > 0) {
264
+ var progress = (current / total) * 100; // 计算进度
265
+ statusProgressInner.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
266
+ setStatusMode('progress');
267
+ if (current === total) {
268
+ // wait for progress bar animation
269
+ setTimeout(() => {
270
  setStatusMode('indeterminate');
271
+ }, 500);
272
+ }
273
+ } else {
274
+ setStatusMode('indeterminate');
275
+ }
276
+ },
277
+ }).then(() => {
278
+ setStatusMode('hidden');
279
+ initializing = false;
280
+ }, displayFailureNotice);
281
+
282
+ }
283
+ })();
284
+ //]]></script>
285
  </body>
286
  </html>
287
 
288
+
289
+
snake/GluttonousSnake.js CHANGED
The diff for this file is too large to render. See raw diff
 
snake/Logo.png ADDED

Git LFS Details

  • SHA256: 24988d014c86bda27e1317aa8fa658b429c0438c0ae5b56d831d930672f5d897
  • Pointer size: 131 Bytes
  • Size of remote file: 123 kB
snake/loadback.png ADDED
snake/loadfront.png ADDED