井字遊戲專案教學講義

1. 專案概述

1.1 專案目標

• 開發一個基於 Web 的多人線上井字遊戲

• 實現即時通訊和遊戲狀態同步

• 整合玩家統計系統

• 提供完整的遊戲體驗

1.2 技術棧

• 前端：HTML5, CSS3, JavaScript

• 後端：Node.js, Express

• 即時通訊：Socket.IO

• 資料庫：MongoDB

2. 教學重點

2.1 Web 開發基礎

1. HTML 結構

• 頁面布局設計

• 表單元素使用

• 響應式設計原則

2. CSS 樣式

• Flexbox 布局

• 動畫效果

• 媒體查詢

3. JavaScript 基礎

• DOM 操作

• 事件處理

• 非同步程式設計

2.2 後端開發

1. Node.js 基礎

• 模組系統

• 事件驅動程式設計

• 非阻塞 I/O

2. Express 框架

• 路由設計

• 中間件使用

• 錯誤處理

3. Socket.IO

• 即時通訊原理

• 事件驅動架構

• 房間管理機制

2.3 資料庫設計

1. MongoDB

• 文件型資料庫概念

• 資料模型設計

• CRUD 操作

2. 資料結構

• 玩家資訊

• 遊戲狀態

• 統計數據

3. 實作重點

3.1 遊戲邏輯

// 檢查獲勝條件
functioncheckWinner(board){
  constwinPatterns=[
    [0,1,2], [3,4,5], [6,7,8], // 橫向
    [0,3,6], [1,4,7], [2,5,8], // 縱向
    [0,4,8], [2,4,6]// 斜向
  ];
  for(letpatternofwinPatterns){
    const[a, b, c]=pattern;
    if(board[a]&&board[a]===board[b]&&board[a]===board[c]){
      returnboard[a];
    }
  }
  return null;
}

functioncheckWinner(board){
  constwinPatterns=[
    [0,1,2], [3,4,5], [6,7,8], // 橫向
    [0,3,6], [1,4,7], [2,5,8], // 縱向
    [0,4,8], [2,4,6]// 斜向
  ];
  for(letpatternofwinPatterns){
    const[a, b, c]=pattern;
    if(board[a]&&board[a]===board[b]&&board[a]===board[c]){
      returnboard[a];
    }
  }
  return null;
}

// 前端 Socket.IO 事件處理
socket.on('gameUpdate', (data)=>{
  updateBoard(data.board);
  updatePlayerInfo(data.currentPlayer);
  handleGameEnd(data.winner);
});


// 後端事件廣播
io.to(roomId).emit('gameUpdate', {
  board:gameState.board,
  currentPlayer:gameState.currentPlayer,
  winner:gameState.winner
});

4. 教學活動設計

4.1 課堂練習

1. 基礎練習

• 實作單機版井字遊戲

• 設計遊戲界面

• 實作遊戲邏輯

2. 進階練習

• 整合 Socket.IO

• 實作多人遊戲

• 加入聊天功能

3. 專案實作

• 完整功能整合

• 錯誤處理

• 效能優化

4.2 作業設計

1. 基礎作業

• 完成單機版遊戲

• 實作基本 UI/UX

• 撰寫技術文件

2. 進階作業

• 加入新功能（如計時器）

• 優化使用者體驗

• 實作資料統計

5. 評量方式

5.1 技術評量

• 程式碼品質（30%）

• 功能完整性（30%）

• 使用者體驗（20%）

5.2 文件評量

• 技術文件（10%）

• 使用說明（10%）

6. 延伸學習

6.1 進階主題

• WebSocket 原理深入

• 遊戲 AI 實作

• 效能優化技巧

6.2 相關技術

• React/Vue.js 框架

• TypeScript

• 遊戲引擎開發

7. 參考資源

7.1 官方文件

• Socket.IO 官方文件

• Express.js 官方文件

• MongoDB 官方文件

7.2 學習資源

• MDN Web Docs

• JavaScript.info

• Node.js 官方教學

8. 注意事項

8.1 開發建議

• 使用版本控制（Git）

• 遵循程式碼規範

• 注重程式碼重用性

8.2 常見問題

• 跨域請求處理

• 即時通訊穩定性

• 資料同步一致性