ChiefBradley/pico8_web-app.html

## pico8_web-app.html
<html>
<head>
	<title>Celeste ~ PICO-8</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, minimal-ui, initial-scale=1, maximum-scale=1, user-scalable=0">

<style>
	canvas#canvas {
		width: 100%;
	}

	html {
		padding:0;
		margin:0;
	}

	body {
		margin: 0;
	}

	#menu_container {
		display:flex;
		flex-flow:row nowrap;
	}

	.pico8_el {
		margin: 0;
		padding: 12px;
		text-align: center;
		color:#fff;
		background-color:#777;
		flex:1 1 auto;
	}

	.pico8_el a {
		text-decoration: none;
		color:#fff;
	}

	.pico8_el:hover {
		background-color:#aaa;
	}

	.pico8_el:link {
		background-color:#aaa;
	}

	canvas {
		image-rendering: optimizeSpeed;
		image-rendering: -moz-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: optimize-contrast;
		image-rendering: pixelated;
		-ms-interpolation-mode: nearest-neighbor;
		border: 0px
	}

	canvas#input {
		width: 100%;
		background: #303030;
	}
</style>
</head>

<!---->

<body bgcolor=#ffffff>

	<div>
		<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

		<div id="menu_container">
			<div class=pico8_el onclick="Module.pico8Reset();">
			 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Reset" width=24 height=24/>
			</div>

			<div class=pico8_el onclick="Module.pico8TogglePaused();">
				<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVR4Ae3doQ0AIAxEUWABLPtPh2WCq26DwFSU/JPNT166QSu/Hg86W9dwLte+diP7AwAAAAAAgD+A+jM2ZAgo84I0PgAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Pause" width=24 height=24/>
			</div>

			<div class=pico8_el onclick="Module.requestFullScreen(true, false);">
				<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dsQ1AIQhExfze1v2ns3UCrfgFhmgUUAoGgHscp21wX9BqaZoDojbB96OkDJKNcTN2BHTyYNYmoT2BlPL7BKgcPfHjAVXKKadkHOn9K1r16N0czN6a95N8mnA7Aq2fTZ3Af3UKmCSMazL8HwAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Fullscreen" width=24 height=24/>
			</div>

			<div class=pico8_el onclick="Module.pico8ToggleSound();">
			 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXklEQVR4Ae2doQ4AIQxD4YLH8v9fh+ULhjpxxSwLg2uyapr1JRu1iV5Z+1BGl4+xNpX38SYo2uRvYiT5LwEmt+ocgXVLrhPEgBiw8Q5w7/kueSkK+D2tJO4E/I3GrwkqQCBabEj/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Toggle Sound" width=24 height=24/>
			</div>

			<div class=pico8_el >
				<a target="_new" href="http://www.lexaloffle.com/bbs/?cat=7&sub=2">
					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAlElEQVR4Ae2dMQ5FQBCGh6jcwAkkateg3DiAa+iQUGqVKi95FQfAJRQOoHeBUf8JyQqKjZ1uMzuz2e/LTE3KhyF7kSlgLOykas23f6D+A9Yp84aAOYU15pcJnfji0Il2ID8HzC4y38ZrnfIBGxeRoR3c3EWrACdsV5BOsx7OSRnrOXh4F5HzA6bevwUn8wlz7eCDsQM99B3ks0s/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="More Carts" width=24 height=24/>
				</a>
			</div>
		</div>

		<canvas id="input"></canvas>

	</div>

