Kimi API for Vision-to-Code Generation

Xây dựng một trang HTML đơn tệp hoàn chỉnh cho trò chơi arcade Snake có thể chơi được, với toàn bộ CSS và JavaScript được nhúng trực tiếp, không dùng bất kỳ dependency bên ngoài, CDN, hình ảnh hay phông chữ nào. Vẽ bàn chơi trên canvas với bảng màu hiện đại kiểu neon trên nền tối, chuyển động mượt và vệt sáng mềm phía sau con rắn. Hỗ trợ điều khiển bằng phím mũi tên và WASD, kèm thao tác vuốt trên thiết bị cảm ứng; hiển thị điểm số trực tiếp và điểm cao nhất được lưu bền vững; đồng thời tăng tốc độ trò chơi dần khi điểm số tăng. Kích hoạt một vụ nổ hạt nhỏ mỗi khi ăn thức ăn, hiển thị lớp phủ game-over có hoạt ảnh với nút chơi lại, và giữ bố cục responsive để bàn chơi luôn được căn giữa, dễ nhìn trên cả desktop lẫn mobile.

Tạo một tệp HTML đơn lẻ, hoàn toàn tự chứa (toàn bộ CSS và JavaScript được nhúng trực tiếp, tuyệt đối không có dependency bên ngoài, CDN, hình ảnh hay web font) để hiển thị một "khu vườn thủy tinh kỹ thuật số sống" tương tác — một chiếc lọ thủy tinh kín đặt ở giữa màn hình, bên trong là khu rừng mưa thu nhỏ tự duy trì và phát triển theo thời gian thực. Mở trong bất kỳ trình duyệt hiện đại nào và nó phải chạy ngay ở 60fps, không cần bước build. Cảnh chính và bố cục: căn giữa bố cục một cách đối xứng, xem chiếc lọ thủy tinh như sân khấu trung tâm trên nền tối sâu có vignette (radial gradient từ tâm sáng dịu màu rêu mờ dần ra các mép gần như đen) để mọi sự chú ý đổ dồn vào chiếc lọ. Vẽ mọi thứ trên HTML5 Canvas toàn cửa sổ, đặt dưới lớp chrome DOM/CSS glassmorphism thật: thành lọ phải thể hiện đúng chất liệu thủy tinh — các vệt sáng khúc xạ cong, một vệt rim-light phản chiếu sắc nét, hiệu ứng mờ phủ sương nhẹ và những giọt ngưng tụ rải rác với hiệu ứng thấu kính nhỏ — đạt được bằng các lớp radial/linear gradient, backdrop-filter blur, nét viền trắng bán trong suốt và box-shadow mềm. Bên trong lọ là lớp đất mùn ẩm sẫm ở đáy và một làn sương thể tích mờ trôi chậm. Ba lớp kỹ thuật phải xếp chồng và cùng tồn tại (đây là điểm phân tách mô hình yếu với mô hình mạnh — mô hình yếu sẽ tạo ra một bức tranh tĩnh, mô hình mạnh khiến cả chiếc lọ trở nên sống động): 1. Sinh trưởng L-system đệ quy: dây leo, tàu dương xỉ và rêu được tạo bằng thuật toán L-system / phân nhánh đệ quy và có hoạt ảnh bung mở theo thời gian — thân cây dài ra, cành phân tách, tàu lá cuộn mở, lá phóng to dần với easing. Sự sinh trưởng phải hữu cơ và hơi ngẫu nhiên theo từng nhánh (dao động góc, độ dày thuôn dần, chiều dài suy giảm) để không có hai cây nào trông giống hệt nhau khi tải lại. 2. Hệ thống hạt: các đốm sáng màu hổ phách giống đom đóm (hàng chục hạt) trôi và nhấp nhô trong sương với ánh sáng additive glow mềm và parallax nhẹ, cùng các hạt ngưng tụ/phấn hoa bay lên; các hạt phản ứng tinh tế với cây mới mọc. 3. Chu kỳ ánh sáng ngày–đêm: một vòng lặp ánh sáng môi trường liên tục quét nguồn sáng chính từ trên xuống, từ bình minh trắng lạnh → hoàng hôn vàng ấm → đêm chàm sâu rồi quay lại, đồng thời đổi màu toàn bộ cảnh, các highlight trên thủy tinh, sương và tông màu cây cối tương ứng. Cây thể hiện phototropism — thân uốn cong và nghiêng ngọn về phía hướng sáng hiện tại khi ánh sáng di chuyển. Tương tác chính: khi nhấp vào bất kỳ đâu trên thành lọ/bên trong lọ, thả một hạt giống đơn vào lớp đất mùn tại vị trí x của cú nhấp; hạt giống đó diễn ra một vòng đời đầy đủ, nhìn thấy rõ theo trình tự — hạt rơi xuống và nằm yên, nảy mầm thành chồi, chồi phân nhánh đệ quy bằng L-system, rồi nở một bông hoa nhỏ phát sáng khi trưởng thành — mỗi giai đoạn đều có easing và dễ nhận biết, kèm gợn sóng/đám bụi mềm khi chạm đất. Nhiều cú nhấp tạo ra nhiều cây cùng tồn tại và tiếp tục phát triển, dần lấp đầy terrarium thành một bụi cây dày hơn. Thêm một vài điều khiển inline tinh tế dạng nút pill glassmorphic (ví dụ: "Reset terrarium" và nút chuyển "Day/Night: auto ⇄ drag" để người dùng có thể kéo chỉnh thời điểm trong ngày, kèm tùy chọn tạm dừng nếu muốn). Cung cấp một dòng gợi ý mờ ("chạm vào kính để trồng một hạt giống") và làm nó mờ đi sau tương tác đầu tiên. Bảng màu và cảm xúc: tán lá xanh mực rừng và vàng-xanh rêu, ánh hổ phách/mật ong cho các đốm sáng và hoa nở, sắc xanh teal thủy tinh mát trên chiếc lọ, các lớp phủ vàng ấm và chàm lạnh xuyên suốt chu kỳ ngày-đêm. Cảm giác tổng thể là tĩnh lặng, có hơi thở, thiền định — chuyển động chậm và dịu, không có chuyển cảnh gắt. Yêu cầu kỹ thuật: dùng requestAnimationFrame với delta-time để hoạt ảnh độc lập với frame-rate; làm canvas responsive khi thay đổi kích thước cửa sổ với tỉ lệ devicePixelRatio chính xác và giữ chiếc lọ ở giữa; giới hạn số lượng hạt/nhánh hợp lý để luôn mượt; giữ mọi yếu tố ngẫu nhiên được seed theo từng cây để sinh trưởng trông tự nhiên. Mọi thứ — hình học, ánh sáng phát quang, thủy tinh, sương, ánh sáng, hạt và cây đệ quy — đều phải được vẽ hoặc tính toán bằng code, không dùng bất kỳ asset bên ngoài nào. Chỉ xuất tài liệu HTML hoàn chỉnh, sẵn sàng lưu thành một tệp .html và mở.