Monkey Mart Game HTML5 Source Code

Open In Editor Video Publish Your Code

<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');
		}

Monkey Mart Game HTML5 Source Code

Recommended

Run 3 Game HTML Source Code

HTML CSS Navbar Code

Swordfight Unity WebGL Game HTML Template

HTML

CSS

JS

Recommended

Run 3 Game HTML Source Code

HTML CSS Navbar Code

Swordfight Unity WebGL Game HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS