夢 -蒸氣波- 2.0

本片亮點特色

• 視窗式介面

  仿照作業系統的操作方式，每個介紹頁面都是可以操作的獨立視窗介面。

• 午夜電台

  以瀏覽器原生的 Audio API 實作的音樂播放器，可以切換曲目，一邊逛一邊聽音樂。

• 三語切換

  系統語言可切換繁中、簡中與英文。

幕後花絮難題與解法

1. 01 視窗不能被拖出可視範圍

   難題

   拖曳視窗時要計算視窗位置與畫面邊界，避免視窗被拖到可視範圍之外。

   解法

   借助 AI 推導邊界計算並調整參數，降低算錯的風險。拖曳中容易忽略的底層細節，則交給 interact.js 處理。

2. 02 瀏覽器縮放後視窗定位錯亂

   難題

   使用者調整瀏覽器大小後，視窗若不重新計算，就無法在新的尺寸下正確定位，拖曳時會出現不可預期的錯誤。

   解法

   以 debounce 等使用者停止調整尺寸，再透過 :key 重新建立視窗並置中，讓使用者自行拖回想要的位置。使用者很少反覆縮放，比起按比例換算位置，這個做法簡單又可靠。

3. 03 點擊的視窗要疊到最上層

   難題

   要像作業系統一樣，點到哪個視窗，哪個視窗就移到最上層。

   解法

   記錄目前最大的 z-index，視窗被點擊時設為最大值加一。z-index 上限是 2147483647，正常使用幾乎不可能用完。