Slot Game Foundations in Pixi.js, React and TypeScript

Nền tảng Slot Game với Pixi.js, React và TypeScript

Bao gồm mã nguồn. Làm chủ phát triển front-end iGaming và mở ra con đường sự nghiệp đầy tiềm năng!

4.5

(14 đánh giá)

65 học viên

Giảng viên

Stewart Tuckwood

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 1.699.000đ -97%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

12.5 giờ video

241 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 28/05/2026

#Frontend Development #Game Development #Pixi Js #Typescript

Bạn sẽ học được gì

Những hiểu biết sâu sắc giúp bạn có được vai trò lập trình viên game junior đầu tiên trong ngành iGaming

Kỹ năng tự tạo tài nguyên (assets) và áp dụng chúng vào mã nguồn

Các khái niệm nền tảng cho framework front-end iGaming - Finite State Machines, Models, States, Events

Cách kết hợp giao diện người dùng React với game engine

Mô phỏng tiêu chuẩn iGaming chuyên nghiệp bằng cách mở rộng Pixi.js để phát triển nhanh chóng

Tích hợp stylesheet SASS và lớp BEM cho hệ thống giao diện người dùng mạnh mẽ

Yêu cầu

Có một số kinh nghiệm lập trình với viết script, sử dụng Visual Studio Code, Git. Có kiến thức cơ bản về web.

Đối tượng phù hợp

Các lập trình viên ở mọi trình độ đang muốn thay đổi hướng đi sự nghiệp. Những người có một ít kinh nghiệm lập trình nhưng chưa chắc nên khám phá lĩnh vực nào.

Nội dung khóa học

15 phần • 241 bài giảng

1 THÔNG TIN CẬP NHẬT KHÓA HỌC

2 01 THIẾT LẬP - Tổng quan dự án

3 02 THIẾT LẬP - Phần mềm sử dụng

4 03 THIẾT LẬP - MÃ NGUỒN

5 04 THIẾT LẬP - Lần Commit đầu tiên

6 05 THIẾT LẬP - Xây dựng dự án

7 06 THIẾT LẬP - Xuất bản dự án trên Netlify

8 07 THIẾT LẬP - Tư duy dự án

9 08 THIẾT LẬP - Ý tưởng Typescript 1

10 09 THIẾT LẬP - Ý tưởng Typescript 2

11 10 THIẾT LẬP - Ý tưởng Typescript 3

1 01 KIẾN TRÚC - Giới thiệu

2 02 KIẾN TRÚC - Finite State Machine

3 03 KIẾN TRÚC - Tổng quan khởi động

4 04 KIẾN TRÚC - Điểm vào ( Code )

5 05 KIẾN TRÚC - Render / Components ( Code )

6 06 KIẾN TRÚC - Game UI và Canvas ( Code )

7 07 KIẾN TRÚC - Game.ts ( Code )

8 08 KIẾN TRÚC - Thử thách

9 09 KIẾN TRÚC - Đáp án thử thách

1 01 MODELS - Giới thiệu

2 02 MODELS - Reel Model

3 03 MODELS - Single Point of Truth

4 04 MODELS - Thử thách Tính thắng

5 05 MODELS - Giải pháp Tính thắng

6 06 MODELS - Reel Display Model

7 07 MODELS - Reel Display Model (Tiếp theo)

8 08 MODELS - Thử thách Tick Tack Toe

9 09 MODELS - Giải pháp thử thách Tick Tack Toe

10 10 MODELS - Giải pháp Replay Tick Tack Toe

1 01 FORCED RESULTS - Giới thiệu

2 02 FORCED RESULTS - Gỡ lỗi

3 03 FORCED RESULTS - Demo

4 04 FORCED RESULTS - Vòng tính năng

5 05 FORCED RESULT - Quy định và Tuân thủ

6 06 FORCED RESULTS - Kết quả quay

7 07 FORCED RESULTS - Xem lại code ( Code )