<!---->

	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

			// show Emscripten environment where the canvas is arguments are passed to PICO-8

			var Module = {};
			Module.canvas = canvas;

				// When pico8_buttons is defined, PICO-8 takes each int to be a live bitfield representing the state of each player's buttons
				var pico8_buttons = [0, 0, 0, 0, 0, 0, 0, 0]; // max 8 players
				pico8_buttons[0] = 2 | 16; // example: player 0, RIGHT and Z held down

				// when pico8_gpio is defined, reading and writing to gpio pins will read and write to these values
				var pico8_gpio = new Array(128);

			// key blocker. prevent cursor keys from scrolling page while playing cart.
			function onKeyDown_blocker(event) {
				event = event || window.event;
				var o = document.activeElement;
				if (!o || o == document.body || o.tagName == "canvas") {
					if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1) {
						if (event.preventDefault) event.preventDefault();
					}
				}
			}

			document.addEventListener('keydown', onKeyDown_blocker, false);

			document.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, false);

		// re-size input area canvas to fit remaining space
		window.onload = window.onresize = function() {
			inpcanvas = document.getElementById("input");
			inpcanvas.width = window.innerWidth;
			inpcanvas.height = window.innerHeight;

			// draw the buttons
			var canvas = document.getElementById("input");
			var ctx = canvas.getContext("2d");
				ctx.fillStyle = "#fff0e8";

				// O button
				ctx.fillRect(14*20, 1*20, 5*20, 5*20);
				ctx.fillRect(13*20, 2*20, 7*20, 3*20);
				ctx.clearRect(15*20, 2*20, 3*20, 3*20);
				ctx.fillRect(16*20, 3*20, 1*20, 1*20);

				// X button
				ctx.fillRect(14*20, 7*20, 5*20, 5*20);
				ctx.fillRect(13*20, 8*20, 7*20, 3*20);
				ctx.clearRect(15*20, 8*20, 3*20, 3*20);
				ctx.fillRect(16*20, 8*20, 1*20, 1*20);
				ctx.fillRect(17*20, 9*20, 1*20, 1*20);
				ctx.fillRect(16*20, 10*20, 1*20, 1*20);
				ctx.fillRect(15*20, 9*20, 1*20, 1*20);

			document.addEventListener("touchstart", touchHandler);
			document.addEventListener("touchmove", touchHandler);

			// listen for touches, figure out what has been touched
			function touchHandler(e) {
				var dPad = false;
				var btnO = false;
				var btnX = false;

				if (e.touches) {
					if ((e.touches[0].pageX >= 260) && (e.touches[0].pageX <= 400)) {
						// check if O button is touched
						if ((e.touches[0].pageY >= 480) && (e.touches[0].pageY <= 580)) {
							btnO = true;
							}
						// check if X button is touched
						else if ((e.touches[0].pageY >= 600) && (e.touches[0].pageY <= 700)) {
							btnX = true;
						}
					}
					// check if dpad area is touched
					else {
						dPad = true;
					}

					// print touchHandler results to console for debugging
					console.log(dPad + ", " + btnO + ", " + btnX);
				}
			}
		};
	</script>

	<script async type="text/javascript" src="celeste.js"></script>
