Hugging Face's logo

Spaces:
pgsoft
/
h5staging
Running

App Files Community
h5staging / snake /GluttonousSnake.html
anan66's picture
anan66
upload snake game
524a854
raw
history blame contribute delete
8.29 kB
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
 <meta charset='utf-8' />
 <meta name='viewport' content='width=device-width, user-scalable=no' />
 <title>GluttonousSnake</title>
 <style type='text/css'>
 body {
 touch-action: none;
 margin: 0;
 border: 0 none;
 padding: 0;
 text-align: center;
 background-color: black;
 }
 #canvas {
 display: block;
 margin: 0;
 color: white;
 }
 #canvas:focus {
 outline: none;
 }
 .godot {
 font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
 color: #e0e0e0;
 background-color: #3b3943;
 background-image: linear-gradient(to bottom, #403e48, #35333c);
 border: 1px solid #45434e;
 box-shadow: 0 0 1px 1px #2f2d35;
 }
 /* Status display
 * ============== */
 #status {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 /* don't consume click events - make children visible explicitly */
 visibility: hidden;
 }
 @keyframes breathing {
 0% { opacity: 0.5; }
 50% { opacity: 1; }
 100% { opacity: 0.5; }
 }
 #loading-logo {
 width: 180px;
 position: absolute;
 top: 40%;
 left: 50%;
 transform: translate(-50%, -50%);
 animation: breathing 3s infinite ease-in-out;
 z-index: 10;
 visibility: visible;
 }
 #status-progress {
 width: 512px; /* 确保和图片大小一致 */
 height: 512px; /* 让背景图片完全覆盖 */
 background-image: url('loadback.png');
 background-size: contain; /* 防止拉伸 */
 background-repeat: no-repeat;
 background-position: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); /* 居中显示 */
 visibility: visible;
 }
 @media only screen and (orientation:portrait) {
 #status-progress {
 width: 61.8%;
 }
 }
 #status-progress-inner {
 width: 100%; /* 初始填充 */
 height: 100%;
 background-image: url('loadfront.png');
 background-size: contain; /* 保持原始比例 */
 background-repeat: no-repeat;
 background-position: center;
 position: absolute;
 clip-path: inset(0 100% 0 0); /* 通过裁剪实现进度增长 */
 transition: clip-path 0.5s linear;
 visibility: visible;
 }
 #status-indeterminate {
 height: 42px;
 visibility: visible;
 position: relative;
 }
 #status-indeterminate > div {
 width: 4.5px;
 height: 0;
 border-style: solid;
 border-width: 9px 3px 0 3px;
 border-color: #2b2b2b transparent transparent transparent;
 transform-origin: center 21px;
 position: absolute;
 }
 #status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
 #status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
 #status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
 #status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
 #status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
 #status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
 #status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
 #status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
 #status-notice {
 margin: 0 100px;
 line-height: 1.3;
 visibility: visible;
 padding: 4px 6px;
 visibility: visible;
 }
 </style>
 <link id='-gd-engine-icon' rel='icon' type='image/png' href='GluttonousSnake.icon.png' />
<link rel='apple-touch-icon' href='GluttonousSnake.apple-touch-icon.png'/>
<link id='-gd-engine-icon' rel='icon' type='image/png' href='res://PlayGo_Game_CommonLibrary/Common/LoadingScene/res/loading_anim/1.png' />
 <link rel='apple-touch-icon' href='GluttonousSnake.apple-touch-icon.png'/>
 <script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
 <script type="text/javascript" src="./anan.tool.js"></script>
 <script type="text/javascript" src="./gameapp.js"></script>
</head>
<body>
<canvas id='canvas'>
 HTML5 canvas appears to be unsupported in the current browser.<br />
 Please try updating or use a different browser.
</canvas>
<div id='status'>
 <img id="loading-logo" src="Logo.png" alt="Loading Logo"/>
 <div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
 <div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div id='status-notice' class='godot' style='display: none;'></div>
</div>
<script type='text/javascript' src='GluttonousSnake.js'></script>
<script type='text/javascript'>//<![CDATA[
const GODOT_CONFIG = {"args":[],"canvasResizePolicy":0,"executable":"GluttonousSnake","experimentalVK":false,"fileSizes":{"GluttonousSnake.pck":56207824,"GluttonousSnake.wasm":25658069},"focusCanvas":true,"gdnativeLibs":[]};
var engine = new Engine(GODOT_CONFIG);
(function() {
 const INDETERMINATE_STATUS_STEP_MS = 100;
 var logo = document.getElementById('loading-logo');
 var statusProgress = document.getElementById('status-progress');
 var statusProgressInner = document.getElementById('status-progress-inner');
 var statusIndeterminate = document.getElementById('status-indeterminate');
 var statusNotice = document.getElementById('status-notice');
 var initializing = true;
 var statusMode = 'hidden';
 var animationCallbacks = [];
 function animate(time) {
 animationCallbacks.forEach(callback => callback(time));
 requestAnimationFrame(animate);
 }
 requestAnimationFrame(animate);
 function setStatusMode(mode) {
 if (statusMode === mode || !initializing)
 return;
 [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
 elem.style.display = 'none';
 });
 animationCallbacks = animationCallbacks.filter(function(value) {
 return (value != animateStatusIndeterminate);
 });
 switch (mode) {
 case 'progress':
 statusProgress.style.display = 'block';
 logo.style.display = 'block';
 break;
 case 'indeterminate':
 statusIndeterminate.style.display = 'block';
 logo.style.display = 'block';
 animationCallbacks.push(animateStatusIndeterminate);
 break;
 case 'notice':
 statusNotice.style.display = 'block';
 logo.style.display = 'block';
 break;
 case 'hidden':
 if (logo) logo.style.display = 'none';
 break;
 default:
 throw new Error('Invalid status mode');
 }
 statusMode = mode;
 }
 function animateStatusIndeterminate(ms) {
 var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
 if (statusIndeterminate.children[i].style.borderTopColor == '') {
 Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
 child.style.borderTopColor = '';
 });
 statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
 }
 }
 function setStatusNotice(text) {
 while (statusNotice.lastChild) {
 statusNotice.removeChild(statusNotice.lastChild);
 }
 var lines = text.split('\n');
 lines.forEach((line) => {
 statusNotice.appendChild(document.createTextNode(line));
 statusNotice.appendChild(document.createElement('br'));
 });
 };
 function displayFailureNotice(err) {
 var msg = err.message || err;
 console.error(msg);
 setStatusNotice(msg);
 setStatusMode('notice');
 initializing = false;
 };
 if (!Engine.isWebGLAvailable()) {
 displayFailureNotice('WebGL not available');
 } else {
 // statusProgressInner.style.width = 1 * 100 + '%';
 // statusProgressInner.style.clipPath = `inset(0 ${100 - current/total}% 0 0)`;
 // setStatusMode('progress');
 setStatusMode('indeterminate');
 engine.startGame({
 'onProgress': function (current, total) {
 if (total > 0) {
 var progress = (current / total) * 100; // 计算进度
 statusProgressInner.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
 setStatusMode('progress');
 if (current === total) {
 // wait for progress bar animation
 setTimeout(() => {
 setStatusMode('indeterminate');
 }, 500);
 }
 } else {
 setStatusMode('indeterminate');
 }
 },
 }).then(() => {
 setStatusMode('hidden');
 initializing = false;
 }, displayFailureNotice);
 }
})();
//]]></script>
</body>
</html>