Day 11
建立專案結構：建立資料夾、HTML 骨架
今天正式從設計走向開發，目標是為遊戲網站搭建清晰的專案檔案結構，並撰寫第一份HTML基礎骨架。良好的檔案結構能讓團隊在後續開發、維護與擴充時更有條理，也能避免程式碼混亂或資源難以管理的情況。這一步就像是在為整個專案搭建地基，必須清楚、簡潔、可擴充，才能支撐之後的程式碼與素材。
game-project/
│
├─ index.html ← 首頁與主要遊戲頁入口
├─ css/
│ ├─ style.css ← 全站共用的主要樣式
│ ├─ reset.css ← 瀏覽器預設樣式重置 (選用)
│ └─ animation.css ← 遊戲動畫與特效
│
├─ js/
│ ├─ main.js ← 主要遊戲邏輯
│ ├─ ui.js ← UI 互動控制
│ └─ utils.js ← 工具函式
│
├─ images/
│ ├─ logo/ ← 網站 LOGO、圖示
│ ├─ backgrounds/ ← 背景圖片
│ └─ game-assets/ ← 遊戲角色、卡片素材
│
├─ sounds/
│ ├─ bgm.mp3 ← 背景音樂
│ └─ click.wav ← 按鈕音效
│
└─ fonts/ ← 自訂字體 (若有)
設計要點：css、js、images、sounds、fonts 各自管理對應的資源，避免所有檔案混在根目錄中。
對於大型遊戲專案，可將 JS 檔進一步拆分，例如將遊戲邏輯、計分系統、UI 動畫分別獨立，方便日後維護。
命名遵循小寫、連字號（kebab-case）或駝峰式（camelCase），保持一致性，例如：game-scene.js 或 gameScene.js。
index.html 中撰寫初步的 HTML 結構，確保後續可以直接套入 CSS 與 JS。以下是一個簡單的示例：<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Game Project</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 頁首區塊 -->
<header class="site-header">
<h1 class="logo">Game Title</h1>
<nav class="main-nav">
<button id="start-btn">開始遊戲</button>
</nav>
</header>
<!-- 遊戲區域 -->
<main class="game-container">
<section id="game-scene">
<!-- 之後放置遊戲畫面 -->
</section>
</main>
<!-- 結算區域 -->
<section id="result-screen" class="hidden">
<h2>遊戲結算</h2>
<p>您的分數：<span id="score">0</span></p>
<button id="restart-btn">重新挑戰</button>
</section>
<!-- 腳註 -->
<footer class="site-footer">
<p>© 2025 My Game Project</p>
</footer>
<script src="js/utils.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>
重點：viewport 設定讓網站支援手機與平板，方便日後響應式設計（RWD）。
將 CSS 與 JS 檔案分離，HTML 只負責結構，樣式與互動交給外部檔案處理，提升可維護性。
預留遊戲場景 (game-scene) 與結算畫面 (result-screen) 區塊，方便後續動態注入內容。
index.html，確認網頁能正常顯示標題、按鈕與基本區塊，並且 CSS、JS 已成功連結。game-project 初始化為專案，方便後續版本追蹤與協作。git init
git add .
git commit -m "Initial project structure with HTML skeleton"
iThome鐵人賽
看影片追技術