在網頁中打造微型世界：Playground 像素藝術與尋路實作

Thu, 26 Feb 2026 00:00:00 +0000

在網頁中打造微型世界：Playground 像素藝術與尋路實作

前陣子 coding 時看到 github 上面一個有趣的專案叫做 Pixel Agents，能夠把 AI coding 時，將 agent 模擬成像素風格的小人物，並把處理過程模擬成在辦公室工作的樣子，看起來很可愛😆，也因為我很喜歡像素風格，就想說能不能在自己的網站也呈現類似的感覺，於是就有了這個 Playground。

這篇文章將會分享這個小天地背後的實作細節，包含如何用 HTML5 Canvas 渲染出銳利的像素畫、角色狀態的設計，以及他們是如何在房間內找到路徑（BFS 尋路演算法）的。

場景素材則是來自 Modern Interiors。

🎨 核心架構設計：Canvas 與銳利的像素

整個 Playground 的基礎是建立在 HTML5 的 <canvas> 標籤上。為了忠實呈現早期遊戲機那種清晰的「顆粒感」，我們必須確保圖片放大後不會變得模糊。

在繪圖素材上，角色的單格尺寸其實非常小，僅有 16x32 像素（寬 16 像素，高 32 像素），而基礎的地磚區塊大小 (Tile Size) 則是 16x16 像素。

如果我們直接把畫布依原尺寸顯示在網頁上，由於現代螢幕解析度極高，使用者可能要拿放大鏡才看得到角色。因此，我們需要在 CSS 中把它放大：

#playgroundCanvas {
    width: 832px;     /* 原始寬度 416 放大了兩倍 */
    height: 480px;    /* 原始高度 240 放大了兩倍 */
    max-width: 100%;
    image-rendering: pixelated; /* 關鍵：保持像素銳利邊緣 */
    image-rendering: crisp-edges;
}

透過 image-rendering: pixelated;，瀏覽器在縮放 Canvas 時會使用最近鄰插值 (Nearest-neighbor interpolation)，從而保留了我們想要的 8-bit 復古感。

Canvas on Wayne X.Y. Blog

在網頁中打造微型世界：Playground 像素藝術與尋路實作

在網頁中打造微型世界：Playground 像素藝術與尋路實作

🎨 核心架構設計：Canvas 與銳利的像素