Nel Deep Web: Gioco di ruolo - HTML5, JavaScript

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

5 December 2024

Codici dei file UGS

HTML

<!--This is a RPG. Uses jsdelivr--!>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<base href="https://cdn.jsdelivr.net/gh/Stinkalistic/SWAGgames@main/IntoTheDeepWeb/">
<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, user-scalable=no' />
	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
	<title>Into the Deep Web</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;
		}

#status-progress {
			width: 366px;
			height: 7px;
			background-color: #38363A;
			border: 1px solid #444246;
			padding: 1px;
			box-shadow: 0 0 2px 1px #1B1C22;
			border-radius: 2px;
			visibility: visible;
		}

@media only screen and (orientation:portrait) {
			#status-progress {
				width: 61.8%;
			}
		}

#status-progress-inner {
			height: 100%;
			width: 0;
			box-sizing: border-box;
			transition: width 0.5s linear;
			background-color: #202020;
			border: 1px solid #222223;
			box-shadow: 0 0 1px 1px #27282E;
			border-radius: 3px;
		}

#status-indeterminate {
			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>

</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'>
		<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>

const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":13491824,"index.wasm":12649798},"gdnativeLibs":[]};
		var engine = new Engine(GODOT_CONFIG);

(function() {
			const INDETERMINATE_STATUS_STEP_MS = 100;
			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';
						break;
					case 'indeterminate':
						statusIndeterminate.style.display = 'block';
						animationCallbacks.push(animateStatusIndeterminate);
						break;
					case 'notice':
						statusNotice.style.display = 'block';
						break;
					case 'hidden':
						break;
					default:
						throw new Error('Invalid status mode');
				}
				statusMode = mode;
			}

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 {
				setStatusMode('indeterminate');
				engine.startGame({
					'onProgress': function (current, total) {
						if (total > 0) {
							statusProgressInner.style.width = current/total * 100 + '%';
							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>

Nel Deep Web: Gioco di ruolo - HTML5, JavaScript

Consigliato

Un codice di JEBJEB

Un codice di programmationant

Codici dei file UGS

HTML

CSS

JS

Consigliato

Un codice di JEBJEB

Un codice di programmationant

Codici dei file UGS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS