Código fuente HTML5 del juego Monkey Mart

2,172 iroger7

Abrir en el editor Publica tu código

Código fuente HTML5 del juego Monkey Mart

Recomendado

26 January 2025

Un código de Redllowge

15 April 2026

una pequeña copa del mundo

10 December 2025

Juego de ping pong retro con JavaScript en HTML5 Canvas

HTML

<!doctype html>
<html lang="en">

<head>
	<base href="https://cdn.jsdelivr.net/gh/genizy/monkey-mart-mobile@89836e4c54e87739ace84f6fe801b423185cc51d/">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="robots" content="noindex, nofollow">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	
	<title>Monkey Mart</title>
	<style type="text/css">
		/* Disable user selection to avoid strange bug in Chrome on Windows:
	* Selecting a text outside the canvas, then clicking+draging would
	* drag the selected text but block mouse down/up events to the engine.
	*/
		body {

position: fixed;
			/* Prevent overscroll */

margin: 0;
			padding: 0;
		}

.canvas-app-container {
			width: 100%;
			height: 100%;
			position: absolute;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

.canvas-app-container:-webkit-full-screen {
			/* Auto width and height in Safari/Chrome fullscreen. */
			width: auto;
			height: auto;
		}

#canvas {
			outline: none;
			border: 0;
			width: 100%;
			vertical-align: bottom;
		}

#canvas-container {
			position: relative;
		}

canvas:focus,
		canvas:active {
			outline: none;
			border: 0;
			ie-dummy: expression(hideFocus=true);
			-moz-outline-style: none;
		}

div {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

.banner-styleBottom {
			margin: 0 auto;
			position: fixed;
			bottom: 0;
			display: block;
			left: 50%;
			transform: translateX(-50%);
		}

.banner-styleTop {
			margin: 0 auto;
			position: fixed;
			top: 0;
			display: block;
			left: 50%;
			transform: translateX(-50%);
		}

.canvas-app-progress {
			position: absolute;
			background-color: #0A8A40;
			height: 30px;
			margin-top: -30px;
			width: 100%;
		}

.canvas-app-progress-bar {
			font-size: 12px;
			height: 30px;
			color: rgb(255, 255, 255);
			background-color: #FFE333;
			text-align: center;
			line-height: 20px;
		}

.link,
		.button {
			font-family: sans-serif;
			font-size: 14px;
			font-weight: normal;
			font-style: normal;
			font-stretch: normal;
			line-height: normal;
			letter-spacing: 0px;
			padding-top: 12px;
		}

.buttons-background {
			background-color: #ffffff;
			width: 100%;
			height: 42px;
		}

body {
			background-color: #ffffff;
		}

.canvas-app-container {
			background: #00BB61;
			/* background: -moz-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
		background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,252,255,1)), color-stop(50%, rgba(250,252,255,1)), color-stop(50%, rgba(245,249,255,1)), color-stop(100%, rgba(245,249,255,1)));
		background: -webkit-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
		background: -o-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
		background: -ms-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
		background: linear-gradient(135deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafcff', endColorstr='#f5f9ff', GradientType=1 ); */
		}

.canvas-app-canvas {
			background-repeat: no-repeat;
			background-position: center;

background-position: top;
			background-size: cover;
			background-image: url("bg_loading.png");

}
	</style>
	<script src="patch/js/poki-sdk.js"></script>
</head>

<body>
	<div id="app-container" class="canvas-app-container">
		<div id="canvas-container" class="canvas-app-canvas-container">
			<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="960" height="640"></canvas>
		</div>
		<div class="buttons-background">
		</div>
		
		<div id="progress-bar-root" style="position: absolute; bottom: 16%; left: 50%; visibility: hidden; z-index: 4;">
			
			<img id="progress-bar-bg" src="load_bar_bg.png">
			<img id="progress-bar-fg" src="load_bar_fg.png" style="position:absolute; clip: rect(0px,0px,0px,0px);">
		</div>
	</div>
	
	
	
	
	<script id="engine-loader" type="text/javascript" src="dmloader.js"></script>
	
	<script id="engine-setup" type="text/javascript">
		var extra_params = {
			archive_location_filter: function (path) {
				return ("archive" + path + "");
			},
			engine_arguments: ["--verify-graphics-calls=false",],
			custom_heap_size: 134217728,
			full_screen_container: "#canvas-container",
			disable_context_menu: true
		}

Module['INITIAL_MEMORY'] = extra_params.custom_heap_size;

Module['onRuntimeInitialized'] = function () {
			Module.runApp("canvas", extra_params);
		};

Module["locateFile"] = function (path, scriptDirectory) {
			// dmengine*.wasm is hardcoded in the built JS loader for WASM,
			// we need to replace it here with the correct project name.
			if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
				path = "MonkeyMart.wasm";
			}
			return scriptDirectory + path;
		};

var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
		var buttonHeight = 0;
		var prevInnerWidth = -1;
		var prevInnerHeight = -1;

function resize_game_canvas() {
			// Hack for iOS when exit from Fullscreen mode
			if (is_iOS) {
				window.scrollTo(0, 0);
			}

var app_container = document.getElementById('app-container');
			var game_canvas = document.getElementById('canvas');
			var progress_bar_root = document.getElementById('progress-bar-root');
			var progress_bar_fg = document.getElementById('progress-bar-fg');
			var progress_bar_bg = document.getElementById('progress-bar-bg');
			var innerWidth = window.innerWidth;
			var innerHeight = window.innerHeight - buttonHeight;
			if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight) {
				return;
			}
			prevInnerWidth = innerWidth;
			prevInnerHeight = innerHeight;
			var width = 960;
			var height = 640;
			var targetRatio = width / height;
			var actualRatio = innerWidth / innerHeight;

