Ba trò chơi web 3D được tạo bằng Claude Opus 5.5: Hướng dẫn xây dựng và chơi thử tại máy

Giới thiệu dự án

claude-opus-5-5-demo là một thử nghiệm về khả năng tạo mã của Claude Opus 5.5. Kho mã chứa ba trò chơi web 3D có thể chơi trực tiếp. Mỗi dự án chỉ sử dụng một câu lệnh提示, hoàn thành việc tra cứu thông tin, thiết lập dự án, lập trình, xây dựng, kiểm thử và triển khai trong một phiên Claude Code duy nhất.

Theo mô tả của kho mã, mã nguồn của cả ba trò chơi đều do mô hình tạo ra và không được con người chỉnh sửa. Dự án sử dụng Three.js để dựng cảnh 3D, sau đó dùng esbuild đóng gói chương trình và nội tuyến vào một tệp HTML duy nhất. Mô hình, kết cấu, hoạt ảnh và âm thanh đều được tạo bằng mã theo phương pháp thủ tục, không phụ thuộc vào hình ảnh, âm thanh hoặc tài nguyên bên thứ ba bên ngoài.

Đây không phải là mẫu phát triển trò chơi truyền thống, mà là kết quả của một nhóm thử nghiệm tạo mã one-shot có thể chạy, xây dựng và kiểm tra.

Ba trò chơi và điểm nổi bật

Bồ nông đạp xe

Đây là trò chơi đạp xe thư giãn trên đường ven biển. Người chơi điều khiển một chú bồ nông đội mũ bảo hiểm, đeo kính râm và quàng khăn đỏ, đạp xe bắt cá. Dự án có khăn quàng với vật lý vải, sóng biển và bọt sóng ven bờ, chu kỳ ngày đêm, hiệu ứng âm thanh và âm nhạc tạo theo phương pháp thủ tục, cùng cơ chế tự động điều chỉnh chất lượng dựa trên tốc độ khung hình.

• W, S: Tăng tốc và giảm tốc.
• A, D: Đổi làn và tiếp cận cá.
• Phím cách: Nhảy.
• T: Dang cánh và nâng bánh trước.
• Tự lái: Khi không thao tác trong thời gian dài, bồ nông sẽ tự động đuổi theo cá.

Trò chơi cũng cung cấp 14 thành tựu, 5 chế độ camera, nút điều khiển cảm ứng và âm nhạc tổng hợp theo thời gian thực trong trình duyệt, thay đổi theo nhịp đạp.

Chơi thử Bồ nông đạp xe trực tuyến

CrossFire · Tàu vận tải

Dự án này cố gắng tái hiện bản đồ Tàu vận tải kinh điển của 《CrossFire》. Trong quá trình tạo, mô hình trước tiên tra cứu sơ đồ bố cục và hướng dẫn, sau đó dựng cảnh dựa trên các đặc điểm như boong tàu dài, điểm xuất hiện trong khoang ở hai đầu, các container xếp nghiêng hình chữ V ở giữa và các đường ống một chiều ở hai bên.

Cách chơi bao gồm đường đạn, độ giật của súng, đấu với AI robot, phản hồi khi bắn trúng, thông báo hạ gục, tiếng súng và các hiệu ứng âm thanh khác được tạo theo phương pháp thủ tục, đồng thời hỗ trợ điều khiển cảm ứng.

Chơi thử CrossFire · Tàu vận tải trực tuyến

QQ Speed

Dự án đua xe tái hiện các thao tác drift bằng Shift, nitro bằng Ctrl, tăng tốc ngắn, tăng tốc kép và đặt lại vị trí, đồng thời cung cấp bốn đường đua được thiết kế theo phong cách bản đồ chính thức.

• Thành phố 11: Đường đua cảnh đêm thành phố, gồm 11 khúc cua và cua tóc.
• Say mê Aegean: Nổi bật với các đoạn dốc và chuỗi khúc cua liên tiếp.
• Kim tự tháp Pharaoh: Có bệ nhảy ở cuối đoạn đường thẳng.
• Phiêu lưu trên tuyết: Sử dụng cấu trúc giao nhau hình số 8.

Trước khi phát triển chính thức, hình dạng đường đua được tạo bằng tập lệnh dưới dạng hình chiếu từ trên xuống để kiểm tra bố cục khúc cua và các điểm giao nhau.

Chơi thử QQ Speed trực tuyến

Chuẩn bị trước khi bắt đầu