8 08 FORCED RESULTS - Xem lại code (Tiếp theo) ( Code )

9 09 FORCED RESULTS - Tạo Forced Result ( Code )

10 10 FORCED RESULTS - Thử thách

1 01 EVENTS - Giới thiệu

2 02 EVENTS - Giải phẫu một Event

3 03 EVENTS - Quan sát Events ( Code )

4 04 EVENTS - Binding

5 05 EVENTS - Tạo Event Phần 1 ( Code )

6 06 EVENTS - Tạo Event Phần 2 ( Code )

7 07 EVENTS - Thử thách

1 01 BLOCKS - Giới thiệu

2 02 BLOCKS - Các khái niệm cốt lõi

3 03 BLOCKS - Blocks Liên quan đến Game States

4 04 BLOCKS - Xem lại Block Class ( Code )

5 05 BLOCKS - Sử dụng để gỡ lỗi ( Code )

6 06 BLOCKS - Tạo Debug Block mới ( Code )

7 07 BLOCKS - Thử thách

1 01 STATE - Giới thiệu

2 02 STATE - Nhiệm vụ của State Class

3 03 STATE - State Class (Code)

4 04 STATE - Cơ chế Play Through Blocks

5 05 STATE - Play Through Blocks ( Code )

6 06 STATE - Thử thách

7 07 STATE - Giải pháp thử thách Phần 1 ( Code )

8 08 STATE - Giải pháp thử thách Phần 2 ( Code )

9 09 STATE - Giải pháp thử thách Phần 3 ( Code )

10 10 STATE- Giải pháp thử thách Phần 4 ( Code )

1 CẬP NHẬT - CÔNG CỤ PIXI TRÊN TRÌNH DUYỆT RẤT HỮU ÍCH

2 01 PIXI - Giới thiệu

3 02 PIXI - Pixi.js là gì?

4 03 PIXI - Three.js

5 04 PIXI - Những điều cơ bản

6 05 PIXI - Khởi tạo App

7 06 PIXI - Graphics

8 07 PIXI - Graphics ( Code )

9 08 AND 09 PIXI - Lỗi vị trí Graphics ( Code )

10 10 PIXI - Giải pháp lỗi Graphics dùng Position Set ( Code )

11 11 PIXI - Add Child ( Code )

12 12 PIXI - Hệ thống định vị ( Code )

13 13 PIXI - Cây kế thừa ( Code )

14 14 PIXI - Scale Liên quan đến Hệ thống định vị ( Code )

15 15 PIXI - Bài tập Vị trí và Kích thước 1

16 16 PIXI - Bài tập Vị trí và Kích thước 2

17 17 PIXI - Ý tưởng về Anchor và Pivot

18 18 PIXI - Pivot Vs Anchor

19 19 PIXI - Anchor ( Code )

20 20 PIXI - Thử thách Pivot và Anchor

21 21 PIXI - Giải pháp Pivot và Anchor

22 22 PIXI - Containers

23 23 PIXI - Định vị Container

24 24 PIXI - Thêm vào Scene Graph

25 25 PIXI - Lỗi thường gặp với Container

26 26 PIXI - Mẹo giúp Container hiển thị

27 27 PIXI - Assets

28 28 PIXI - Lấy Assets Trình Duyệt

29 29 PIXI - Nạp Asset Vào Sprite

30 30 PIXI - Sprites

31 31 PIXI - Case Study Nạp Assets ( Code )

32 32 PIXI - Case Study Dùng Git

33 33 PIXI - Tỷ lệ khung hình cho Sprites

34 34 PIXI - Animated Sprites

35 35 PIXI - Spine Animations

36 36 PIXI - Animated Sprite ( Code )

37 37 PIXI - Animated Sprite Thu thập Frame ( Code )

38 38 PIXI - Tương tác / Sự kiện Click

39 39 PIXI - Tương tác Click ( Code )

40 40 PIXI - Animated Sprite Làm Giao diện Người dùng

41 41 PIXI - Text

