mai/q1k3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mobile virtual touch controls

Browse Source 
- 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
This commit is contained in:
Mai
2026-07-04 08:23:39 +08:00
parent b8cfe6ec32
commit dfb738f406
4 changed files with 324 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/document.js
+22 -1
View File
@@ -1,4 +1,7 @@
// Touch detection
is_touch = 'ontouchstart' in window;
document.body.innerHTML +=
'<style>'+
'*{font-family:sans-serif;}'+
@@ -10,6 +13,24 @@ document.body.innerHTML +=
'#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>'+
@@ -21,4 +42,4 @@ document.body.innerHTML +=
'<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>';
'</p>';