Khoá học Lập trình Games 2D HTML5 Canvas Javascript

Khoá học dạy lập trình JavaScript, logic, hướng đối tượng đối và các phương pháp lập trình games 2D. Khoá học thiết kế cho người mới bắt đầu, học sinh cấp 3, sinh viên trái ngành hoặc sinh viên CNTT năm đầu.

Học tối thứ 4 hàng tuần 6:30 đến 8:30 tại cơ sở 1: 14 ngõ 4 Nguyễn Đình Chiểu quận Hai Bà Trưng.
Hoặc tối thứ 3 hàng tuần 2:30 đến 5:30 tại cơ sở 2, 12 A, 48 Tố Hữu, Viwaseen Tower, Nam Từ Liêm

Giảng viên: Trịnh Minh Cường, cựu lập trình viên Microsoft 1997 - 2011, Fujitsu 1999-2003...

Liên hệ đăng ký học: support@techmaster.vn - 0967983563 (Ms. Thuý)

Điểm nổi bật:

  • Học lập trình logic, toán qua viết ứng dụng games 2D sử dụng ngôn ngữ JavaScript thuần không sử dụng framework giúp sinh viên hiểu 
  • Thực hành dự án từng bước từ dễ đến khó giúp sinh viên hình dung cách cải tiến, thêm code (code refactor)
  • Chuyển từ tư duy function/procedure sang tư duy thiết kế hướng đối tượng
  • Học cách debug JavaScript bằng Developer Console
  • Lên kịch bản games cũng là thiết kế mô tả ứng dụng
  • Khoá học có 10 buổi thực hành lab + 5 buổi học hỗ trợ trực tuyến + 1 buổi hackathon và báo cáo đồ án
    8 dự án games dạy trên lớp.

Điều kiện tốt nghiệp:

  • Có mặt tối thiểu 8 buổi thực hành lab
  • Được điểm trung bình 6.5/10
  • Sinh viên phải hoàn thành đồ án tốt nghiệp là 1 games đơn giản 
Giáo trình
0. Giới thiệu về Canvas
  • Giới thiệu
  • Sử dụng HTML5 Canvas
  • Hệ trục tọa độ trong Canvas
  • Canvas ví dụ cơ bản
1. Vẽ các đối tượng trong Canvas
  • Style - Color
  • Path - Sub path
  • Vẽ hình chữ nhật
  • Vẽ hình tròn
  • Vẽ đoạn thẳng (Phần 1)
  • Vẽ đoạn thẳng (Phần 2)
  • Gradient
  • Shadow
  • Text (Phần 1)
  • Text (Phần 2)
  • Image (Phần 1)
  • Image - Resizing và Cropping (Phần 2)
  • Image - Transform (Phần 3)
  • Vẽ ô bàn cờ 8 x 8
  • Vẽ pattern hình vuông
  • Vẽ hình vuông nội tiếp hình tròn
  • Vẽ tam giác
3. Chuyển động căn bản
4. Point Game
5. Brick Game
  • Giới thiệu
6. Paint Brush
7. Pong game
  • Giới thiệu
  • Định nghĩa và vẽ các đối tượng trong Game
  • Vẽ các đối tượng trong Game
  • gameLoop + update
  • Di chuyển thanh đệm của người chơi
  • Kiểm tra va chạm của bóng với thành
  • Di chuyển thanh đệm của máy
  • Bài tập : Kiểm tra sự va chạm của ball với thanh đệm
8. Đồng hồ quả lắc
  • Giới thiệu
9. Siêu phẩm Flappy Bird
  • Giới thiệu
10. Tetris lừng lẫy 1 thời
  • Giới thiệu
11. Rắn săn mồi
  • Giới thiệu
12. DOM cơ bản
  • Giới thiệu
  • Tạo mới/Thêm/Xóa phần tử
  • Thay đổi thuộc tính
  • Attributes
  • Thao tác class CSS với classList
  • # Quiz 01
  • # Quiz 02
  • # Quiz 03
13. Thực Hành DOM
  • Bài 1: ul-li
  •  Bài 2: Card 539
  • Bài 3: Job
  • Bài 4: Paragraph
  • Bài 5: Form
  • Bài 6: Table
  • Bài tập : Đếm số
  • Bài tập : Box
  • Bài tập : Testimonial
  • Bài tập : Render Table
14. Ứng dụng TodoList
  • Tạo UI cho ứng dụng
  • Mockup dữ liệu và render
  • Add Todo
  • Delete / Toggle status
  • Update Todo
  • Bài tập: Filter Todo
  • Giới thiệu về Localstorage
15. BMI
  • Giới thiệu
16. Ứng dụng Calculator
  • Giới thiệu
  • Giới thiệu
18. Memory Card App
  • Giới thiệu
19. Memory Card Game
  • Giới thiệu
20. Javascript căn bản
21. Javascript nâng cao (ES6)
  • Giới thiệu
  • Let/Const
  • Scope trong ES6
  • Template string
  • Destructing
  • Default parameter
  • Arrow function
  • Spread operators
  • Rest parameters
  • Class
  • Module
  • Import/Export
  • Callback Function
  • Promise
  • Asysc/Await
  • Tổng hợp kiến thức cơ bản thường xuyên sử dụng trong React
22. Game đập ruồi
  • Click để nổ bóng
  • BT: bóng bay lên trời
  • BT: di chuột nổ quả bóng
23. Game Loop
24. Photoshop
  • Giới thiệu
  • BT: Thiết kế Poster
25. Hứng sự kiện - chuyển động căn bản
  •  Hứng sự kiện từ chuột 425
  • Hứng sự kiện từ bàn phím
  • Hứng sự kiện thay đổi kích cỡ màn hình
  • Vẽ một quả bóng
  • Vận tốc chuyển động đều
  • Bóng bay quỹ đạo parabole
  • Trái đất quay quanh mặt trời 1
  • Chuyển động Ellipse
  • Vẽ xoáy trôn ốc Archimedes Sprial
26. Chuyển động tròn, radian, sin, cos, rotate
  • Follow line
  • Con lắc đơn
  • Đồng hồ
27. Bắn vịt trời
  • Săn vịt trời
  • Bài tâp nâng cao
28. Đồng hồ
  • Bài tập đồng hồ quả lắc
29. Cờ caro
  • Tư duy một chút nào
  • Vẽ các đường kẻ ngang
  • Vẽ các đường kẻ dọc
  • Bổ xung marginTop, marginBottom, marginLeft, marginRight
  • Tạo mảng 2 chiều để lưu bước đi
  • Hứng sự kiện người dùng click chuột
  • Tìm ra ô người dùng Click
  • Lưu lại bước vào mảng 2 chiều
  • Bài tập: Vẽ X, O
  • Bài tập: checkWin trong game cờ Caro
30. Dự án Web Paint Brush
  • Chấm điểm trên mặt phẳng
  • Nối các đoạn thẳng
  • Làm mịn nét vẽ
  • BT: hoàn thiện ứng dụng Paint Brush
31. Dự án Piano - Trống
  • Giới thiệu về đàn piano
  • Trống
  • Phân tích bài toán
  • Quản lý âm thanh
  • Các bước thực hiện bài toán
  • Thiết kế Key object
  • Thiết kế Piano object
  • Click key and Play
32. Dự án Walk Man
  • Sprite
  • Bối cảnh giật lùi
  • Nhảy
  • Bắn súng
33. GameFramework (GameEngine) Fundamental
  • Giới thiệu
  • Thực hiện game framework
  • Luồng xử lý trong lĩnh vực game
  • Áp dụng framework
  • Thư viện dành riêng cho xử lý vật lý trong game
34. Buổi 1
  • Giới thiệu lộ trình học
  • Cài đặt môi trường phát triển
  • Tổng quan về ngôn ngữ lập trình
  • Logic lập trình - Think like a programmer
  • Bài tập logic
35. Buổi 2
  • Khai báo biến
  • Kiểu dữ liệu
  • Giới thiệu Canvas
  • Bài tập nhập môn js
  • Lời giải
36. Buổi 3
  • Comparison and Logical operation
  • Condition
  • Loop
  • Các hàm canvas cơ bản
  • Bài tập về loop, condition và logical operation
  • Bài tập vẽ các hình cơ bản
37. Buổi 4
  • Function
  • Arrow function
  • Game frame
  • Game component
  • Game bóng bay
  • Game bóng di chuyển trong bàn chơi
  • Bài tập function và arrow function
  • Bài tập game bóng va đập vào cạnh bàn
38. Buổi 5
  • Class
  • Modularity - Import - Export
  • Game controller
  • Keyboard controller
  • Mouse controller
  • Game click nổ bóng
  • Game click tạo bóng
  • Bài tập về class, áp dụng bố trí file
  • Bài tập về bắt sự kiện bàn phím và chuột
  • Bài tập start và stop bóng khi nhận sự kiện
39. Buổi 6
  • Promise, async, await
  • Game obstacles
  • Game score
  • Game brick: vẽ gạch và vẽ score
  • Xử lý va chạm với thanh đệm
  • Bài tập về async và await
  • Bài tập xử lý va chạm với thanh đệm, gạch và viền
  • Bài tập xử lý start game, game over và win
40. Buổi 7
  • Game image
  • Game background
  • Game sound
  • Game vịt trời
  • Bài tập hoàn thiện game vịt trời
41. Buổi 8
  • Gravity
  • Accelerate
  • Bouncing
  • Rotation
  • Game flappybird
  • Bài tập hoàn thiện game flappybird
42. Buổi 9
  • Component movement and rotation
  • Game tank (1/2)
  • Bài tập hiển thị enemy, terrain, bullet
43. Buổi 10
  • Giới thiệu về freecodecamp
  • Game tank (2/2)
  • Bài tập xử lý khi bị đạn bắn trúng
  • Bài tập xử lý âm thanh của đạn
44. Buổi 11
  • Hỗ trợ giải đáp freecodecamp (1/3)
  • Logic game rắn săn mồi
  • Game tetris (1/3)
  • Bài tập hoàn thiện game rắn săn mồi
45. Buổi 12
  • Hỗ trợ giải đáp thắc mắc freecodecamp (2/3)
  • Logic game piano
  • Game tetris (2/3)
  • Bài tập hoàn thiện game piano
46. Buổi 13
  • Hỗ trợ giải đáp thắc mắc freecodecamp (3/3)
  • Logic ứng dụng đồng hồ
  • Game tetris (3/3)
  • Bài tập hoàn thiện ứng dụng đồng hồ
47. Buổi 14
  • Giới thiệu framework
  • Thiết kế cấu trúc framework
  • Yêu cầu và logic ứng dụng paint brush
  • Bài tập hoàn thiện ứng dụng gamebrush
48. Buổi 15
  • Thực hiện framework
  • Áp dụng cho game Piano
  • Bài tập ứng dụng framework để thực hiện game caro
49. Buổi 16
  • Tổng kết kiến thức cần nhớ
  • Giải đáp thắc mắc
  • Hướng dẫn chuẩn bị cho đồ án kết thúc môn học
  • Truy cập vào các phần tử của DOM
Gói học phí
Bạn có thắc mắc
Nhận hỗ trợ
Để lại thông tin, chúng tôi sẽ liên hệ với bạn
Đóng trọn gói
3500000đ
Học viên hoàn thành học phí trong một lần