42 42 PIXI - Lỗi thường gặp với Text

43 43 PIXI - Text ( Code )

44 44 PIXI - Bitmap Text ( Code )

45 45 PIXI - Ticker

46 46 PIXI - Giải thích Hành vi Ticker

47 47 PIXI - Ticker ( Code )

48 48 PIXI - Âm thanh

49 49 PIXI - Âm thanh ( Code )

50 50 PIXI - Rò rỉ bộ nhớ

51 51 PIXI - Quản lý bộ nhớ ( Code )

52 52 PIXI - Masks

53 53 PIXI - Ví dụ về Masks

54 54 PIXI - Mask ( Code )

1 01 PIXI EXT - Giới thiệu

2 02 PIXI EXT - Ví dụ về Lý do Mở rộng ( Code )

3 03 PIXI EXT - Ví dụ Thay đổi Kích thước

4 04 PIXI EXT - Lý do Mở rộng

5 05 PIXI EXT - Tổng quan Extension ( Code )

6 06 PIXI EXT - Hệ thống Redraw ( Code )

7 07 PIXI EXT - File Config ( Code )

8 08 PIXI EXT - Công thức Height, Width, X, Y ( Code )

9 09 PIXI EXT - Thay đổi Config Khi Chạy Trước Khi Xây dựng ( Code )

10 10 PIXI EXT - Thuộc tính Tùy chọn ( Code )

11 11 PIXI EXT - Redraw Tạm thời Vs Không tạm thời ( Code )

12 12 PIXI EXT - Composition Vs Lớp Mở rộng ( Code )

13 13 PIXI EXT - Tóm tắt ( Code )

14 14 PIXI EXT - Case Study Logo ( Code )

15 15 PIXI EXT - Case Study Logo (Tiếp theo) ( Code )

16 16 PIXI EXT - Case Study Logo Add Child ( Code )

17 17 PIXI EXT - Thử thách

18 18 PIXI EXT - Giải pháp thử thách ( Code )

19 19 PIXI EXT - Case Study Decorative Animation ( Code )

20 20 PIXI EXT - Case Study Decorative Animation (Tiếp theo) ( Code )

21 21 PIXI EXT - Thử thách

22 22 PIXI EXT - Giải pháp thử thách ( Code )

23 23 PIXI EXT - Bài tập mở đầu Thử thách Nâng cao ( Code )

24 24 PIXI EXT - Bài tập mở đầu Thử thách Nâng cao Scale Animation ( Code )

25 25 PIXI EXT- Bài tập mở đầu Thử thách Nâng cao Scale Animation (Tiếp theo) ( Code )

26 26 PIXI EXT - Giải thích Math.Sin trong Bài tập mở đầu Nâng cao

27 27 PIXI EXT - Bài tập mở đầu Nâng cao Math.Sin ( Code )

28 28 PIXI EXT - Bài tập mở đầu Nâng cao Hiểu về Configuration ( Code )

29 29 PIXI EXT - Thử thách Nâng cao

30 30 PIXI EXT - Giải pháp Thử thách Nâng cao Phần 1 ( Code )

31 31 PIXI EXT - Giải pháp Thử thách Nâng cao Phần 2 ( Code )

32 32 PIXI EXT - Giải pháp Thử thách Nâng cao Phần 3 ( Code )

33 33 PIXI EXT - Giải pháp Thử thách Nâng cao Phần 4 ( Code )

34 34 PIXI EXT - Giải pháp Thử thách Nâng cao Phần 5 ( Code )

35 35 PIXI EXT Kết luận Thử thách Nâng cao

1 01 SCSS - Giới thiệu

2 02 SCSS - Block Element Modifier

3 03 SCSS - Ý tưởng về Block Element Modifier

4 04 SCSS - Ví dụ B.E.M.

5 05 SCSS - Ví dụ Modifier

6 06 SCSS - Ý tưởng về SASS

7 07 SCSS - Xem lại Code SASS ( Code )

