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:
+5
-1
@@ -29,7 +29,11 @@ document.body.innerHTML +=
|
|||||||
'#btn-right{position:absolute;right: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-shoot{width:64px;height:64px;border-radius:50%;font-size:24px}'+
|
||||||
'.ctrl-prev,.ctrl-next{width:40px;height:40px;font-size:14px}'+
|
'.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>'+
|
'</style>'+
|
||||||
'<div id="g">'+
|
'<div id="g">'+
|
||||||
|
|||||||
+3
-2
@@ -83,7 +83,8 @@ c.onmouseup = (ev) => {
|
|||||||
|
|
||||||
// ─── Mobile virtual controls ───
|
// ─── Mobile virtual controls ───
|
||||||
|
|
||||||
if (is_touch) {
|
// Called from main.js after game start
|
||||||
|
create_touch_controls = () => {
|
||||||
let ctrl = document.createElement('div');
|
let ctrl = document.createElement('div');
|
||||||
ctrl.id = 'ctrl';
|
ctrl.id = 'ctrl';
|
||||||
ctrl.innerHTML =
|
ctrl.innerHTML =
|
||||||
@@ -148,5 +149,5 @@ if (is_touch) {
|
|||||||
if (t.identifier === touch_id) touch_id = null;
|
if (t.identifier === touch_id) touch_id = null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|||||||
+29
-2
@@ -123,8 +123,28 @@ game_load = async () => {
|
|||||||
requestAnimationFrame(run_frame);
|
requestAnimationFrame(run_frame);
|
||||||
|
|
||||||
f.onclick = () => g.requestFullscreen();
|
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 = () => c.requestPointerLock();
|
||||||
g.onclick();
|
g.onclick();
|
||||||
}
|
}
|
||||||
@@ -157,6 +177,13 @@ game_load = async () => {
|
|||||||
game_init(0);
|
game_init(0);
|
||||||
run_frame = game_run;
|
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) => {
|
run_frame = (time_now) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user