fix: mobile entry click and add fullscreen button

- Delay virtual controls creation until after game starts (ctrl overlay
  was intercepting title screen touches)
- Add touchstart handler on game container for mobile entry
- Add fullscreen button overlay in top-right corner
- Hide title text after game starts
This commit is contained in:
Mai
2026-07-04 08:36:15 +08:00
parent dfb738f406
commit 3376c3e333
3 changed files with 38 additions and 6 deletions
+5 -1
View File
@@ -29,7 +29,11 @@ document.body.innerHTML +=
'#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}'
'.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">'+
+3 -2
View File
@@ -83,7 +83,8 @@ c.onmouseup = (ev) => {
// ─── Mobile virtual controls ───
if (is_touch) {
// Called from main.js after game start
create_touch_controls = () => {
let ctrl = document.createElement('div');
ctrl.id = 'ctrl';
ctrl.innerHTML =
@@ -148,5 +149,5 @@ if (is_touch) {
if (t.identifier === touch_id) touch_id = null;
}
});
}
};
+29 -2
View File
@@ -123,8 +123,28 @@ game_load = async () => {
requestAnimationFrame(run_frame);
f.onclick = () => g.requestFullscreen();
g.onclick = () => {
if (!is_touch) {
// Mobile: fullscreen button overlay in top-right
if (is_touch) {
let fs_btn = document.createElement('button');
fs_btn.id = 'btn-fs';
fs_btn.textContent = '⛶';
fs_btn.onclick = () => g.requestFullscreen();
document.getElementById('g').appendChild(fs_btn);
}
// Game start handler
let start_game = () => {
// Remove the entry handler so it only fires once
g.onclick = null;
if (g._touch_entry) {
g.removeEventListener('touchstart', g._touch_entry);
g._touch_entry = null;
}
if (is_touch) {
// Create virtual controls now that game is starting
create_touch_controls();
} else {
g.onclick = () => c.requestPointerLock();
g.onclick();
}
@@ -157,6 +177,13 @@ game_load = async () => {
game_init(0);
run_frame = game_run;
};
// Wire up game start: click for desktop, touch for mobile
g.onclick = start_game;
if (is_touch) {
g._touch_entry = (e) => { e.preventDefault(); start_game(); };
g.addEventListener('touchstart', g._touch_entry, {passive: false});
}
},
run_frame = (time_now) => {