Code source du jeu HTML5 Super Liquid Soccer

24 919423811

Ouvrir dans l'éditeur Publiez votre code

Code source du jeu HTML5 Super Liquid Soccer

Recommandé

28 December 2024

Un code par staticdata256

13 May 2026

Code source HTML5 du jeu Drive Mad

1 April 2026

GN-Math : Jeux débloqués, recherche et paramètres

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