</body>
</html>
	<html>
	<head>
	<title>Celeste ~ PICO-8</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, minimal-ui, initial-scale=1, maximum-scale=1, user-scalable=0">

	<style>
	canvas#canvas {
	width: 100%;
	}

	html {
	padding:0;
	margin:0;
	}

	body {
	margin: 0;
	}

	#menu_container {
	display:flex;
	flex-flow:row nowrap;
	}

	.pico8_el {
	margin: 0;
	padding: 12px;
	text-align: center;
	color:#fff;
	background-color:#777;
	flex:1 1 auto;
	}

	.pico8_el a {
	text-decoration: none;
	color:#fff;
	}

	.pico8_el:hover {
	background-color:#aaa;
	}

	.pico8_el:link {
	background-color:#aaa;
	}

	canvas {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
	border: 0px
	}

	canvas#input {
	width: 100%;
	background: #303030;
	}
	</style>
	</head>

	<!---->

	<body bgcolor=#ffffff>

	<div>
	<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

	<div id="menu_container">
	<div class=pico8_el onclick="Module.pico8Reset();">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Reset" width=24 height=24/>
	</div>

	<div class=pico8_el onclick="Module.pico8TogglePaused();">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVR4Ae3doQ0AIAxEUWABLPtPh2WCq26DwFSU/JPNT166QSu/Hg86W9dwLte+diP7AwAAAAAAgD+A+jM2ZAgo84I0PgAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Pause" width=24 height=24/>
	</div>

	<div class=pico8_el onclick="Module.requestFullScreen(true, false);">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dsQ1AIQhExfze1v2ns3UCrfgFhmgUUAoGgHscp21wX9BqaZoDojbB96OkDJKNcTN2BHTyYNYmoT2BlPL7BKgcPfHjAVXKKadkHOn9K1r16N0czN6a95N8mnA7Aq2fTZ3Af3UKmCSMazL8HwAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Fullscreen" width=24 height=24/>
	</div>

	<div class=pico8_el onclick="Module.pico8ToggleSound();">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXklEQVR4Ae2doQ4AIQxD4YLH8v9fh+ULhjpxxSwLg2uyapr1JRu1iV5Z+1BGl4+xNpX38SYo2uRvYiT5LwEmt+ocgXVLrhPEgBiw8Q5w7/kueSkK+D2tJO4E/I3GrwkqQCBabEj/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Toggle Sound" width=24 height=24/>
	</div>

	<div class=pico8_el >
	<a target="_new" href="http://www.lexaloffle.com/bbs/?cat=7&sub=2">
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAlElEQVR4Ae2dMQ5FQBCGh6jcwAkkateg3DiAa+iQUGqVKi95FQfAJRQOoHeBUf8JyQqKjZ1uMzuz2e/LTE3KhyF7kSlgLOykas23f6D+A9Yp84aAOYU15pcJnfji0Il2ID8HzC4y38ZrnfIBGxeRoR3c3EWrACdsV5BOsx7OSRnrOXh4F5HzA6bevwUn8wlz7eCDsQM99B3ks0s/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="More Carts" width=24 height=24/>
	</a>
	</div>
	</div>

	<canvas id="input"></canvas>

	</div>

	<!---->

	<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	// show Emscripten environment where the canvas is arguments are passed to PICO-8

	var Module = {};
	Module.canvas = canvas;

	// When pico8_buttons is defined, PICO-8 takes each int to be a live bitfield representing the state of each player's buttons
	var pico8_buttons = [0, 0, 0, 0, 0, 0, 0, 0]; // max 8 players
	pico8_buttons[0] = 2 \| 16; // example: player 0, RIGHT and Z held down

	// when pico8_gpio is defined, reading and writing to gpio pins will read and write to these values
	var pico8_gpio = new Array(128);

	// key blocker. prevent cursor keys from scrolling page while playing cart.
	function onKeyDown_blocker(event) {
	event = event \|\| window.event;
	var o = document.activeElement;
	if (!o \|\| o == document.body \|\| o.tagName == "canvas") {
	if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1) {
	if (event.preventDefault) event.preventDefault();
	}
	}
	}

	document.addEventListener('keydown', onKeyDown_blocker, false);

	document.addEventListener('touchmove', function(e) {
	e.preventDefault();
	}, false);

	// re-size input area canvas to fit remaining space
	window.onload = window.onresize = function() {
	inpcanvas = document.getElementById("input");
	inpcanvas.width = window.innerWidth;
	inpcanvas.height = window.innerHeight;

	// draw the buttons
	var canvas = document.getElementById("input");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#fff0e8";

	// O button
	ctx.fillRect(1420, 120, 520, 520);
	ctx.fillRect(1320, 220, 720, 320);
	ctx.clearRect(1520, 220, 320, 320);
	ctx.fillRect(1620, 320, 120, 120);

	// X button
	ctx.fillRect(1420, 720, 520, 520);
	ctx.fillRect(1320, 820, 720, 320);
	ctx.clearRect(1520, 820, 320, 320);
	ctx.fillRect(1620, 820, 120, 120);
	ctx.fillRect(1720, 920, 120, 120);
	ctx.fillRect(1620, 1020, 120, 120);
	ctx.fillRect(1520, 920, 120, 120);

	document.addEventListener("touchstart", touchHandler);
	document.addEventListener("touchmove", touchHandler);

	// listen for touches, figure out what has been touched
	function touchHandler(e) {
	var dPad = false;
	var btnO = false;
	var btnX = false;

	if (e.touches) {
	if ((e.touches[0].pageX >= 260) && (e.touches[0].pageX <= 400)) {
	// check if O button is touched
	if ((e.touches[0].pageY >= 480) && (e.touches[0].pageY <= 580)) {
	btnO = true;
	}
	// check if X button is touched
	else if ((e.touches[0].pageY >= 600) && (e.touches[0].pageY <= 700)) {
	btnX = true;
	}
	}
	// check if dpad area is touched
	else {
	dPad = true;
	}

	// print touchHandler results to console for debugging
	console.log(dPad + ", " + btnO + ", " + btnX);
	}
	}
	};
	</script>

	<script async type="text/javascript" src="celeste.js"></script>
	</body>
	</html>
No results found