tiny-pico8-touch-ui
Version:
A tiny library which makes it easy to add touch controls to your PICO-8 web game
193 lines (147 loc) • 5.7 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Btn Test</title>
<meta name="description" content="Btn Test">
<STYLE TYPE="text/css">
<!--
html {
background-color: #83769c;
color: #ffec27;
}
button {
font-size: 20px;
background-color: #ffec27;
}
canvas {
width: 256px;
height: 256px;
}
@media screen and (min-width: 382px) and (min-height: 382px) {
canvas {
width: 384px;
height: 384px;
}
}
@media screen and (min-width: 514px) and (min-height: 514px) {
canvas {
width: 512px;
height: 512px;
}
}
.pico8_el {
float:left;
width:92px;
display:inline-block;
margin: 1px;
padding: 4px;
text-align: center;
color:#fff;
background-color:#777;
font-family : verdana;
font-size: 9pt;
cursor: pointer;
cursor: hand;
}
.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
}
-->
</STYLE>
</head>
<body>
<br><br><br>
<center><div style="width:512px;">
<h1>Try this on a phone!</h1>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<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);
*/
</script>
<script async type="text/javascript" src="index.js"></script>
<script>
// 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);
</script>
<br>
<div class=pico8_el onclick="Module.pico8Reset();">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Reset" width=12 height= 12/>
Reset</div>
<div class=pico8_el onclick="Module.pico8TogglePaused();">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVR4Ae3doQ0AIAxEUWABLPtPh2WCq26DwFSU/JPNT166QSu/Hg86W9dwLte+diP7AwAAAAAAgD+A+jM2ZAgo84I0PgAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Pause" width=12 height=12/>
Pause</div>
<div class=pico8_el onclick="Module.requestFullScreen(true, false);">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dsQ1AIQhExfze1v2ns3UCrfgFhmgUUAoGgHscp21wX9BqaZoDojbB96OkDJKNcTN2BHTyYNYmoT2BlPL7BKgcPfHjAVXKKadkHOn9K1r16N0czN6a95N8mnA7Aq2fTZ3Af3UKmCSMazL8HwAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Fullscreen" width=12 height=12/>
Fullscreen</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=12 height=12/>
Sound</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=12 height=12/>
Carts</a></div>
<br>
<div style="margin-top: 2rem">
<button id="left"> < </button>
<button id="right"> > </button>
<button id="up"> /\ </button>
<button id="down"> \/ </button>
<button id="o"> O </button>
<button id="x"> X </button>
</div>
<p>
(Keyboard still works, too.)
</p>
</div></center>
<br><br>
<script src="tiny-pico8-touch-ui.js"></script>
<script>
registerP8Btn(document.getElementById('left'), 0);
registerP8Btn(document.getElementById('right'), 1);
registerP8Btn(document.getElementById('up'), 2);
registerP8Btn(document.getElementById('down'), 3);
registerP8Btn(document.getElementById('o'), 4);
registerP8Btn(document.getElementById('x'), 5);
</script>
</body></html>