Tạo mã nguồn cho trò chơi dành cho trẻ em bằng Gemini và phát hành bằng Firebase!

Còn 29 phút

Thông tin về lớp học lập trình này

Lần cập nhật gần đây nhất: thg 5 13, 2025

Tác giả: Riccardo Carlesso

1. Giới thiệu

Vào ngày 25 tháng 3 năm 2025, Google đã ra mắt Gemini 2.5. Một trong những khía cạnh đáng nhớ nhất của lần ra mắt này là mọi người đều có thể dùng thử tính năng "Lập trình nâng cao" [ video]:

Gemini 2.5: Tạo trò chơi khủng long của riêng bạn từ một câu lệnh đơn dòng

Trong lớp học lập trình này, bạn sẽ tìm hiểu về cách "lập trình theo cảm hứng" một ứng dụng đơn giản dành cho trẻ em, bắt đầu từ một câu lệnh phổ biến rồi tuỳ chỉnh theo ý thích của riêng bạn. Chúng ta sẽ kiểm thử ứng dụng trên p5.js. Cuối cùng, chúng ta sẽ đẩy các thay đổi này đến Firebase Hosting.Điều đặc biệt nhất là toàn bộ ngăn xếp hiện đang miễn phí!

Kiến thức bạn sẽ học được

Sử dụng Gemini 2.5 để viết mã rung cho ứng dụng trò chơi.
Kiểm thử mã trên p5js.org
Cách lặp lại và tinh chỉnh lời nhắc / ứng dụng.
Cách lưu trữ ứng dụng tĩnh trên Firebase

Lưu ý rằng lớp học lập trình này sử dụng mã do AI tạo; mã này không xác định trước nên lớp học lập trình này chứa các nguyên tắc vì tác giả không biết kết quả của bạn. Ngoài ra, vui lòng KHÔNG sử dụng mã này trong phiên bản chính thức!

Nếu bạn thích lớp học lập trình này, hãy nhớ khám phá 🔥 Firebase Studio. Ứng dụng này mang đến trải nghiệm lập trình trực quan, tích hợp và tinh tế!

2. Điều kiện tiên quyết

Lớp học lập trình này diễn ra theo hai giai đoạn:

Phát triển chỉ trên web. Đây là nơi bạn sẽ có nhiều niềm vui nhất và không cần có kỹ năng lập trình. Để làm được điều này, chúng ta sẽ sử dụng giao diện người dùng Gemini ( gemini.google.com) và p5.js.
Môi trường lập trình cục bộ. Đây là nơi bạn cần có một chút kỹ năng lập trình / viết tập lệnh, cùng với việc cài đặt và sử dụng npm / npx và một trình soạn thảo cục bộ, chẳng hạn như vscode hoặc IntelliJ hoặc bất kỳ trình soạn thảo nào khác. Phần thứ hai này là không bắt buộc và chỉ cần thiết nếu bạn muốn lưu trữ ứng dụng để bạn bè và gia đình chơi trên thiết bị di động hoặc máy tính của họ.

Điều kiện tiên quyết duy nhất cho giai đoạn 1 là một Trình duyệt và máy tính (màn hình lớn sẽ giúp ích). Để biết giai đoạn 2, hãy đọc tiếp.

Giao diện người dùng Gemini

gemini.google.com là một nền tảng tuyệt vời để bạn có thể dùng thử tất cả các mô hình Gemini mới nhất, đồng thời bạn cũng có thể tạo hình ảnh và video của riêng mình! Ứng dụng này được tích hợp nhiều tính năng của Google, chẳng hạn như Google Maps và Khách sạn/Chuyến bay/Bài đánh giá, giúp bạn lên kế hoạch cho kỳ nghỉ tiếp theo một cách dễ dàng!

Mẹo: Nếu bạn thích lập trình, hãy cân nhắc việc sử dụng AI Studio, một giao diện tương tự mà bạn có thể tạo nguyên mẫu cho một hoạt động tương tác LLM (ví dụ: tạo hình ảnh) và lấy mã python ngay từ trang này!

