Hướng dẫn tạo trò chơi tương tác trên ChatGPT

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.