Giáo trình miễn phí · Tiếng Việt · 14 bài · 42 bài tập
Học lập trình game với Oggy
Học game loop, va chạm, state machine, event bus và nhiều design pattern khác bằng cách đọc, thử và sửa mã nguồn thật của một game trình duyệt hoàn chỉnh: không build step, không thư viện ngoài, không "hộp đen".
Mã nguồn trên GitHub ↗ · Hướng dẫn học & cài đặt
Bạn đã học 0/14 bài. Học tiếp
- 14bài học
- ~36 giờ6–8 tuần
- 42bài tập có lời giải
- 0 đmiễn phí, mã nguồn mở
Bạn sẽ học được gì
Mỗi khái niệm gắn với code thật trong src/. Bạn đọc, chạy thí nghiệm trong DevTools rồi tự viết tính năng mới.
- 00Chạy game qua
file://, cấu trúc thư mục - 01IIFE, namespace
window.OG - 02
requestAnimationFrame, delta time - 03Giữ phím vs vừa bấm, phím logic
- 04Trọng lực, tích phân Euler
- 05FSM, scene stack
go/push/pop - 06Publish–subscribe, loose coupling
- 07Vẽ procedural, transform
- 08Toạ độ thế giới ↔ màn hình, camera theo nhân vật
- 09AI tuần tra, registry + strategy
- 10
AudioContext, autoplay policy - 11
localStorage+ try/catch, giá trị mặc định - 12Registry, gộp theo id
- 13Smoke test Node + DOM giả,
vm
Yêu cầu đầu vào
sinh viên đại học đã biết JavaScript cơ bản: biến, hàm, mảng, object, vòng lặp, callback, DOM (document.getElementById, addEventListener). Giáo trình không dạy lại cú pháp JS. Nó dạy những thứ sách JS thường bỏ qua: vì sao game cần game loop (vòng lặp game), làm sao nhân vật nhảy đúng như nhau trên màn 60 Hz và 144 Hz, vì sao một module âm thanh có thể "nghe" người chơi nhảy mà không ai gọi nó...
Thời lượng ước tính
Tổng cộng khoảng 36 giờ, tức chừng 6–8 tuần nếu học 5 giờ mỗi tuần. Thời lượng từng bài đã gồm đọc bài, đọc code, làm thí nghiệm và bài tập.
Cần cài gì
| Công cụ | Dùng để | Bắt buộc? |
|---|---|---|
| Trình duyệt Chrome, Edge hoặc Firefox bản mới | Chạy game, mở DevTools | Có |
| Git | Lấy code, tạo nhánh làm bài tập | Có |
| Node.js 20 trở lên (CI dùng Node 22) | Chạy smoke test node tests/smoke.js | Có (từ bài 00) |
| VS Code | Đọc code, gợi ý kiểu, nhảy tới định nghĩa | Khuyên dùng |
| Python 3 | Chạy server tĩnh python -m http.server | Không (có cách khác) |
Lộ trình 14 bài
Bài 00–02 là nền tảng, nên học đúng thứ tự. Bấm Đánh dấu đã học ở cuối mỗi bài, dấu ✓ sẽ hiện ở đây (lưu trên trình duyệt của bạn).
- 00(đã học) Bắt đầu: chạy game, đọc cấu trúc dự án, chạy smoke test Chạy được game bằng cách mở thẳng index.html (qua file://), không cần cài đặt hay build.
- 01(đã học) Module pattern: IIFE, namespace OG và cô lập lỗi Viết được một module theo module pattern IIFE: có biến riêng (private), chỉ lộ ra API công khai qua window.OG.
- 02(đã học) Game loop và delta time Giải thích được game loop (vòng lặp game) và vì sao game vẽ lại toàn bộ màn hình mỗi frame.
- 03(đã học) Input: giữ phím, cạnh lên, phím logic, coyote time và jump buffer Phân biệt held (đang giữ) với pressed (cạnh lên, vừa nhấn đúng frame này) và biết khi nào dùng cái nào.
- 04(đã học) Vật lý và va chạm AABB Mô phỏng được trọng lực bằng tích phân Euler (cập nhật vận tốc rồi vị trí theo dt), và biết terminal velocity.
- 05(đã học) State machine và scene Giải thích được finite state machine (FSM, máy hữu hạn trạng thái) và nhận ra nó ở ba tầng của game: luồng màn hình (scene), pha bên trong một scene…
- 06(đã học) Event bus và observer Giải thích được observer pattern / publish–subscribe (phát–đăng ký) và vì sao nó giúp các module ít phụ thuộc nhau (loose coupling).
- 07(đã học) Vẽ procedural bằng Canvas và cache khung hình Vẽ được hình bằng Canvas 2D API: path, fill/stroke, gradient, và dùng transform (translate, rotate, scale) với save()/restore() đúng cách.
- 08(đã học) Camera và parallax Phân biệt toạ độ thế giới (world) và toạ độ màn hình (screen), và đổi qua lại giữa hai hệ.
- 09(đã học) AI kẻ địch và trùm Viết được AI tuần tra (patrol) và hiểu vì sao "AI" trong game platformer thường cố ý đơn giản và dễ đoán.
- 10(đã học) Âm thanh tổng hợp bằng Web Audio API Giải thích audio graph (đồ thị node âm thanh) và vai trò của AudioContext, OscillatorNode, GainNode, BiquadFilterNode.
- 11(đã học) Lưu trữ bền vững & migrate dữ liệu Dùng localStorage đúng cách: luôn bọc try/catch, lưu dạng JSON, biết khi nào nó không dùng được.
- 12(đã học) Data-driven: thêm màn, câu đố, hành trình mới Hiểu data-driven design (thiết kế hướng dữ liệu): tách nội dung khỏi engine để thêm nội dung mà không sửa engine.
- 13(đã học) Kiểm thử tự động & CI với GitHub Actions Hiểu smoke test (kiểm thử "khói") và vị trí của nó so với unit test.
Chọn hướng học khi không đủ thời gian
Gameplay
khoảng 15 giờ
Đồ hoạ và âm thanh
khoảng 15 giờ
Kiến trúc phần mềm
khoảng 16 giờ
Sơ đồ "cần học trước" giữa các bài
flowchart LR b00["00 Bắt đầu"] --> b01["01 Module"] --> b02["02 Game loop"] b02 --> b03["03 Input"] --> b04["04 Vật lý"] b02 --> b04 b02 --> b05["05 State machine"] b01 --> b06["06 Event bus"] b02 --> b07["07 Canvas"] b04 --> b08["08 Camera"] b07 --> b08 b04 --> b09["09 AI & trùm"] b05 --> b09 b06 --> b10["10 Web Audio"] b01 --> b11["11 Lưu trữ"] b04 --> b12["12 Data-driven"] b05 --> b12 b06 --> b12 b02 --> b13["13 Kiểm thử & CI"] b06 --> b13
Tài liệu kiến trúc & thiết kế
- Sơ đồ kiến trúc Phụ thuộc giữa các module, máy trạng thái scene, luồng event, vòng đời một frame, cây thư mục.
- Thiết kế chi tiết Mô hình dữ liệu, sơ đồ lớp, luồng tuần tự, máy trạng thái, triển khai và quyết định thiết kế.
- Quy ước code & comment Khối đầu file, JSDoc, nhãn 💡 ⚠️ 🧪, refactor an toàn. Bắt buộc đọc trước bài tập đầu tiên.
- Lời giải bài tập Lời giải có giải thích cho cả 42 bài tập. Hãy tự làm trước!
Câu hỏi thường gặp
Học khoá này như thế nào?
Đi lần lượt bài 00 → 02 (bắt buộc), sau đó theo mũi tên "cần học trước" hoặc một trong ba hướng học. Mỗi bài có mục tiêu, khái niệm, phần dẫn đọc đúng file trong mã nguồn, thí nghiệm 🧪 làm ngay trong DevTools và 3 bài tập từ dễ đến khó. Làm mỗi bài tập trên một nhánh Git riêng.
Cần cài những gì?
Một trình duyệt mới (Chrome, Edge hoặc Firefox), Git và Node.js 20 trở lên để chạy smoke test. Nên dùng VS Code. Dự án không có package.json, không cần npm install: mở index.html là chơi được.
Cần biết gì trước khi học?
JavaScript cơ bản: biến, hàm, mảng, object, vòng lặp, callback và DOM (getElementById, addEventListener). Giáo trình không dạy lại cú pháp JS.
Có lời giải bài tập không?
Có. Mỗi bài có một trang lời giải riêng, giải thích vì sao làm như vậy. Hãy tự làm trước và chỉ mở lời giải để so sánh sau khi smoke test của bạn đã XANH, vì phần tự tìm ra mới là lúc học được nhiều nhất.
Khoá học có mất phí không?
Không. Giáo trình và mã nguồn đều miễn phí. Oggy Adventure là dự án fan-made phi thương mại.
Mất bao lâu để học xong?
Khoảng 36 giờ, tức chừng 6–8 tuần nếu học 5 giờ mỗi tuần. Nếu ít thời gian, chọn một hướng học khoảng 15 giờ: Gameplay, Đồ hoạ và âm thanh, hoặc Kiến trúc phần mềm.