鐵人檔案
大家好，我是機器人幽默研究員，簡稱機默 (Jim)，一名熱衷於前端開發和數據視覺化的工程師。今天，我想與大家分享一個 30 天的 side project 旅程，題目是「打造紐時風格的時間線小遊戲」。
為什麼選擇這個主題呢？紐約時報（New York Times）以其高質量的敘事和視覺效果聞名，特別是在他們的互動數據報導中。我一直對這種結合敘事和數據的方式感到著迷，並希望能夠模仿這種風格。
接下來30天，我將分享我所遇到的挑戰、解決方案，以及有趣的發現。
希望大家會喜歡這個旅程，也期待您的反饋和建議。讓我們一起學習和成長！
遊戲相關動畫盤點 遊戲進入頁背景動畫 (CSS 動畫) 遊戲教學提示動畫 (CSS 動畫) 時間軸拉伸 (CSS 動畫 + JS 操作) 卡片排序 (CSS...
在 寫可維護的程式 章節中，第五點原則提到了「讓程式碼可複用和可泛化」。今天，我們將著手開發功能，即將原有的 HTML 切版與 JavaScript 邏輯結合。...
在實現拖放功能時，我考慮了兩種主要方法：一是使用原生的 HTML5 拖放 API，另一是利用 touchstart 觸碰事件。綜合考慮後，我選擇了使用觸碰事件，...
代碼審查與反思 DOM 操作與資料驅動的反思 功能模組化與流程 觸控事件的優化 卡片排列與動畫優化 DOM 操作與資料驅動的反思 在當前的實現中，我們主要透...
HTML、CSS 與 JavaScript 解析 HTML 模板時間軸容器（timelineContainerEl）時間軸（timelineEl）提示（hin...
卡片提示與卡片區塊移動處理代碼解析 我使用一個叫 handleAnswerProcess 的函示，去包含會在作答的時候去處理作答相關的工作，但主要三大功能為...
HTML、CSS 與 JavaScript 解析 HTML 模板 JavaScript 邏輯 遊戲狀態紀錄資料 handleScore 程式碼解釋 St...
為了賦予未來程式碼更高的靈活性和可用性，我們試著釐清和優化某些關鍵環節。今日，將專注於以下三個核心議題進行深入的分析和調整： 在設計過程中，步驟計數應該是從...
今日我們將踏入這個專案最具挑戰性的階段。然而，在開始之前，大概可以想像就是一個卡片作答之後的重新排序。我們拆解工作流程大約是以下。首先，我們會進行初步的作答。接...
