鐵人檔案
這次挑戰將在30天內，使用 HTML、CSS、JavaScript 以及現代前端工具（例如：React/Vue/SASS）打造一個完全前端的小遊戲網站。
每天記錄設計與開發過程，從遊戲概念發想、版型切割、角色與場景動畫、RWD響應式設計，到最終部署到 GitHub Pages/Netlify，呈現一款可線上遊玩的網頁遊戲。
全程不使用任何後端服務，純粹依靠前端技術實現完整遊戲體驗，展現 Modern Web 的互動魅力。
Day 1｜挑戰開始 & 認識前端開發工具 今天是我參加 iT 邦幫忙 30 天鐵人賽的第一天！這次挑戰的主題是「30 天打造純前端小遊戲網站」，全程只...
Day 2 — 遊戲靈感蒐集 翻牌遊戲（Memory / Matching Game）玩法概念：玩家需要翻開兩張卡片，找出相同圖案，直到所有卡片配對完成。核心...
Day 3 — 前端基礎複習 主題：DOM 操作、事件監聽、CSS 動畫概念目標：在開始實作遊戲前，重新複習前端的核心技能，確保之後能順利操作網頁元素、觸發互動...
Day 4｜RWD 認識：響應式設計的基本觀念與常見技巧 在開始正式實作之前，今天想深入整理一下前端開發中非常重要的概念——RWD (Responsive We...
Day 5 — 前端動畫技巧 主題：CSS transition、transform、keyframes 概念目標：深入了解前端動畫的核心技巧，掌握如何用 CS...
Day 6 — 遊戲規則討論 主題：決定最終遊戲類型與基本規則目標：今天的主要任務是明確遊戲方向，確定最終開發的小遊戲類型，並深入規劃遊戲的基本規則與核心玩法。...
Day 7 — 網站流程圖目標：今天的核心任務是繪製整個小遊戲網站的流程圖 (Flow Chart)，從首頁到遊戲開始再到結算畫面，全面梳理使用者在網站中的操作...
Day 8 — 介面草圖 主題：手繪或 Figma 畫出主要版面目標：今天的任務是將昨天的網站流程圖轉化為更具體的「介面草圖 (Wireframe)」，無論是用...
Day 9色彩與字體：確定配色方案、字體風格與整體氛圍今天的工作是為遊戲網站建立完整的視覺識別系統，這是一個會影響玩家第一印象的關鍵步驟。無論我們的遊戲是翻牌記...
Day 10設計規格彙整：完成完整的設計文件（區塊、配色、字體大小、互動效果 今天的任務是將前幾天討論並決定的色彩方案、字體風格、介面版面與遊戲流程，正式彙整成...
