Giờ đây có AI tạo trò chơi ô chữ dễ ẹc luôn
Vô Gemini, bật chế độ Canvas và có thể gõ yêu cầu tạo game, mình lấy ví dụ promt thế này đi nha, mình muốn ô chữ về “Dấu của tam thức bậc hai” môn Toán lớp 10, bạn hoàn toàn có thể copy và chỉnh sửa lại nội dung
# ROLE (Vai trò):
Bạn là một Senior Web Game Developer với tư duy sư phạm xuất sắc. Bạn chuyên thiết kế các mini-game giáo dục tương tác cao, giao diện đẹp (Eye-catching) để thu hút học sinh.
# CONTEXT (Bối cảnh):
Tôi muốn nâng cấp game "Ô Chữ Toán Học" (Chủ đề: Tam thức bậc hai). Điểm nhấn của phiên bản này là ngoài các hàng ngang, phải có một **CỘT DỌC TỪ KHÓA BÍ ẨN** (Mystery Column) chạy xuyên qua các hàng. Học sinh giải các hàng ngang để tìm ra từ khóa dọc này.
# TASK (Nhiệm vụ):
Hãy viết mã nguồn Web Game trong 1 file duy nhất với các tính năng sau:
1. **Cấu trúc & Logic (Quan trọng):**
- **Cơ chế Grid:** Hiển thị lưới ô chữ dựa trên dữ liệu cấu hình.
- **Mystery Column:** Các ô tạo nên từ khóa dọc phải được đánh dấu nổi bật (ví dụ: viền đậm, màu nền nhạt khác biệt).
- **Gợi ý:** Khi click vào một dòng ngang, hiển thị câu hỏi tương ứng.
- **Chiến thắng:**
- Khi điền đúng một dòng ngang: Khóa dòng đó và đổi màu xanh.
- Khi hoàn thành tất cả: Hiển thị Popup chúc mừng + Hiệu ứng pháo giấy + Giải thích ý nghĩa từ khóa dọc.
2. **Giao diện (UI/UX) - Phong cách "Math & Magic":**
- **Style:** Neumorphism hoặc Glassmorphism (hiệu ứng kính) để tạo cảm giác hiện đại.
- **Màu sắc:** Tông màu chủ đạo là Xanh lá nhẹ kết hợp với Vàng Neon (cho các điểm nhấn) và Trắng, cam, xanh dương.
- **Feedback:** Âm thanh (nếu có thể dùng Audio API đơn giản beep/ding) hoặc rung hình ảnh khi trả lời sai.
# CONSTRAINTS (Ràng buộc):
- **Single File:** HTML, CSS, JS chung 1 file.
- **Dữ liệu cứng (Hardcoded):** Sử dụng chính xác cấu trúc dữ liệu tôi cung cấp bên dưới để đảm bảo các chữ cái khớp nhau tạo thành từ khóa dọc. KHÔNG tự ý random vị trí làm lệch từ khóa dọc.
- **Responsiveness:** Tự động co giãn tốt trên màn hình dọc (Mobile) và ngang (PC).
# OUTPUT FORMAT:
- Code Block chứa toàn bộ file HTML.
QUAN TRỌNG:
Nội dung kiến thức và Cấu trúc lưới (Đã tính toán kỹ để khớp từ khóa dọc là "VIET"):
**Từ khóa dọc bí ẩn:** VIET (Định lý Vi-ét)
**Dữ liệu hàng ngang (Thứ tự từ trên xuống dưới để khớp cột dọc):**
1. **VO NGHIEM** (Chữ V ở vị trí số 1
- Gợi ý: Tình trạng của phương trình bậc hai khi Delta < 0.
2. **BIEN THIEN** (Chữ I ở vị trí số 2)
- Gợi ý: Bảng dùng để xét sự tăng giảm của hàm số được gọi là bảng...
3. **DELTA** (Chữ E ở vị trí số 2)
- Gợi ý: Ký hiệu Δ, tính bằng b² - 4ac.
4. **TAM THUC** (Chữ T ở vị trí số 1)
- Gợi ý: Tên gọi của biểu thức f(x) = ax² + bx + c.
**Các từ bổ sung (Không thuộc cột dọc chính, hiển thị bên dưới hoặc tách biệt để game dài hơn - Tùy chọn hiển thị):**
5. **PARABOL** - Gợi ý: Đồ thị hàm số bậc 2.
6. **PHUONG TRINH** - Gợi ý: Bài toán tìm x.
*Lưu ý cho AI:* Hãy ưu tiên hiển thị 4 từ đầu tiên (VO NGHIEM, BIEN THIEN, DELTA, TAM THUC) thẳng hàng nhau theo các ký tự (V, I, E, T) để tạo thành cột dọc có nghĩa.Kết quả bạn được game như sau, bạn có thể chơi thử nhé
https://web.dayhoc.id.vn/ochu21126
Xem trực tiếp tại đây
Chúc bạn thành công