Để xây dựng tại máy, cần có môi trường có thể chạy npm và tập lệnh Node.js. Kho mã không lưu node_modules/ và dist/, vì vậy sau khi sao chép hoặc tải mã nguồn, cần cài đặt dependency và chạy build riêng cho trò chơi muốn trải nghiệm.

Ba dự án con độc lập với nhau. Bạn có thể chỉ xây dựng một dự án hoặc xây dựng lần lượt từng dự án. Các dependency chính gồm Three.js và esbuild.

Cấu trúc kho mã

pelican-bike/
  src/
  index.template.html
  build.mjs
  package.json

cf-transport-ship/
  src/
  build.mjs
  package.json

qq-speed/
  src/
  build.mjs
  wrangler.jsonc
  package.json

pelican-bike/src/ chứa 11 mô-đun, liên quan đến bồ nông, xe đạp, đại dương, cá, bầu trời, hiệu ứng và âm thanh. cf-transport-ship/src/ chứa 18 mô-đun, bao quát bản đồ, súng, vũ khí, robot, người chơi, vật lý và mô hình vũ khí góc nhìn thứ nhất. qq-speed/src/ chứa 15 mô-đun, liên quan đến xe, đường đua, bố cục, AI, bản đồ và vật phẩm.

Cài đặt và xây dựng

Cách 1: Xây dựng Bồ nông đạp xe

cd pelican-bike
npm install
node build.mjs

Cách 2: Xây dựng CrossFire · Tàu vận tải

cd cf-transport-ship
npm install
node build.mjs

Cách 3: Xây dựng QQ Speed

cd qq-speed
npm install
node build.mjs

Sau khi xây dựng xong mỗi dự án, sản phẩm sẽ được ghi vào dist/index.html trong thư mục tương ứng. Theo cách sử dụng được cung cấp trong kho mã, chỉ cần mở trực tiếp tệp này bằng trình duyệt để chơi.

Dung lượng của ba sản phẩm build khoảng 700 KB đến 840 KB. Vì JavaScript đã được đóng gói vào HTML, khi chạy không cần tải thêm mô hình, kết cấu hoặc tài nguyên âm thanh của trò chơi.

Quy trình sử dụng cơ bản

1. Chọn một trò chơi trong ba thư mục con.
2. Vào thư mục tương ứng và chạy npm install.
3. Chạy node build.mjs.
4. Xác nhận đã tạo dist/index.html.
5. Mở tệp này bằng trình duyệt.
6. Sử dụng bàn phím hoặc bộ điều khiển cảm ứng tùy loại trò chơi để bắt đầu chơi.

Nếu chỉ muốn trải nghiệm nhanh mà không kiểm tra mã nguồn hoặc xây dựng lại, bạn có thể mở trực tiếp địa chỉ trực tuyến của dự án đã được triển khai lên Cloudflare Pages hoặc CDN.

Tìm hiểu cách xây dựng một tệp

“HTML một tệp” ở đây nghĩa là trang cuối cùng nội tuyến JavaScript đã đóng gói vào HTML. src/ vẫn được chia thành nhiều mô-đun theo chức năng để thuận tiện phát triển và bảo trì; sau khi chạy build.mjs, esbuild sẽ hợp nhất các mô-đun này thành sản phẩm có thể chạy trên trình duyệt.

Dự án bồ nông còn sử dụng index.template.html làm mẫu trang, chèn JavaScript đã đóng gói và og:image trong quá trình build. Kho mã chỉ commit các tệp nguồn, vì vậy sau khi sửa mã nguồn cần chạy lại tập lệnh build để tạo dist/index.html mới.

Đọc nâng cao và gợi ý debug

Xác định chức năng theo mô-đun

Khi đọc mã, không cần bắt đầu từ sản phẩm build hoàn chỉnh. Bạn có thể xác định chức năng dựa trên tên mô-đun trong thư mục: chẳng hạn kiểm tra mô-đun đại dương, bầu trời, âm thanh hoặc hiệu ứng trong dự án bồ nông; kiểm tra mô-đun súng, robot, người chơi và vật lý trong dự án FPS; kiểm tra mô-đun xe, đường đua, AI và bố cục bản đồ trong dự án đua xe.

Luôn xây dựng lại sau khi sửa

Khi phát triển, nên sửa các tệp nguồn trong src/, thay vì coi dist/index.html là mã nguồn chính. Sau khi sửa xong, hãy chạy lại:

node build.mjs