8 08 SCSS - Chỉnh sửa SASS ( Code )

9 09 SCSS - Những điểm cần cân nhắc về Trình biên dịch ( Code )

10 10 SCSS - Không Phải Thử Thách

1 01 REACT - Giới thiệu

2 02 REACT - Tham quan tổng quan

3 03 REACT - Tổng quan ( Code )

4 04 REACT - Components ( Code )

5 05 REACT - Nguyên tắc Vàng về Lồng ghép ( Code )

6 06 REACT - Tại sao dùng Components?

7 07 REACT - Ý tưởng về Components Phần 1 (Props, States, Cả hai, Không cái nào)

8 08 REACT - Props Vs State

9 09 REACT - Không Props Cũng Không State ( Code )

10 10 REACT - Chỉ Props ( Code )

11 11 REACT - Ví dụ về Props

12 12 REACT - Chỉ State ( Code )

13 13 REACT - Props và State ( Code )

14 14 REACT - Components Phần 2

15 15 REACT - Functional Vs Class

16 16 REACT - Component Did Mount / Un-Mount / Use Effect

17 17 REACT - Get Instance / Game.events

18 18 REACT - Functional Component (Code)

19 19 REACT - Component Did Mount và Tương tác (Code)

20 20 REACT - Thử thách

21 21 REACT - Ví dụ kết quả thử thách

22 22 REACT - Giải pháp thử thách Phần 1 (Code)

23 23 REACT - Giải pháp thử thách Phần 2 (Code)

24 24 REACT - Giải pháp thử thách Phần 3 (Code)

25 25 REACT - Ví dụ thử thách nâng cao

26 26 REACT - Thử thách nâng cao

27 27 REACT - Giải pháp thử thách nâng cao Phần 1 (Code)

28 28 REACT - Giải pháp thử thách nâng cao Phần 2 (Code)

29 29 REACT - Giải pháp thử thách nâng cao Phần 3 (Code)

30 30 REACT - Giải pháp thử thách nâng cao Phần 4 (Code)

1 01 ASSETS - Giới thiệu

2 02 ASSETS - Bắt đầu với Symbols

3 03 ASSETS - Đừng bắt đầu nếu chưa có thiết kế

4 04 ASSETS - Thiết kế cuối cùng

5 05 ASSETS - Cân nhắc thiết kế cho di động

6 06 ASSETS - Tạo một Symbol Asset mới

7 07 ASSETS - Chỉnh sửa hình ảnh

8 08 ASSETS - Thêm nền

9 09 ASSETS - Tạo Keyframes hoạt ảnh

10 10 ASSETS - Chỉnh sửa cuối cùng cho hoạt ảnh

11 11 ASSETS - Xuất các Frame

12 12 ASSETS - Thay đổi kích thước các Frame

13 13 ASSETS - Tạo hoạt ảnh thử nghiệm và xuất Spritesheet

14 14 ASSETS - Nhập và chỉnh sửa Spritesheet

15 15 ASSETS - Kiểm tra hoạt ảnh trong game

16 16 ASSETS - Chuyển sang nhánh khác và xem hoạt ảnh

1 01 PORTFOLIO - Lucky Pig

2 02 PORTFOLIO - Cuboid (Three.js)

3 03 PORTFOLIO - Cuboid - Cân nhắc về AI

4 04 PORTFOLIO - Ý tưởng Asset trừu tượng cho Cuboid

5 05 PORTFOLIO - Super Corps - Sử dụng Framework nâng cao của tôi

6 06 PORTFOLIO - Chiến lược xây dựng Portfolio

1 MÃ NGUỒN VÀ HƯỚNG DẪN SỬ DỤNG

2 01 CẬP NHẬT KHÓA HỌC - GIỚI THIỆU

3 02 CẬP NHẬT KHÓA HỌC - DEMO

4 03 CẬP NHẬT KHÓA HỌC - TRỌNG SỐ SYMBOL

5 04 CẬP NHẬT KHÓA HỌC - CHỈNH SỬA CONFIG

