如何防止HTML游戏意外历史滑回导航？

Question

我正在开发一个包含游戏的网站。该网站还可以在移动设备上使用 Chrome、Firefox 和 Safari 进行播放。

它们是画布浏览器游戏，您可以用手指来玩游戏。

由于画布是方形的，因此它通常会占据移动设备的整个视口宽度。

玩游戏时，将手指放在屏幕上并做出各种滑动手势是很常见的。结果，有时我的用户不小心向后滑动，游戏就结束了。

也就是说，他们可能将手指放在屏幕的左侧或右侧并向内移动，移动浏览器检测到这是“向后滑动”手势，并立即关闭游戏并返回到上一页。

这对我的用户来说是极其令人沮丧。有什么办法可以禁用这个吗？我在这里搜索，“防止浏览器返回”的解决方案似乎都不起作用，并且使游戏全屏显示也不是真正的选择，因为游戏应该在查看网站的其余部分时玩（它们是迷你游戏）。

另外，我也不想使用

onbeforeunload

警告框，因为玩小游戏时弹出这个警告框很烦人。如果可能的话，我只想在他们玩这些迷你游戏时禁用向后滑动手势。

Answer 1

尝试使用 Javascript 添加触摸事件的事件侦听器。这将用于拦截滑动操作并防止滑动触发向后滑动操作。处理浏览器的

touchstart

、

touchmove

和

touchend

事件。

示例：

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

let xBot= null; 
let yBot = null;

function handleTouchStart(e) {                                         
    xBot = e.touches[0].clientX;                                      
    yBot = e.touches[0].clientY;                                      
};                                                

function handleTouchMove(e) {
    if (!xBot || !yBot ) {
        return;
    }

    let xTop = e.touches[0].clientX;                                    
    let yTop = e.touches[0].clientY;

    let xDiff = xBot - xUp;
    let yDiff = yBot - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
            e.preventDefault(); // Prevents swipe back action
        } else {
            /* right swipe */
            e.preventDefault(); // Prevents swipe back action
        }                       
    } 
    /* reset values */
    xBot = null;
    yBot = null;                                             
};         

我还建议你使用 iFrames， 尝试将游戏画布嵌入 iFrame 中。这将成为创建沙盒环境的基础，该环境将使滑动行为停止在您的浏览器上传播。