Cách tạo trò chơi tương tác trên ChatGPT
Bước 1:
Trước hết chúng ta truy cập vào ChatGPT sau đó tiến hành nhập câu lệnh mô tả trò chơi tương tác mà bạn muốn xây dựng. Chúng ta cần phải mô tả rõ đối tượng của trò chơi, tuổi, yêu cầu của trò chơi là gì, cách thực hiện và phải có kết quả trả về là file HTML để có thể chạy được ngay.
Bạn đọc tham khảo prompt tạo trò chơi dưới đây.
Hãy đóng vai là một lập trình viên thiết kế trò chơi giáo dục cho trẻ mầm non.
Tạo một trò chơi tương tác hoàn chỉnh bằng HTML, CSS và JavaScript với chủ đề:
“NHÌN HÌNH ĐOÁN TÊN HÌNH HỌC”
========================
MỤC TIÊU GIÁO DỤC
Giúp trẻ 4–5 tuổi nhận biết các hình học cơ bản.
Trẻ nhìn hình và chọn đúng tên hình tương ứng.
Sau trò chơi trẻ có thể gọi tên đúng các hình học quen thuộc.
========================
YÊU CẦU GAME
Game gồm 10 câu hỏi.
Mỗi câu gồm:
Một hình học lớn hiển thị ở giữa màn hình.
3 đáp án dạng nút bấm lớn phía dưới.
Chỉ có 1 đáp án đúng.
Các hình sử dụng:
Hình tròn
Hình vuông
Hình tam giác
Hình chữ nhật
Hình ngôi sao
Hình trái tim
Hình oval
Hình thoi
Hình ngũ giác
Hình lục giác
========================
CÁCH CHƠI
Trẻ quan sát hình.
Đọc tên hình.
Nhấn vào đáp án đúng.
Nếu trả lời đúng:
Hiện hiệu ứng pháo hoa hoặc ngôi sao bay.
Phát âm thanh vui nhộn.
Hiện thông báo:
“Chính xác! Giỏi lắm!”
Cộng 1 ngôi sao.
Nếu trả lời sai:
Phát âm thanh sai nhẹ nhàng.
Hiện thông báo:
“Oops! Thử lại nhé!”
Không cộng sao.
Sau vài giây tự chuyển sang câu tiếp theo.
========================
GIAO DIỆN
Thiết kế theo phong cách:
Mầm non
Nhiều màu sắc
Đáng yêu
Sinh động
Dễ thao tác cho trẻ nhỏ
Yêu cầu giao diện:
Nền gradient tươi sáng.
Font chữ to, tròn, dễ đọc.
Nút bấm lớn bo góc.
Có icon hoạt hình vui nhộn.
Có hiệu ứng hover và bounce nhẹ.
Có animation chuyển cảnh mượt.
========================
THANH THÔNG TIN
Hiển thị:
Số câu hiện tại.
Thanh tiến trình.
Tổng số sao đã đạt được.
Biểu tượng ⭐ sinh động.
========================
ÂM THANH
Tạo âm thanh bằng JavaScript:
Âm đúng.
Âm sai.
Âm hoàn thành game.
Không dùng file âm thanh bên ngoài.
========================
MÀN HÌNH KẾT THÚC
Sau 10 câu:
Hiển thị tổng số sao.
Hiện lời khen:
Nếu >= 7 sao:
“Xuất sắc! Con đã nhận biết rất giỏi các hình học!”
Nếu < 7 sao:
“Con hãy thử lại để ghi nhớ các hình nhé!”
Có nút:
“Chơi lại”.
========================
YÊU CẦU KỸ THUẬT
Toàn bộ code nằm trong 1 file HTML duy nhất.
Bao gồm:
HTML
CSS
JavaScript
Không dùng thư viện ngoài.
Có chú thích rõ ràng trong code.
Responsive cho:
Máy tính
Máy tính bảng
Màn hình cảm ứng
========================
HIỆU ỨNG NÂNG CAO
Hiệu ứng fade khi chuyển câu.
Hiệu ứng rung nhẹ khi trả lời sai.
Hiệu ứng sao bay khi trả lời đúng.
Có confetti khi hoàn thành trò chơi.
Các nút có animation mềm mại.
========================
YÊU CẦU QUAN TRỌNG
Nội dung hoàn toàn bằng tiếng Việt.
Khi mở file HTML là chạy ngay.
Code sạch, dễ chỉnh sửa.
Tạo giao diện chuyên nghiệp như ứng dụng học tập cho trẻ em.
Hình học được vẽ trực tiếp bằng CSS hoặc SVG, không dùng ảnh ngoài.
Hãy xuất toàn bộ mã nguồn hoàn chỉnh.
Bước 2:
Chờ một lúc để ChatGPT tiến hành thiết kế trò chơi theo đúng như câu lệnh yêu cầu. Kết quả trả về là đoạn mã HTML mô tả trò chơi. Nhấn vào biểu tượng play để xem trước trò chơi hiển thị như thế nào.
Trò chơi tương tác sẽ hiển thị như dưới đây, trong quá trình xem trước nếu trò chơi gặp lỗi chỗ nào thì chúng ta nhập yêu cầu chỉnh sửa lại, và yêu cầu tiếp tạo lại đoạn mã HTML hoàn chỉnh sau khi có chỉnh sửa lại nội dung trò chơi.
Bước 3:
Nếu đã ưng ý với trò chơi này thì thấy cô nhập tiếp câu lệnh tạo file HTML để tải xuống, hoặc có thể copy toàn bộ câu lệnh trên vào Notepad và lưu dưới dạng .html là được.
Khi đó chúng ta chỉ cần nhấn vào đường dẫn để tải file HTML trò chơi xuống.
Cuối cùng chỉ cần click vào file html để chạy trò chơi là xong.
