mai
dfb738f406
- document.js: add is_touch detection and virtual button CSS - input.js: create virtual D-pad + action buttons + touch drag camera - main.js: skip Pointer Lock on touch devices
46 lines
2.5 KiB
JavaScript
46 lines
2.5 KiB
JavaScript
|
|
// 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}'
|
|
: '')+
|
|
'</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>';
|