Canvas de jeu HTML5 avec Construct 2 Runtime

611 iroger7

Ouvrir dans l'éditeur Publiez votre code

Canvas de jeu HTML5 avec Construct 2 Runtime

Recommandé

8 November 2025

Exemple de code simple pour une calculatrice HTML

13 March 2026

Code HTML5 du jeu de puzzle Block Blast

15 May 2026

Code source HTML5 du jeu Drive Mad

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