Navegando pelas profundezas da Web: Jogo de RPG - HTML5, JavaScript

27 iroger7

Abrir no Editor Video Publique Seu Código

Navegando pelas profundezas da Web: Jogo de RPG - HTML5, JavaScript

Recomendado

10 February 2025

Botão animado em CSS com efeito de ondulação

4 December 2024

Página do herói da montanha

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>

Navegando pelas profundezas da Web: Jogo de RPG - HTML5, JavaScript

Recomendado

aplicativo de clima

Botão animado em CSS com efeito de ondulação

Página do herói da montanha

HTML

CSS

JS

Recomendado

aplicativo de clima

Botão animado em CSS com efeito de ondulação

Página do herói da montanha

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS