q1k3/source/document.js

// Touch detection
is_touch = 'ontouchstart' in window;

document.body.innerHTML +=
	'<style>'+
		'*{font-family:sans-serif;}'+
		'a,body{color:#fff;background:#111;text-align:center;margin:0;}'+
		'#c{display:block;width:100%;image-rendering:optimizeSpeed;image-rendering:pixelated;max-height:100vh;object-fit:contain;}'+
		'#g{position:relative;margin:0 0 32px 0;font-weight:bold;}'+
		'#ts{position:absolute;bottom:2em;left:0;right:0;font-size:1.2vw;}'+
		'#msg{position:absolute;top:8vw;left:0;right:0;font-size:1.2vw;display:none;}'+
		'#a,#h{position:absolute;bottom:3%;left:20%;right:0;font-size:3.2vw;}'+
		'#h{left:-20%;}'+
		'h1{font-size:16vw;margin:0;}'+
		(is_touch ?
		'#ctrl{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}'+
		'#ctrl-left{position:absolute;bottom:18%;left:2%;width:28%;height:40%;pointer-events:auto}'+
		'#ctrl-right{position:absolute;top:0;right:0;width:70%;height:100%;pointer-events:auto}'+
		'#ctrl-actions{position:absolute;bottom:3%;right:2%;display:flex;gap:8px;pointer-events:auto}'+
		'.ctrl-btn{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);'+
			'border-radius:12px;color:rgba(255,255,255,0.5);font-size:18px;'+
			'display:flex;align-items:center;justify-content:center;'+
			'user-select:none;-webkit-user-select:none;touch-action:none}'+
		'.ctrl-btn:active{background:rgba(255,255,255,0.35)}'+
		'#btn-up{position:absolute;top:0;left:50%;transform:translateX(-50%);width:48px;height:48px}'+
		'#btn-down{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:48px}'+
		'#btn-left{position:absolute;left:0;top:50%;transform:translateY(-50%);width:48px;height:48px}'+
		'#btn-right{position:absolute;right:0;top:50%;transform:translateY(-50%);width:48px;height:48px}'+
		'.ctrl-shoot{width:64px;height:64px;border-radius:50%;font-size:24px}'+
		'.ctrl-prev,.ctrl-next{width:40px;height:40px;font-size:14px}'+
		'.ctrl-jump{width:52px;height:52px;border-radius:50%;font-size:20px}'+
		'#btn-fs{position:absolute;top:8px;right:8px;width:40px;height:40px;'+
			'background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);'+
			'border-radius:8px;color:#fff;font-size:20px;z-index:20;'+
			'display:flex;align-items:center;justify-content:center}'
		: '')+
	'</style>'+
	'<div id="g">'+
		'<canvas id=c width=320 height=180></canvas>'+
		'<div id="ts"><h1>Q1K3</h1>CLICK TO START</div>'+
		'<div id="h"></div><div id="a"></div>'+
		'<div id="msg"></div>'+
	'</div>'+
	'<p>MOUSE SPEED: <input id="m" type="range" value=10 min=1 max=50> INVERT: <input type="checkbox" id="mi"></p>'+
	'<p><input id="f" type="button" value="FULLSCREEN"></p>'+
	'<p>'+
		'code: <a href="https://phoboslab.org">phoboslab.org</a> / music: <a href="http://no-fate.net">no-fate.net</a>'+
	'</p>';