Vì dist/ không được lưu trong kho mã, sau khi sao chép lại kho mã hoặc dọn dẹp thư mục làm việc, bạn cũng cần xây dựng lại.

Kiểm tra độ ổn định trong thời gian dài

Nhật ký kho mã cho thấy trò chơi bồ nông từng trải qua bài kiểm tra ngâm nhanh 320 giây để bao phủ toàn bộ chu kỳ ngày đêm, đồng thời theo dõi số lượng hình học, số lượng kết cấu và bộ nhớ heap JavaScript có ổn định hay không. Ngoài ra, ranh giới lấy dư ở mốc 36 km cũng được kiểm thử riêng.

Nếu bạn sửa logic đường vô hạn, hệ thống ngày đêm, hạt, mặt biển hoặc kết cấu, có thể áp dụng cách tương tự: chạy trò chơi trong thời gian dài, quan sát xem số lượng tài nguyên có liên tục tăng hay không, đồng thời kiểm tra các điểm tới hạn của quãng đường, bộ đếm thời gian và hoạt ảnh lặp.

Kiểm tra ảnh hưởng của giá trị không hợp lệ lên hậu xử lý

Sau khi dự án được phát hành từng xuất hiện màn hình đen không thường xuyên. Nhật ký cho thấy sự cố được tái hiện bằng cách đưa NaN vào, cuối cùng xác định nguyên nhân là hậu xử lý Bloom đã khuếch tán pixel không hợp lệ thành các mảng đen. Cách khắc phục gồm thêm một pass dọn dẹp trước hiệu ứng phát sáng và xử lý các nguồn giá trị không hợp lệ như Fresnel của mặt biển.

Điều này cho thấy khi sửa mã shader, mặt biển, ánh sáng hoặc hậu xử lý, không chỉ cần kiểm tra lỗi cú pháp mà còn phải chú ý liệu kết quả tính toán có thể tạo ra NaN hoặc các giá trị không hợp lệ khác hay không.

Kiểm tra thao tác và một ván chơi hoàn chỉnh

Dự án gốc sử dụng trình duyệt không đầu để kiểm tra việc tải trang, lỗi khi chạy, mô phỏng phím bấm và chạy một ván hoàn chỉnh. Khi mở rộng logic trò chơi, nên tập trung kiểm tra quy trình khởi động, phản hồi phím, điều kiện thắng thua, hành vi đặt lại và trạng thái chạy lâu dài, thay vì chỉ xác nhận trang chủ có thể hiển thị.

Duy trì ưu điểm của một tệp khi triển khai

Sản phẩm build là dist/index.html độc lập, phù hợp để đưa lên dịch vụ lưu trữ trang tĩnh. Ba trò chơi trong kho mã đã được triển khai lên Cloudflare Pages; trong đó qq-speed/ còn chứa cấu hình triển khai wrangler.jsonc. Trước khi phát hành thực tế, nên xác nhận sản phẩm build có thể mở bình thường tại máy, sau đó xử lý việc tạo dự án, liên kết tên miền, làm mới bộ nhớ đệm và trạng thái chứng chỉ.

Phạm vi và lưu ý của dự án

• Ba trò chơi là sản phẩm kiểm thử năng lực do Claude Opus 5.5 tạo trong Claude Code.
• Môi trường tạo được mô tả trong kho mã sử dụng ngữ cảnh 1M và mức suy luận xhigh.
• Mỗi trò chơi chỉ nhận một câu lệnh yêu cầu và được hoàn thành trong một phiên duy nhất.
• Các dự án liên quan đến 《CrossFire》 và 《QQ Speed》 mang tính tri ân, không liên quan đến nhà sản xuất gốc.
• Thời gian tạo được ghi trong kho mã là tháng 9 năm 2026.

Tổng kết

claude-opus-5-5-demo cho thấy kết quả của việc tạo một trò chơi web 3D hoàn chỉnh từ một câu lệnh, đồng thời cung cấp mã nguồn mô-đun có thể kiểm tra và quy trình build thống nhất. Chọn bất kỳ dự án con nào, cài đặt dependency và chạy node build.mjs để tạo HTML một tệp có thể mở trực tiếp. Khi tìm hiểu sâu hơn, bạn có thể tập trung nghiên cứu việc tạo tài nguyên theo phương pháp thủ tục, chia tách mô-đun trò chơi, kiểm tra độ ổn định trong thời gian dài và bảo vệ khỏi giá trị bất thường trong hậu xử lý WebGL.