Canvas de jeu HTML5 avec Construct 2 Runtime

750 iroger7

Ouvrir dans l'éditeur Publiez votre code

Canvas de jeu HTML5 avec Construct 2 Runtime

Recommandé

23 July 2024

Connectez-vous avec inscription

19 May 2026

Charger du code HTML et des scripts externes via l'API Fetch

10 July 2025

Exemple d'écran de chargement animé CSS HTML

HTML

<div id="c2canvasdiv" style="width: 987px; height: 555px; margin-left: 0px; margin-top: 187px;">
<canvas height="555" id="c2canvas" width="987" style="width: 987px; height: 555px;">
<h1>Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. <a href="http://www.whatbrowser.org">What is a browser?</a>
<br><br><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br>
<a href="http://www.google.com/chrome/">Google Chrome</a><br>
<a href="http://www.apple.com/safari/download/">Apple Safari</a></h1>
</canvas>
<canvas width="987" height="555" style="width: 987px; height: 555px; top: 187px; left: 0px; position: absolute;"></canvas></div>
<script src="https://cdn.jsdelivr.net/gh/bubbls/ruffle@27b6c35b8b4c4b1bc73bc09ce01c9a6d7dba0e5d/2min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bubbls/ruffle@27b6c35b8b4c4b1bc73bc09ce01c9a6d7dba0e5d/runtimee.js"></script>
<script>
		// Start the Construct 2 project running on window load.
		jQuery(document).ready(function ()
		{			
			// Create new runtime using the c2canvas
			cr_createRuntime("c2canvas");
		});
		
		// Pause and resume on page becoming visible/invisible
		function onVisibilityChanged() {
			if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)
				cr_setSuspended(true);
			else
				cr_setSuspended(false);
		};
		
		document.addEventListener("visibilitychange", onVisibilityChanged, false);
		document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);
		document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
		document.addEventListener("msvisibilitychange", onVisibilityChanged, false);
		
		function OnRegisterSWError(e)
		{
			console.warn("Failed to register service worker: ", e);
		};
		
		// Runtime calls this global method when ready to start caching (i.e. after startup).
		// This registers the service worker which caches resources for offline support.
		window.C2_RegisterSW = function C2_RegisterSW()
		{
			if (!navigator.serviceWorker)
				return;		// no SW support, ignore call
			
			try {
				navigator.serviceWorker.register("sw.js", { scope: "./" })
				.then(function (reg)
				{
					console.log("Registered service worker on " + reg.scope);
				})
				.catch(OnRegisterSWError);
			}
			catch (e)
			{
				OnRegisterSWError(e);
			}
		};
    </script>

CSS