p5.js

p5.js là một thư viện JavaScript nguồn mở, miễn phí giúp nghệ sĩ, nhà thiết kế, nhà giáo dục và mọi người khác có thể tiếp cận và sử dụng tính năng lập trình sáng tạo. Dự án này dựa trên ngôn ngữ Processing và đơn giản hoá quá trình tạo nội dung hình ảnh và nội dung tương tác bằng cách sử dụng mã trong trình duyệt web.

Mã hoá cục bộ [không bắt buộc]

Nếu bạn muốn lưu trữ ứng dụng, bạn cần thiết lập thêm:

Trình soạn thảo mã cục bộ ( Visual Studio code, IntelliJ, ..)
Tài khoản git ( github / gitlab / bitbucket) để lưu trữ mã của bạn.
npm được cài đặt cục bộ, tốt hơn nếu ở không gian người dùng (thông qua npx hoặc công nghệ tương đương).

Ngoài ra, chúng ta sẽ thiết lập một tài khoản Firebase sau.

Bạn cũng cần có một số kỹ năng lập trình, chẳng hạn như:

Khả năng cài đặt gói npm
Khả năng tương tác với hệ thống tệp (tạo thư mục và tệp)
Có thể tương tác với git (git add, git commit, git push).

Nếu có bất kỳ vấn đề nào khiến bạn lo lắng, hãy nhớ rằng: Các chuyên gia LLM sẽ rất sẵn lòng trợ giúp bạn. Ví dụ: bạn có thể sử dụng "Gemini 2.0 flash" hoặc mô hình tương đương để nhận đề xuất. Nếu vẫn thấy quá khó, bạn có thể bỏ qua hoàn toàn giai đoạn 2. Giai đoạn 1 đã đủ phần thưởng.

3. Hãy cùng tạo trò chơi đầu tiên!

Mở gemini.google.com rồi chọn một mẫu có thể chạy mã, ví dụ: 2.5. Lựa chọn này có thể khác nhau tuỳ theo tình trạng còn hàng, chi phí và ngày. Tại thời điểm viết bài, lựa chọn tốt nhất là:

Gemini 2.5 Flash (lặp lại nhanh hơn)
Gemini 2.5 Pro (đưa ra kết quả tốt hơn).

Bạn có thể xem thêm thông tin về các mô hình Gemini của chúng tôi tại đây.

Câu lệnh đầu tiên của trò chơi

Như bạn có thể quan sát trong video này, câu lệnh ban đầu có thể đơn giản như sau:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

Bạn có thể tuỳ chỉnh một chút:

Chế độ cài đặt thời trung cổ / viễn tưởng / cyberpunk
Có đầy đủ biểu tượng cảm xúc hay chỉ một biểu tượng cảm xúc cụ thể?
Bạn yêu thích màu vàng hoặc nhiều sắc thái của màu tím.
Có thể trẻ yêu thích kỳ lân, khủng long hoặc pokemon.

Sau khi dán câu lệnh vào trình duyệt, bạn sẽ thấy Gemini suy nghĩ.Đúng vậy, Gemini 2.5 là một mô hình tư duy, vì vậy, mô hình này sẽ bắt đầu một số tác vụ mà bạn có thể quan sát sự thay đổi theo thời gian. Bạn có thể nhấp vào trình đơn thả xuống đang thay đổi để xem điều gì đang xảy ra hoặc bạn chỉ cần chờ kết quả:

Cuối cùng, bạn sẽ có một javascript đang hoạt động.

Giờ đây, bạn có thể nhấp vào nút sao chép ở trên cùng:

Kiểm thử trò chơi trên p5.js

Giờ là lúc kiểm thử trò chơi!

Mở trình chỉnh sửa p5.js tại đây: https://editor.p5js.org/
Chọn và xoá mã sketch.js hiện có.
Dán mã của bạn

Trang của bạn sẽ có dạng như sau:

Cuối cùng, bạn có thể nhấn nút PLAY (PHÁT).

