JavaScript on Wayne X.Y. Blog

VocabularyTest：打造自己的英文單字練習工具

Tue, 05 May 2026 00:00:00 +0000

為什麼做這個工具？

學英文最痛的環節大概就是背單字。市面上有不少 App 可以用，但總覺得少了點什麼——要嘛廣告太多，要嘛介面複雜，要嘛沒辦法塞進自己想練的詞彙。

所以我乾脆自己做一個。

VocabularyTest 是我最近完成的 Side Project，一個輕量的英文單字測驗網頁應用，目標很簡單：打開就能練，練完就能走。

主要功能

題數選擇：開始測驗前可選擇 10、20、30 題或全部單字
即時回饋：每題作答後，正確選項變綠色，答錯的選項變橘紅色，立刻知道哪裡錯
錯題複習：測驗結束後，若答錯 4 題以上可進入錯題重測，針對弱點加強
單字列表：切換到 📋 頁籤可瀏覽所有單字，支援關鍵字搜尋、詞性篩選、A–Z / Z–A 排序，以及列表 / 格狀兩種顯示模式

如何匯入單字

應用程式讀取 .md 或 .txt 格式的檔案，每一筆單字須依照以下格式撰寫：

- **單字**，[音標]，詞性，中文意思

實際範例：

- **absolute**，[ˈæb.sə.luːt]，adj，絕對的、完全的
- **ambiguous**，[æmˈbɪɡ.ju.əs]，adj，模糊的、不明確的

中文全形逗號 ， 與英文半形逗號 , 都可辨識，格式相當彈性。整理好單字檔後，直接上傳到網頁即可開始測驗。

技術架構

整個專案以純前端實作，部署在 Cloudflare Pages 上。單字解析、測驗邏輯與介面渲染各自拆分成獨立模組（parser.js、quiz.js、ui.js），方便日後維護與擴充。

試試看

直接前往：vocabulary-test.wayne-xy.com

在 Hugo 部落格中加入互動式旅行地圖 (Leaflet + JSON)

Tue, 10 Mar 2026 00:00:00 +0000

在 Hugo 部落格中加入互動式旅行地圖 (Leaflet + JSON)

最近想在部落格的 Travel 頁面頂部加上一個可以標記去過哪些地方的互動式地圖，幾經思考後決定使用開源且輕量的 Leaflet.js，搭配自訂的 JSON 檔案來管理景點和顏色。

🗺️ 實作目標

在 /life/travel 的頂部固定一個地圖，顯示去過的國家與地點。
透過 JSON 檔案集中管理景點資料 (包含中英文名稱、經緯度、以及專屬顏色)。
使用 Leaflet.js 渲染地圖，並根據 JSON 自動計算邊界縮放 (fitBounds) 以容納所有標記。
將地圖封裝成 Hugo Shortcode 方便在不同語系頁面重複使用。

💾 建立資料檔 (Data Layer)

首先，在 Hugo 專案的 data/ 目錄下建立一個 travel.json，之後如果有新增旅程，只要修改這裡就可以，不用動到程式碼：

在網頁中打造微型世界：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 復古感。