//Stretch
			width = innerWidth;
			height = innerHeight;

app_container.style.width = width + "px";
			app_container.style.height = height + buttonHeight + "px";
			game_canvas.width = width;
			game_canvas.height = height;

// progress bar
			var bar_h = width < height ? width : height;
			progress_bar_bg.width = Math.min(Math.ceil(bar_h * 0.06 * 300 / 24), width * 0.8);

progress_bar_bg.style.marginLeft = - progress_bar_bg.width / 2 + "px";
			progress_bar_fg.width = Math.ceil(progress_bar_bg.width * 1);

progress_bar_fg.style.marginTop = (progress_bar_bg.width * 0) * (0) / 2 + "px";
			progress_bar_fg.style.marginLeft = -progress_bar_bg.width / 2 - progress_bar_fg.width / 2 + "px";

// progress_bar_text.style.fontSize = Math.ceil(bar_h * 0.10) + "px";
			progress_bar_root.style.bottom = Math.ceil(height * 0.08 + buttonHeight) + "px";
		}
		resize_game_canvas();
		window.addEventListener('resize', resize_game_canvas, false);
		window.addEventListener('orientationchange', resize_game_canvas, false);
		// window.addEventListener('wheel', e => e.preventDefault(), { passive: false });
		window.addEventListener("keydown", function (e) {
			if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
				e.preventDefault();
			}
		}, false);
		window.addEventListener('focus', resize_game_canvas, false);

// 
		// HashSHA1 implementation
		!function () { var r = function (r) { for (var n = "", t = 7; t >= 0; t--)n += "0123456789abcdef".charAt(r >> 4 * t & 15); return n }, n = function (r, n) { var t = (65535 & r) + (65535 & n); return (r >> 16) + (n >> 16) + (t >> 16) << 16 | 65535 & t }, e = function (r, n) { return r << n | r >>> 32 - n }, o = function (r, n, t, e) { return r < 20 ? n & t | ~n & e : r < 40 ? n ^ t ^ e : r < 60 ? n & t | n & e | t & e : n ^ t ^ e }, u = function (r) { return r < 20 ? 1518500249 : r < 40 ? 1859775393 : r < 60 ? -1894007588 : -899497514 }; window._HashSHA1 = function (f) { for (var a = function (r) { for (var n = 1 + (r.length + 8 >> 6), t = new Array(16 * n), e = 0; e < 16 * n; e++)t[e] = 0; for (e = 0; e < r.length; e++)t[e >> 2] |= r.charCodeAt(e) << 24 - e % 4 * 8; return t[e >> 2] |= 128 << 24 - e % 4 * 8, t[16 * n - 1] = 8 * r.length, t }(f), c = new Array(80), i = 1732584193, h = -271733879, v = -1732584194, A = 271733878, g = -1009589776, l = 0; l < a.length; l += 16) { for (var w = i, d = h, y = v, H = A, b = g, s = 0; s < 80; s++)c[s] = s < 16 ? a[l + s] : e(c[s - 3] ^ c[s - 8] ^ c[s - 14] ^ c[s - 16], 1), t = n(n(e(i, 5), o(s, h, v, A)), n(n(g, c[s]), u(s))), g = A, A = v, v = e(h, 30), h = i, i = t; i = n(i, w), h = n(h, d), v = n(v, y), A = n(A, H), g = n(g, b) } return r(i) + r(h) + r(v) + r(A) + r(g) } }();
		//

if (Module._archiveLoaded) {
				// 
			}
			old_preloadAndCallMain();
		};
	</script>
	<script id="engine-start" type="text/javascript">
		var currentPercentage = 0

Progress.updateProgress = function (percentage) {
			Progress.notifyListeners(percentage);
			if (currentPercentage > percentage) {
				percentage = currentPercentage
			}
			currentPercentage = percentage
			// var progress_bar_text = document.getElementById('progress-bar-text');
			// progress_bar_text.innerHTML  = "<b>" +  Math.ceil(percentage) + "%</b>";

var fg = document.getElementById('progress-bar-fg');
			fg.style.clip = "rect(0px," + fg.width * percentage / 100 + "px," + fg.height + "px," + "0px)"

if (isNaN(percentage)) {
				var progress_bar_root = document.getElementById('progress-bar-root');
				progress_bar_root.style.visibility = "hidden";
			}
		};
		Progress.addProgress = function () {
			var progress_bar_root = document.getElementById('progress-bar-root');
			progress_bar_root.style.visibility = "visible"
		}
		Progress.removeProgress = function () {
			var progress_bar_root = document.getElementById('progress-bar-root');
			progress_bar_root.style.visibility = "hidden";
			// Remove any background/splash image that was set in runApp().
			// Workaround for Safari bug DEF-3061.
			Module.canvas.style.background = "";
		}

EngineLoader.stream_wasm = "false" === "true";
		EngineLoader.load("canvas", "MonkeyMart");
	</script>
	<script type="text/javascript">
		function poki_showBanner(vBanner) {
			PokiSDK.displayAd(document.getElementById(vBanner), '320x50');
		}

function poki_showBigBanner(vBanner) {
			PokiSDK.displayAd(document.getElementById(vBanner), '728x90');
		}

CSS