Bây giờ, có hai điều có thể xảy ra: mã của bạn hoạt động hoặc không hoạt động. Hãy làm theo hướng dẫn tuỳ theo cả hai trường hợp:

Mã của bạn không thành công
Mã của bạn hoạt động ngay từ lần thử đầu tiên!

Hãy xem hai đoạn tiếp theo để biết cách quản lý cả hai điều kiện.

(trường hợp 1) Mã của tôi không thành công!

Nếu gặp lỗi như vậy, bạn chỉ cần sao chép và dán lỗi đó vào Gemini. Hãy để anh ấy sửa mã cho bạn!

(trường hợp 2) Mã của tôi hoạt động!

Nếu mã của bạn hoạt động, bạn sẽ thấy một trò chơi trực quan ở cuối bên phải của trang.

👏 Xin chúc mừng, bạn đang chạy trò chơi AI đầu tiên!

Lưu ý: Mặc dù bạn có mã, nhưng ứng dụng chỉ hoạt động trong trình duyệt. Nếu muốn giới thiệu ứng dụng cho gia đình và bạn bè, bạn cần có giải pháp lưu trữ. May mắn là chúng tôi có một lựa chọn tuyệt vời cho bạn! Hãy đọc tiếp.

Giờ đây, bạn đã sẵn sàng cho chương tiếp theo.

Các vòng lặp khác

Bây giờ, bạn nên lưu mã của mình ở đâu đó, phòng trường hợp mã bị lỗi. Nếu muốn, bạn có thể lặp lại một lần. Ví dụ: tác giả rất thích cú nhảy đôi của Super Mario, vì vậy, bạn có thể thêm nội dung như sau:

The game is great, thanks! Please allow for my character to double jump.

Bạn có thể điều chỉnh mọi thứ bạn muốn, không giới hạn! Có thể bạn muốn lưu tên nhân vật để đạt điểm cao hơn, hoặc tăng tốc độ theo thời gian để trò chơi khó hơn, v.v. Bạn chỉ có thể sử dụng tiếng Anh cho câu lệnh của mình!

Mẹo: Gemini thường chỉ cung cấp cho bạn thay đổi mà bạn cần áp dụng (ví dụ: đây là thay đổi đối với hàm XYZ). Bạn nên đặt lời nhắc để nhận được toàn bộ mã đã cập nhật, chẳng hạn như

"Please give me the entire updated code, not just the changed function"

. Điều này sẽ giúp bạn dễ dàng cắt và dán hơn.

Chú ý

Bạn nên đánh dấu cuộc trò chuyện trên Gemini. Bạn có thể đổi tên ứng dụng thành "p5js my first game" (trò chơi đầu tiên của tôi bằng p5js) hoặc ghi lại đường liên kết cố định đến Gemini, chẳng hạn như " https://gemini.google.com/app/abcdef123456789" để sử dụng sau.

4. Hãy chạy mã này trên máy

Tại thời điểm này, bạn sẽ có:

Cửa sổ trình duyệt Gemini đang mở với một số mã đang hoạt động.
Cửa sổ trình duyệt p5.js đang mở với một trò chơi đang hoạt động
Môi trường lập trình cục bộ đã cài đặt npm.

Đây là phần khó hơn của lớp học lập trình. Bạn cần có một số kinh nghiệm lập trình cơ bản.

Cài đặt phần phụ thuộc

Nếu thiếu npm và node, tốt nhất bạn nên cài đặt npm thông qua một số trình quản lý phiên bản, chẳng hạn như nvm . Làm theo hướng dẫn cài đặt dành cho hệ điều hành của bạn.

Chúng tôi cũng giả định rằng bạn đang sử dụng một IDE lập trình. Chúng ta sẽ sử dụng mã Visual Studio trong ảnh chụp màn hình và ví dụ, nhưng bất kỳ mã nào cũng hoạt động.

Thiết lập môi trường cục bộ

Đây là lúc bạn có thể tạo cấu trúc tệp của riêng mình.

