Código fuente del juego Super Liquid Soccer en HTML5

23 919423811

Abrir en el editor Publica tu código

Código fuente del juego Super Liquid Soccer en HTML5

Recomendado

27 November 2024

Control deslizante de imágenes adaptable

2 February 2025

Un código de yefersonsotohenao

8 February 2025

Un código de bachir123

HTML

<!DOCTYPE html>

<head>
	<meta name="robots" content="noindex,nofollow" />
	<meta charset='utf-8' />
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@027a7fc4b20820dc401547a74cf4f2ee875cd3e2/super%20liquid%20soccer/"
	<meta name='viewport' content='width=device-width, user-scalable=no' />
	<title>Super Liquid Soccer</title>
	<style type='text/css'>
		body {
			touch-action: none;
			margin: 0;
			border: 0 none;
			padding: 0;
			text-align: center;
			background-color: #137728;
			background-image: url(index.png);
			background-repeat: no-repeat;
			background-position: 50% 0%;
		}

#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: 20px;
			/*background-color: #38363A;*/
			background-color: #2f2f2f;
			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: #efefef;
			/*border: 1px solid #222223;*/
			/*box-shadow: 0 0 1px 1px #27282E;*/
			/*border-radius: 3px;*/
		}

#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>
	
	<script src="poki-sdk.js"></script>
	<script>
		window.addEventListener('keydown', ev => {
			if (['ArrowDown', 'ArrowUp', ' '].includes(ev.key)) {
				ev.preventDefault();
			}
		});
		window.addEventListener('wheel', ev => ev.preventDefault(), { passive: false });
	</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'>
			<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":13430320,"index.wasm":13789463},"focusCanvas":true,"gdnativeLibs":[],"serviceWorker":"index.service.worker.js"};
		var engine = new Engine(GODOT_CONFIG);

function startGameLoading() {
			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');
				PokiSDK.gameLoadingStart();
				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;
					PokiSDK.gameLoadingFinished();
				}, displayFailureNotice);
			}
		}

//Poki SDK Init. 
		PokiSDK.init().then(()=>{
			startGameLoading()
		}).catch(()=>{
			startGameLoading()
		})

let hn = window.location.hostname
		if(hn == "localhost" || hn == "192.168.1.14"){    
			PokiSDK.setDebug(true)
		}
//]]>
		</script>
</body>

</html>

CSS