Cách tạo game Hợp nhất trái cây bằng Meta AI

Chắc hẳn nhiều game thủ từng say mê với những màn hợp nhất trái cây đầy màu sắc thì điều thú vị là giờ đây bạn không chỉ chơi game mà còn có thể tự tay tạo ra một phiên bản của riêng mình chỉ với Meta AI.

Trong bài viết dưới đây, chúng ta sẽ cùng khám phá cách sử dụng Meta AI để xây dựng game Hợp nhất trái cây từ những bước cơ bản nhất. Từ việc lên ý tưởng, tạo cơ chế ghép trái cây, thiết kế giao diện cho đến hoàn thiện trải nghiệm chơi, mọi thứ đều có thể được hỗ trợ bởi AI.

Hướng dẫn tạo game Hợp nhất trái cây bằng Meta AI

Bước 1: Trước tiên, bạn lên mạng tải bộ ảnh gồm khoảng 10 ảnh các loại trái cây, định dạng png, có nền trong suốt rồi để chung trong thư mục Assets như hình bên dưới.

Bước 2: Bạn hãy mở ứng dụng Meta AI lên rồi nhập Prompt sau đồng thời tải 10 bức ảnh trái cây lên

Hãy resize chuẩn kích thước cho cả 10 quả trên để làm game Hợp nhất hoa quả

Bước 3: Sau khi đã có bộ hoa quả đúng kích thước phù hợp, hãy nhập Prompt sau để tạo game Hợp nhất trái cây

1. Mục tiêu

Tạo một game web đơn giản bằng HTML + CSS + JavaScript (Canvas 2D) dạng “Merge Fruit”.

Người chơi thả trái cây vào khung, các trái cây giống nhau sẽ hợp nhất thành cấp cao hơn.

2. Bộ trái cây có sẵn (ASSET)

Sử dụng đúng danh sách này:

apple
avocado
banana
cherry
grape
pear
pineapple
strawberry
tomato
watermelon
3. QUAN TRỌNG: VẤN ĐỀ KÍCH THƯỚC ẢNH
⚠ Asset hiện tại:
Các ảnh có kích thước khác nhau
KHÔNG được resize thủ công
KHÔNG phụ thuộc kích thước file ảnh
✔ Cách xử lý đúng:
Tất cả hiển thị sẽ được chuẩn hóa bằng canvas draw size
Game sẽ luôn ép size bằng code
4. THỨ TỰ MERGE (LEVEL SYSTEM)
0 cherry
1 grape
2 strawberry
3 tomato
4 banana
5 pear
6 apple
7 avocado
8 pineapple
9 watermelon
5. CORE GAMEPLAY
Trái cây rơi từ trên xuống theo gravity
Người chơi click hoặc kéo để chọn vị trí thả
Trái cây có physics đơn giản (gravity + bounce)
Khi 2 trái giống nhau chạm → merge
6. CANVAS RENDERING RULE (QUAN TRỌNG NHẤT)
KHÔNG dùng kích thước ảnh gốc

Tất cả render phải dùng:

ctx.drawImage(img, x, y, size, size);
7. SCALE SYSTEM (FIX LỆCH SIZE)

Game tự quyết định size theo level:

const fruitSize = [
  30,  // cherry
  32,  // grape
  35,  // strawberry
  38,  // tomato
  42,  // banana
  48,  // pear
  55,  // apple
  62,  // avocado
  70,  // pineapple
  80   // watermelon
];

👉 Mục tiêu:

level càng cao → trái càng to
KHÔNG liên quan kích thước ảnh gốc
8. MERGE LOGIC
if (fruitA.type === fruitB.type) {
    let newType = fruitA.type + 1;

    if (newType <= 9) {
        spawnFruit(newType, position);
        remove(fruitA);
        remove(fruitB);

        score += newType * 10;
    }
}
9. PHYSICS ĐƠN GIẢN

Không cần physics engine phức tạp.

Dùng logic:

gravity tăng dần theo frame
collision bằng bounding circle
vy += gravity;
y += vy;
10. COLLISION

Dùng khoảng cách:

if (distance(fruitA, fruitB) < radiusA + radiusB) {
    merge();
}
11. UI CƠ BẢN
Score (góc trên)
Next fruit preview
Restart button
Game Over khi chạm vạch đỏ
12. SPAWN SYSTEM
Fruit spawn từ top center
Người chơi click để chọn vị trí thả
Next fruit được random từ list
13. GAME OVER CONDITION
Nếu trái cây vượt quá line trên cùng container → game over
14. YÊU CẦU OUTPUT

AI phải tạo:

1 file HTML duy nhất (hoặc 3 file html/css/js)
Canvas-based rendering
Full merge logic hoạt động
Physics đơn giản nhưng mượt
Score system
Game over system
Load được ảnh từ folder assets
15. STYLE GAME
Casual
Cute fruit
Giống game “Suika / Merge Fruit”
Không cần animation phức tạp
16. TƯ DUY QUAN TRỌNG (NHẮC LẠI)
❌ KHÔNG dùng kích thước ảnh để quyết định size
❌ KHÔNG resize asset thủ công
✅ Canvas sẽ quyết định toàn bộ kích thước hiển thị
✅ Game logic = index level, không phải image size
🚀 OUTPUT EXPECTED

Một game HTML chạy được ngay:

có physics
có merge
có score
có game over
dùng đúng asset trái cây đã có
xử lý được ảnh không đồng đều

Bước 4: Meta AI sẽ phân tích Prompt của bạn rồi tạo file index.html, bạn tải về chung với thư mục Assets rồi mở lên để chơi