Bạn đã bao giờ tưởng tượng chỉ cần đưa tay lên trước màn hình, tạo một khung vuông bằng ngón tay, rồi bức ảnh khuôn mặt bạn lập tức bị xé ra thành 9 mảnh ghép để thách thức trí thông minh của chính mình? Đó chính xác là trải nghiệm mà Xếp Hình Jigsaw AI mang lại — một trò chơi puzzle tương tác hoàn toàn không chạm, chạy trực tiếp trên trình duyệt web.

Trò chơi hoạt động theo ba giai đoạn liền mạch. Đầu tiên, bạn giơ cả hai bàn tay lên trước camera, dùng ngón cái và ngón trỏ của mỗi tay để tạo thành một khung vuông hologram phát sáng xanh neon. Giữ yên tay trong 2 giây — hệ thống sẽ tự động chụp ảnh thật từ webcam, cắt gọn bên trong khung vuông đó, rồi rã thành lưới 3×3 gồm 9 mảnh ghép bị xáo trộn ngẫu nhiên.

Bước vào giai đoạn ghép hình, bạn điều khiển bằng cử chỉ kẹp ngón cái và ngón trỏ lại gần nhau (pinch) để “nhấc” một mảnh ghép lên. Mảnh ghép sẽ bám theo đầu ngón tay di chuyển mượt mà nhờ thuật toán nội suy tuyến tính. Khi bạn xòe ngón tay ra, mảnh ghép được thả xuống và hoán đổi vị trí. Mọi thao tác đều có âm thanh phản hồi sống động được tổng hợp trực tiếp bằng Web Audio API.

Khi tất cả 9 mảnh ghép về đúng vị trí, màn hình bùng nổ pháo hoa confetti rực rỡ cùng khúc nhạc khải hoàn. Thời gian hoàn thành được ghi nhận vào bảng xếp hạng Top 5 lưu trữ cục bộ, thách thức bạn liên tục phá kỷ lục cá nhân. Chỉ cần ra dấu “OK” bằng tay, cuộc chơi mới sẽ bắt đầu ngay lập tức. Đây không chỉ là một trò chơi — mà là một trải nghiệm công nghệ tương lai ngay trong tầm tay bạn.

🎬 Video demo
Prompt game xếp hình Jigsaw AI tay điểu khiển trước camera
🤖 Prompt AI 4 lượt dùng
Hãy xây dựng một trò chơi xếp hình Jigsaw Puzzle tương tác hoàn toàn bằng cử chỉ tay qua camera, sử dụng HTML5 Canvas 2D, JavaScript thuần và thư viện MediaPipe Hands. Game phải chạy trực tiếp trên trình duyệt, không cần cài đặt. Yêu cầu chi tiết như sau: ═══════════════════════════════════════ 1. KIẾN TRÚC & CÔNG NGHỆ ═══════════════════════════════════════ - File HTML chính chứa: thẻ <video> (webcam background, object-fit: cover, transform: scaleX(-1) để lật gương), thẻ <canvas> (full-screen overlay vẽ game), thẻ <div> cho Status Bar, Loading Screen, Flash Effect và bảng xếp hạng Leaderboard. - Tách riêng file CSS và JavaScript ra ngoài (modular): css/game-xep-hinh.css và js/game-xep-hinh.js. - Nạp MediaPipe Hands từ CDN: `https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js` với tùy chọn maxNumHands: 2, modelComplexity: 1, minDetectionConfidence: 0.72, minTrackingConfidence: 0.65. - Nạp Google Fonts: "Outfit" (cho tiêu đề, timer, nút bấm) và "Share Tech Mono" (cho giao diện HUD trạng thái). ═══════════...

Đăng nhập để nhận Prompt AI miễn phí