創建頁面的不可查看部分

Question

如何防止用戶看到頁面的某些部分。我的目標是在瀏覽器中創建一個巨大的迷宮（如此之大，以至於瀏覽器的屏幕寬度都很大）。用戶必須使用滾動條或任何其他滾動方法進行導航，直到他們找到迷宮的末端。製作迷宮不是挑戰，但爲了防止用戶越過邊界就是我遇到麻煩的地方。

我的思考過程是讓頁面上的對象/區域阻止用戶繼續沿特定方向移動。也許用戶在他不能再進一步之前可以看到50px的塊/區域？我從來沒有見過這樣做，我很想知道這是否可能。

在此先感謝。任何幫助或建議將不勝感激。

Answer 1

也許這不會是你正在尋找這個問題的答案，但如果你對圖形的一些經驗，你可以嘗試使用three.js庫來產生用帆布或WebGL的迷宮。你可以使用點光源來減輕迷宮的一小部分。其他部分可能會有像「戰爭迷霧」之類的東西。

如果您對canvas/webgl不感興趣，那麼您可以嘗試使用帶有透明洞的疊加png圖像。圖像的寬度和高度必須是screen.height * 2 x screen.width * 2（不確定，但我是這麼看的）。這個形象應該在整個迷宮之上。它將隱藏整個迷宮，除了透明區域之外。你的出發點應該在這個透明區域的中心。然後，您需要將該圖像與用戶輸入（箭頭鍵，鼠標等）一起移動。或者，您可以移動迷宮本身。這種覆蓋圖像可以具有屏幕尺寸。

這些是我想到的兩種選擇。