Chúng tôi cung cấp một tập lệnh thiết lập để minh hoạ. Bạn có thể thực hiện việc này theo cách thủ công bằng cách tạo thư mục và tệp:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

Cấu trúc thư mục cuối cùng sẽ có dạng như sau:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

Bạn cũng có thể tìm thấy thông tin này tại đây.

Bây giờ, hãy mở trình soạn thảo mã yêu thích của bạn (ví dụ: code my-first-vibecoding-project/ ) và bắt đầu dán nội dung của editor.p5js.org vào 3 tệp trong public/:

README.md ← Tại đây, bạn có thể đặt đường liên kết cố định đến cuộc trò chuyện trên Gemini và đặt trang đích cho ứng dụng khi ứng dụng ra mắt.
PROMPT.md ← Tại đây, bạn nên thêm tất cả câu lệnh, phân tách bằng một đoạn văn bản H2. Nếu muốn giải thích lý do đưa ra một câu lệnh cụ thể, bạn có thể đặt câu lệnh đó trong 3 dấu nháy ngược ( ví dụ).
**public/index.html** ← dán mã HTML của bạn vào đây
**public/sketch.js** ← hãy sao chép mã JS của bạn vào đây
**public/style.css** ← dán mã CSS của bạn vào đây

Thư mục công khai có thể lưu trữ các thành phần bổ sung, chẳng hạn như tệp PNG tuỳ chỉnh.

5. Thiết lập và triển khai cho Firebase

Thiết lập Firebase (chỉ dành cho lần đầu tiên)

Hãy nhớ cài đặt npm trong máy.

Trong một thiết bị đầu cuối, hãy nhập một trong các lệnh sau (cả hai đều hoạt động):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

Bây giờ, bạn có thể gọi lệnh firebase. Nếu bạn gặp vấn đề, hãy làm theo tài liệu công khai.

Khởi chạy Firebase

Trong phần này, chúng ta sẽ thiết lập dịch vụ lưu trữ Firebase. Đây là một quy trình rất đơn giản, nhưng có thể mất chút thời gian để làm quen với quy trình này trong lần đầu tiên.

Đảm bảo bạn đang ở thư mục ngay phía trên thư mục public/ chứa các tệp của bạn. Trang thông tin (ls -al hoặc dir) sẽ hiển thị như sau:

$ ls 
PROMPT.md
README.md
public/

[bước 1] Trên bảng điều khiển, hãy nhập: firebase init

Di chuyển con trỏ xuống "Hosting: .." (Lưu trữ: ..) rồi nhập SPACE (PHÍM DẤU CÁCH) rồi nhấn ENTER. (Tại sao? Vì đây là câu hỏi nhiều lựa chọn, nên bạn cần phải chọn và chuyển sang trang tiếp theo)
[bước 2] Bây giờ, bạn có thể chọn một dự án hiện có (tuỳ chọn 1) hoặc tạo một dự án mới (tuỳ chọn 2):

Lưu ý: nếu bạn có một Dự án trên đám mây hiện có, thì đó có thể không phải là dự án Firebase. Dự án Firebase là một tập hợp con của các dự án GCP. Bạn cần thực hiện thêm thao tác để biến các dự án đó thành dự án Firebase. Đó chính là mục đích của (tuỳ chọn 3).
Nếu chưa quyết định, hãy sử dụng tính năng "Tạo dự án mới" và thêm một số tên như "p5js-YOURNAME-YOURAPP" (ví dụ: "p5js-riccardo-tetris").