6 05 CẬP NHẬT KHÓA HỌC - LỰA CHỌN THIẾT KẾ

7 06 CẬP NHẬT KHÓA HỌC - XUẤT ASSETS

8 07 CẬP NHẬT KHÓA HỌC - MẸO LƯU DỰ ÁN

9 08 CẬP NHẬT KHÓA HỌC - THAY ĐỔI KÍCH THƯỚC ASSETS

10 09 CẬP NHẬT KHÓA HỌC - MẸO QUẢN LÝ ASSET

11 10 CẬP NHẬT KHÓA HỌC - HÌNH ẢNH UI

12 11 CẬP NHẬT KHÓA HỌC - TEXTURE PACKER

13 12 CẬP NHẬT KHÓA HỌC - CHỈNH SỬA SPRITESHEET

14 13 CẬP NHẬT KHÓA HỌC - TẢI SPRITE SHEET

15 14 CẬP NHẬT KHÓA HỌC - CHỈNH SỬA REEL HELPER

16 15 CẬP NHẬT KHÓA HỌC - THAY THẾ ASSETS

17 16 CẬP NHẬT KHÓA HỌC - TINH CHỈNH ASSETS

18 17 CẬP NHẬT KHÓA HỌC - TIẾP TỤC THAY ĐỔI KÍCH THƯỚC

19 18 CẬP NHẬT KHÓA HỌC - BIẾN TOÀN CỤC HỮU ÍCH

20 19 CẬP NHẬT KHÓA HỌC - CHỌN FONT CHỮ

21 20 CẬP NHẬT KHÓA HỌC - NHẬP FONT CHỮ

22 21 CẬP NHẬT KHÓA HỌC - BIẾN FONT CHỮ

23 22 CẬP NHẬT KHÓA HỌC - TIÊU ĐỀ VÀ FAVICON

24 MÃ NGUỒN GAME CUTEST CRITTERS HOÀN CHỈNH

25 23 CẬP NHẬT KHÓA HỌC - KẾT THÚC + MÃ

1 Bài giảng BONUS

Giới thiệu khóa học

Learn the skills to build a portfolio of online slot machine games. Source code and asset creation guide included in this course - build an original slot game in a day!

Break into the iGaming industry as a game developer. Ace any interview by wowing people with a strong portfolio of slot games. Talk the talk with modern iGaming architecture. Demonstrate the knowledge and experience to make it impossible to refuse your talent. This foundational course will arm you with all the essential skills to not just get your first iGaming developer role, but thrive in any iGaming studio.

With the source code included, plus a guide on how to create your own assets - we have everything to equip you for success. You won't find the raw materials or knowhow anywhere else - so go on, invest in yourself with this ground-breaking course!

Suitable for anyone with basic coding experience.

Whether you have never landed a professional coding role before, or you're stuck with a product that isn't exciting - this course could be for you.

With the right keywords in your LinkedIn profile - talent acquisition specialists will come knocking on your door. You don't need the course to get your foot in the door, however you do need to stand out from the crowd when you have the attention of a potential employer. This course will help you to smash through the interview process and land your first paid role in iGaming.

iGaming is a lucrative industry - a fun product, an energetic work environment and the chance to make friends with lots of talented people from all walks of life. Artists, sound designers, mathematicians, game developers, product owners, designers. You also have the opportunity to work remotely or even work from exotic locations around the world.

Unlike web / app developer jobs that might rely on who the boss is friends with in order to get the next project, iGaming offers a much more aspirational trajectory for any developer. Your ideas matter! You could go from junior developer to forming your own iGaming studio and make millions. iGaming is a lucrative industry and that trend isn't going to slow down. It's open to anyone with the right set of skills.

Unlike app or web development, iGaming still holds some secrets - you can't A.I. prompt a fully functional iGaming architecture with ease. Whilst A.I. is crushing the value of any developer, iGaming needs fresh new talent to support this growing industry. Your skills are worth more in iGaming!