创建页面的不可查看部分

Question

如何阻止用户查看页面的某些部分。我的目标是在浏览器中制作一个巨大的迷宫（如此大，以至于路径与浏览器屏幕的宽度一样大）;用户必须使用滚动条或任何其他滚动方法进行导航，直到找到迷宫的结尾。制作迷宫不是挑战，但是为了防止用户越过边界，我遇到了麻烦。

我的思维过程是在页面上制作阻止用户继续沿特定方向移动的对象/区域。也许用户可以看到50px的块/区域，然后才能再进一步了？我从未见过这样做，我很想知道这是否可行。

提前致谢。任何帮助或建议将不胜感激。

Answer 1

也许这不是你想要的答案，但如果你有一些图形经验，你可以尝试使用three.js库来生成带有canvas或webgl的迷宫。您可以使用点光源来减轻迷宫的一小部分。其他部分可能会有类似“战争迷雾”的东西。

如果您对canvas / webgl不感兴趣，那么您可以尝试使用带有透明孔的叠加png图像。图像的宽度和高度必须是screen.height * 2 x screen.width * 2（不确定，但我就是这样看的）。那个图像应该在整个迷宫之上。除了透明区域之外，它将隐藏整个迷宫。你的起点应该在那个透明区域的中心。然后，您需要将该图像与用户输入（箭头键，鼠标等）一起移动。或者，你可以自己移动迷宫。这样，叠加图像可以具有屏幕分割。

这是我想到的两个选项。