[bước 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Nhấn phím ENTER.

[bước 4] ? What do you want to use as your public directory? (public)
Nhấn ENTER (chúng ta đã thiết lập public/ một cách có chủ ý)

[bước 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
nhấn ENTER (không)

[bước 6] ? Set up automatic builds and deploys with GitHub? No
Nhấn ENTER – KHÔNG

[bước 7] ? File public/index.html already exists. Overwrite? (y/N)
Nhấn ENTER (không).
CẢNH BÁO Việc này có thể dễ xảy ra lỗi; nếu bạn ghi đè tệp này, index.html mới sẽ không tương thích với p5js!

Nếu mọi thứ hoạt động tốt, bạn sẽ thấy như sau:

Các thao tác này sẽ tạo một vài tệp:

.firebaserc
.gitignore
firebase.json
public/404.html

Cụ thể, .firebaserc phải có mã dự án mà bạn có thể lấy theo phương thức lập trình bằng mã sau: cat .firebaserc | jq .projects.default -r

Cảnh báo: Kiểm tra index.html. Nếu tệp này dài hơn 16 dòng và/hoặc có từ firebase trong đó, thì bạn đã vô tình ghi đè các tệp p5js. Không sao, chỉ cần nhớ lấy lại index.html cũ từ git hoặc từ trình chỉnh sửa p5js.

Kiểm thử cục bộ

Để giảm độ trễ của vòng hồi tiếp, trước tiên, bạn nên thử nghiệm cục bộ.

Để làm như vậy, bạn có thể thử bộ công cụ CLI mạnh mẽ của nhóm Firebase. Ví dụ:

$ firebase emulators:start

sẽ khởi động một máy chủ web trên cổng 5000 ( http://127.0.0.1:5000/ ) để bạn có thể kiểm thử cục bộ trước khi đẩy.

Triển khai lên Firebase

Bây giờ, đã đến lúc thực hiện lệnh cuối cùng:

$ firebase deploy

Thao tác này sẽ kích hoạt một số hành động. Vài dòng cuối cùng sẽ có nội dung như sau:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

Thao tác này sẽ cung cấp cho bạn URL lưu trữ. Hãy dùng thử ngay!

Nếu quá trình triển khai thành công nhưng bạn nhận thấy một số trang trống hoặc quá trình triển khai bị lỗi, bạn có thể làm một số việc sau:

Mở "Công cụ dành cho nhà phát triển" của trình duyệt, tìm lỗi và yêu cầu Gemini giúp bạn khắc phục lỗi bằng câu lệnh như sau:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ Lặp lại!

Bạn có thể lặp lại các bước này bao nhiêu lần tuỳ ý. Bạn có thể tiếp tục đưa ra lời nhắc cho đến khi hài lòng với kết quả.

Bạn cần lưu ý một số điều sau:

Vòng lặp lặp lại nhanh hơn nhiều trong vòng lặp Gemini > p5.js > Gemini so với trong vòng lặp Gemini > máy chủ cục bộ > triển khai để chạy trên đám mây > kiểm thử ứng dụng trên trình duyệt (nhấn làm mới).
Sử dụng git để tạo phiên bản cho cả lời nhắc và mã. Bạn có thể muốn quay lại lời nhắc N và mã N. Cụ thể, bạn muốn git cam kết mọi sketch.js mà bạn đẩy, vì các lỗi có thể ẩn nấp ở đó mà không bị phát hiện.

Xin lưu ý rằng một số trò chơi hoạt động tốt với bàn phím nhưng không hoạt động tốt với chuột hoặc thao tác nhấn trên điện thoại di động. Đây là thời điểm thích hợp để cải thiện mã.

6. Mẹo về câu lệnh

Một số mẹo sau khi tạo khá nhiều trò chơi.

Lập phiên bản câu lệnh

Có thể bạn sẽ thấy lỗi trong câu lệnh ban đầu. Có phiên bản git của ứng dụng đó. Có một vài đường dẫn mã ở đây:

Nếu bạn yêu thích những gì mình thấy và muốn lặp lại với gemini bằng các câu lệnh phụ tiếp theo, thì bạn có thể theo dõi tất cả các câu lệnh đó ở một nơi nào đó (câu lệnh 1,2,3 – 3-shot example1 – example2).
Nếu không quan tâm đến ứng dụng do câu lệnh nhắc 1 tạo, bạn có thể muốn hoàn thiện câu lệnh nhắc, loại bỏ mã và bắt đầu lại bằng mã đã sửa đổi (câu lệnh nhắc 1 phiên bản 1, câu lệnh nhắc 1 phiên bản 2, câu lệnh nhắc 1 phiên bản 3, v.v.)

Tất nhiên, bạn có thể kết hợp 2 phương pháp này.

Chức năng dành cho thiết bị di động

Tuỳ thuộc vào trò chơi bạn tạo, bạn có thể cần tương tác với người dùng. Hoạt động tương tác này có cần bàn phím không? Hay bạn có thể sử dụng chỉ bằng cách nhấn vào màn hình (ví dụ: bằng thiết bị di động) không? Hãy đảm bảo bạn nêu rõ điều này trong lời nhắc. Bạn có thể phải tạo một số nút trên bàn phím (xem ví dụ về Tetris 3D của tôi). Xem thêm về sự phiền toái của dungemoji đối với khả năng tương thích với thiết bị di động.

Gửi ý kiến phản hồi về lỗi JavaScript / ảnh chụp màn hình trực tiếp vào Gemini

Vì Gemini không thể xem hoạt động tương tác của bạn với p5js, hãy nhớ dán mọi lỗi Javascript vào Gemini. Xin lưu ý rằng Gemini có nhiều chế độ, vì vậy, nếu có thay đổi về giao diện người dùng (chẳng hạn như làm cho tiêu đề nhỏ hơn hoặc giảm điểm), bạn cũng có thể đính kèm ảnh chụp màn hình của trò chơi! Giao diện phản hồi lập trình chưa bao giờ thú vị đến thế!

7. Xin chúc mừng!

🎉 Chúc mừng bạn đã hoàn thành lớp học lập trình.

Chúng ta đã thấy việc tạo trò chơi bằng Gemini thật dễ dàng và cách Firebase cung cấp giải pháp lưu trữ dễ dàng để lưu trữ và chia sẻ trò chơi của bạn với người khác.

Nội dung đã đề cập

Tạo trò chơi thông qua Gemini 2.5.
Triển khai lên Firebase

Giờ là lúc 👥 khoe khoang về điều đó! Bạn có thể chia sẻ trò chơi mới nhất của mình (your-project.web.app) trên LinkedIn hoặc Twitter bằng hashtag #VibeCodeAGameWithGemini (và có thể gắn thẻ tác giả trên LinkedIn)? Điều này sẽ giúp chúng tôi biết lớp học lập trình này có hấp dẫn hay không và có thể viết thêm nhiều lớp học lập trình như vậy!

Tôi muốn biết thêm!

Nếu bạn muốn tham khảo thêm tài nguyên, hãy xem các trò chơi và câu lệnh sau:

Lập trình 5 trò chơi dành cho trẻ em bằng Gemini 2.5 và p5.js trong một cuối tuần! Bài viết này sẽ hướng dẫn bạn quy trình lập trình cảm giác cho trò chơi bằng 6 ví dụ.
palladius/genai-googlecloud-scripts (kho lưu trữ github có khoảng 10 ứng dụng – mã và lời nhắc): Tetris, Pacman, Connect 4 và thậm chí là một Rogue clone (bản sao) dành cho những người hoài cổ! Tệp này chứa các câu lệnh của tất cả các trò chơi này. Chọn câu lệnh bạn thích, điều chỉnh cho phù hợp và bắt đầu sáng tạo!

Nếu những gì bạn đã làm hôm nay có vẻ như quá tốn công sức, bạn cũng có thể thử 🔥 Firebase Studio, nơi ý tưởng > câu lệnh > mã > vòng lặp ứng dụng đều nằm trong một cửa sổ trình duyệt.

Một số trò chơi mẫu mà bạn có thể tạo:

Trò chơi hoàn thiện có thể có giao diện như sau:

Tetris 3D
Trò chơi ngôn ngữ
Bản sao độc hại
Một bản sao của Pacman.

Xin nhắc lại là chỉ chấp nhận tiếng Anh!

🎉 Chúc bạn lập trình vui vẻ!

Báo cáo lỗi