Golden Sea Gaming Studio
Trở về dự án

Giải pháp IT

Construction

Lĩnh vực

Web tương tác / Minh hoạ sản phẩm

Ba cái máy mở ra xem được ngay trên trình duyệt: máy ép nước mía ngoài phố, máy gắp thú bông và máy xay sinh tố. Xoay, bấm nút và nhìn mô tơ, dây cu-roa, bánh răng chạy bên trong.

Xem và bấm thử trên trình duyệt
Construction

Bối cảnh

Dự án làm gì và làm thế nào.

Construction là ba cái máy mở ra xem được ngay trên trình duyệt: máy ép nước mía ở góc phố, máy gắp thú bông và máy xay sinh tố trong bếp. Máy nào cũng được vẽ bằng code theo kiểu nét mực isometric. Kéo để xoay một vòng, bấm nút cho máy chạy, bật Xem bên trong để thấy mô tơ, dây cu-roa, bánh răng và dây điện làm việc, bật Tên bộ phận để biết cái nào là cái nào.

Máy nào cũng bắt đầu từ cách máy thật vận hành, ghi ra trước khi vẽ: cây mía đi qua khe nào trước, bã mía ra chỗ nào, đồng xu đi đâu sau khi qua khe, bộ phận nào phải chạm bộ phận nào thì lực mới tới được lưỡi dao. Các nút bấm đi đúng thứ tự đó. Đưa mía vào khi chưa bật máy, xay khi chưa đậy nắp hay gắp khi chưa bỏ xu đều có lời nhắc ngắn chứ không đứng im. Máy gắp thú còn làm lại phần người chơi không thấy: bo mạch quyết định móng kẹp chặt hay lỏng, và trong bản này thua bốn lượt liền thì lượt sau kẹp chặt.

Hình vẽ dựa trên Colorfigures, engine mã nguồn mở của April Zhu (giấy phép MIT), lo phần camera, đổ bóng, nét mực và công tắc Xem bên trong. Golden Sea dựng mô hình ba máy và cơ cấu bên trong, viết phần tương tác, Việt hoá giao diện cùng toàn bộ tên bộ phận, rồi kiểm tra từng máy ở bảy góc nhìn, cả lúc đóng lẫn lúc mở, và trên màn hình hẹp.

Mỗi máy là một file HTML nặng 120 đến 140 KB, không tải gì từ bên ngoài, chạy 60 khung hình mỗi giây khi thử trên trình duyệt máy tính. Bên dưới các máy, trang /construction giải thích cách từng máy chạy bằng chữ thường, để công cụ tìm kiếm và trợ lý AI đọc được đúng phần giải thích mà người xem thấy. Cách làm này dùng được cho trang sản phẩm: khách xoay sản phẩm, bấm thử nút và nhìn vào bên trong trước khi mua.

Phạm vi bàn giao

Những gì đã làm.

  1. 01Ba máy: máy ép nước mía, máy gắp thú bông, máy xay sinh tố
  2. 02Kéo để xoay một vòng, hai ngón để phóng to, chạy được trên điện thoại
  3. 03Chế độ Xem bên trong cho thấy mô tơ, dây cu-roa, bánh răng và dây điện đang chạy
  4. 04Mỗi máy có từ 12 đến 16 bộ phận có tên, bộ phận nào đang chạy thì sáng
  5. 05Nút bấm đi đúng thứ tự như máy thật, bấm sai bước thì có lời nhắc
  6. 06Mỗi máy là một file HTML 120 đến 140 KB, không tải gì từ bên ngoài

Hạng mục

Giải pháp IT

Công nghệ

SVG drawn in code · JavaScript · Colorfigures engine (open source, MIT) · Headless Chrome visual checks · Claude

Studio

Golden Sea Studios

TP. Hồ Chí Minh, Việt Nam

Dự án này chứng minh cho

Thiết kế Website

Trang sản phẩm dạng tương tác: khách xoay máy, bấm nút và nhìn vào bên trong ngay trên website, mỗi máy là một file nhẹ chạy được trên điện thoại.

Có một bài toán tương tự?

Gửi vài dòng mô tả, mình cùng xem làm được gì.

Ba máy trong dự án là bản mô phỏng để minh hoạ cấu tạo, không phải bản vẽ kỹ thuật của hãng nào. Hình vẽ dựa trên Colorfigures, engine mã nguồn mở của April Zhu (giấy phép MIT).