Hướng dẫn làm game Kim cương cổ điển với ChatGPT

Trong bài viết dưới đây của GameVui, chúng ta sẽ không chỉ dừng lại ở việc chơi, mà sẽ cùng nhau tự tay xây dựng một phiên bản của game Kim cương cổ điển hoàn chỉnh bằng sự trợ giúp của ChatGPT. Nghe có vẻ hơi khó khăn nhưng thật ra lại thú vị hơn bạn nghĩ rất nhiều, hãy cùng tham khảo nhé.

Cách làm game Kim cương cổ điển với ChatGPT

Bước 1: Trước tiên, bạn vào Copilot AI rồi nhập Promt sau để tạo file hình ảnh các viên kim cương

hãy tạo giúp tôi bộ sprite chuẩn của các viên kim cương trong game Kim cương cổ điển, định đạng png, có nền trong suốt

Bước 2: Sau khi Copilot AI tạo xong hình ảnh, bạn hãy tải về máy tính. Tiếp theo, bạn hãy mở ứng dụng ChatGPT và tải lên hình ảnh sprite kim cương đồng thời nhập Prompt sau

Tạo full bộ assets các viên kim cương từ hình ảnh có sẵn

Bước 3: ChatGPT sẽ tiến hành tạo cho bạn 6 viên kim cương dưới dạng file SVG (từ Gem 0 đến Gem 5), bạn hãy tải về chung một thư mục Gems như hình dưới đây.

Bước 4: Sau khi đã có 6 file hình ảnh kim cương, bạn hãy nhập lệnh sau để ChatGPT tạo file html hoàn chỉnh

Hãy đóng vai một lập trình viên game chuyên nghiệp. Tạo cho tôi một game 
match-3 (giống Bejeweled cổ điển) với các yêu cầu chi tiết sau:

1. Công nghệ:
- Sử dụng HTML, CSS, JavaScript (ưu tiên thuần hoặc framework nhẹ như 
Phaser.js hoặc Canvas API)
- Game phải chạy được trên trình duyệt web (desktop + mobile)
- Responsive (tự điều chỉnh giao diện phù hợp màn hình điện thoại và máy tính)

2. Gameplay cơ bản:
- Bàn chơi dạng lưới (grid) kích thước 8x8
- Các viên kim cương (gems) có ít nhất 5 màu khác nhau
- Người chơi có thể kéo hoặc swap 2 viên kề nhau
- Nếu tạo thành hàng ≥ 3 viên cùng loại theo hàng ngang hoặc dọc → sẽ bị xóa
- Sau khi xóa:
  + Các viên phía trên rơi xuống (gravity)
  + Sinh thêm gem mới từ trên xuống

3. Cơ chế game:
- Tính điểm cho mỗi lần match
- Combo: nếu có nhiều match liên tiếp → tăng điểm
- Hiệu ứng khi match (animation đơn giản)
- Giới hạn số lượt hoặc tính thời gian (có thể chọn 1 trong 2)

4. Điều khiển:
- Trên PC: dùng chuột drag & drop hoặc click
- Trên mobile: hỗ trợ swipe (vuốt)

5. Giao diện:
- Thiết kế đơn giản nhưng đẹp mắt
- Có hiển thị:
  + Điểm số (score)
  + Lượt còn lại hoặc thời gian
  + Nút restart game
- Hiệu ứng chuyển động mượt (CSS animation hoặc JS animation)

6. Âm thanh (optional nhưng khuyến khích):
- Âm thanh khi swap
- Âm thanh khi match

7. Cấu trúc code:
- Code rõ ràng, có comment giải thích
- Tách logic game và UI
- Dễ mở rộng (ví dụ thêm power-up sau này)

8. Nâng cao (nếu có thể):
- Tạo các loại gem đặc biệt:
  + Match 4 → gem nổ hàng
  + Match 5 → gem đặc biệt (bomb hoặc rainbow)
- Hiệu ứng chain reaction

9. Output:
- Cung cấp đầy đủ code HTML + CSS + JS trong 1 file hoặc tách file
- Hướng dẫn cách chạy game
- Giải thích ngắn gọn logic chính (grid, match detection, gravity)

Yêu cầu code hoàn chỉnh, có thể chạy ngay khi copy vào file HTML.

Bước 5: Sau đó, bạn tải file html và đặt tên là index.html, để cùng thư mục với Gems ở trên. Bạn chỉ cần mở file index.html lên để chơi là xong.