Source code game giải đố đỗ xe: bên trong game giao thông 3D 30 màn
Gói Beep Out có gì, dự án TypeScript được sắp xếp ra sao và người mua thường sửa gì trước tiên.
Nếu bạn đang tìm source code game giải đố đỗ xe, câu trả lời ngắn gọn là: Beep Out là một game giải đố giao thông 3D hoàn chỉnh chạy trên trình duyệt, có 30 màn, bản build sẵn sàng tải lên và dự án TypeScript có thể chỉnh sửa đi kèm, giá $35. Bài viết này mở gói ra và cho bạn thấy từng phần dùng để làm gì.
Game kẹt xe trông đơn giản, nên một game làm kém sẽ lộ ra rất nhanh. Luật chơi phải hiểu được ngay từ cái nhìn đầu tiên, thứ tự các màn phải dạy người chơi, và code phải cho phép bạn thêm màn của riêng mình mà không làm hỏng màn cũ. Đó là ba điều chúng tôi xem xét ở đây, cùng với việc lưu trữ, giấy phép và những gì phiên bản này không có.
Gói mã nguồn game giải đố đỗ xe gồm những gì
Beep Out được bán dưới dạng Local Browser Edition, phiên bản 1.1.0. File tải về gồm hai phần: một game bạn có thể đưa lên mạng ngay hôm nay và một dự án bạn có thể chỉnh sửa.
- Thư mục game/ sẵn sàng tải lên, có đủ 30 màn.
- JavaScript, CSS và dữ liệu chạy thực tế ở dạng dễ đọc, để bạn thấy trình duyệt đang chạy gì.
- Mã nguồn TypeScript dành cho lập trình viên, kèm tài nguyên game và các bài kiểm thử.
- Hướng dẫn có hình minh họa bằng tiếng Anh và tiếng Bồ Đào Nha, gồm cài đặt, sơ đồ file, tùy biến, xử lý sự cố và FAQ.
- Thông báo giấy phép của các thư viện phụ thuộc và phông chữ.
Giao diện có 14 ngôn ngữ: tiếng Anh, Bồ Đào Nha, Tây Ban Nha, Pháp, Đức, Ý, Hà Lan, Ba Lan, Thổ Nhĩ Kỳ, Nga, Indonesia, Nhật, Hàn và tiếng Trung giản thể. Riêng tài liệu hướng dẫn chỉ có tiếng Anh và tiếng Bồ Đào Nha, điều này cần lưu ý nếu lập trình viên của bạn không đọc được cả hai.
Mở trang Beep Out và chơi thử bản demo
Game giải đố giao thông hoạt động thế nào, từng luật một
Mỗi xe có một mũi tên trên nóc chỉ hướng ra. Chạm hoặc nhấp vào xe có đường phía trước trống thì xe sẽ chạy đi. Chọn xe đang bị chặn thì nó đâm vào xe khác, vì vậy thứ tự nước đi quyết định cả màn chơi.
Từ màn 4, có một hàng hành khách chờ ở trạm xe buýt. Xe chỉ được rời đi khi cùng màu với hành khách kế tiếp. Xe đã thông đường nhưng sai màu sẽ vào ô đỗ chờ và tự rời đi khi đến lượt hành khách của nó. Bãi đỗ nhỏ, nên quá nhiều xe sai màu sẽ làm đầy bãi, buộc người chơi phải tính trước nhiều nước. Chính lớp luật thứ hai này biến một màn kẹt xe bình thường thành bài toán sắp xếp thứ tự.
Màn hình chơi có gợi ý, hoàn tác và chơi lại. Qua màn mà không chạm nhầm xe bị chặn, không dùng gợi ý hay hoàn tác sẽ được Clean Clear (qua màn sạch), và thời gian tốt nhất của từng màn có thể được lưu trong trình duyệt nếu muốn. Các màn đã qua mở khóa năm kiểu sơn trong Garage. Sơn chỉ để trang trí: xe nào cũng chơi như nhau.
Code được tổ chức ra sao
Có hai chỗ để làm việc, và nên tách riêng chúng. Thư mục game/ là bản đã build: tải lên là chơi được. Dự án dành cho lập trình viên là nơi bạn thay đổi: màn chơi, cài đặt, văn bản, logo và file âm thanh. Sau mỗi thay đổi, bạn build lại rồi thay toàn bộ thư mục game/ trên host bằng bản mới.
Công nghệ dùng là TypeScript, Three.js và WebGL2, build bằng Vite. Các file gồm HTML, CSS, JavaScript, TypeScript và JSON. Build lại cần Node.js 22.12 trở lên và npm. Chỉ để chơi thì không cần những thứ đó.
Dự án có sẵn bốn lệnh, và tài liệu giải thích từng lệnh:
- npm run levels kiểm tra file màn chơi trước khi build.
- npm test chạy các bài kiểm thử.
- npm run typecheck bắt lỗi kiểu trong TypeScript.
- npm run build tạo thư mục game mới.
Công cụ kiểm tra màn chơi quan trọng hơn bạn nghĩ. Game đỗ xe hỏng theo kiểu khó nhận ra: một màn không thể giải, một hành khách không có xe cùng màu. Chạy kiểm tra trước mỗi lần build rẻ hơn nhiều so với nghe người chơi báo lỗi.
Nên sửa gì trước trong template game đỗ xe
Chúng tôi gợi ý bắt đầu với bốn thay đổi sau, theo đúng thứ tự này.
1. Tên, logo và thương hiệu
Tiêu đề HTML và cài đặt thương hiệu nằm trong dự án nguồn, file logo ở public/ và âm thanh ở thư mục riêng. Thay file nhưng giữ nguyên đường dẫn, rồi build lại. Được phép white label: thương hiệu của bạn hoặc của khách hàng thay cho thương hiệu của chúng tôi.
2. Màn chơi
File thiết kế màn chơi nằm trong source/. Sửa chúng, kiểm tra bằng npm run levels, build lại và tải lên. Tài liệu có sơ đồ file nên bạn không phải lục code để tìm một màn.
3. Văn bản giao diện và ngôn ngữ
Văn bản giao diện nằm trong các file ngôn ngữ. Nếu người chơi của bạn dùng một trong 14 ngôn ngữ, hãy đọc qua mọi màn hình bằng ngôn ngữ đó một lần, vì thường có vài từ đáng chỉnh cho hợp giọng thương hiệu.
4. Cài đặt game
Cài đặt game được để trong file cấu hình chứ không rải khắp code. Mỗi lần chỉ đổi một giá trị và chơi vài màn sau mỗi lần đổi.
- Sao lưu gói gốc.
- Thay file thương hiệu, giữ nguyên đường dẫn.
- Sửa hoặc thêm màn rồi chạy npm run levels.
- Chạy npm test và npm run build.
- Thay toàn bộ thư mục game/ trên host, không thay lẻ từng file.
- Thử trên điện thoại và trình duyệt mà người chơi của bạn dùng.
Lưu trữ, nhúng vào trang và kho ứng dụng
Tải nội dung thư mục game/ lên bất kỳ host tĩnh HTTP(S) nào rồi mở địa chỉ đó. Không cần PHP, cơ sở dữ liệu, tài khoản hay máy chủ Node.js để chơi. Game chạy được trong thư mục con hoặc trong iframe trên trang của bạn, và tài liệu có sẵn đoạn iframe mẫu. Hãy cho iframe đủ chiều cao và giữ bộ nhớ trình duyệt được bật nếu cần giữ tiến trình sau khi tải lại trang.
Không hỗ trợ mở index.html trực tiếp từ ổ đĩa; game cần được phục vụ qua HTTP(S). Trình duyệt cần JavaScript, ES modules và WebGL2. Người chơi chạm trên màn hình cảm ứng và nhấp chuột trên máy tính; trong Settings có chế độ đồ họa Low giúp tiết kiệm pin trên điện thoại cũ.
Gói không có dự án ứng dụng native. Nếu bạn muốn đưa game lên kho ứng dụng, kết nối với SDK của portal hoặc cài lên máy chủ của bạn, đó là dịch vụ riêng và chúng tôi báo giá theo từng dự án.
Yêu cầu báo giá chỉnh sửa, lưu trữ hoặc bản ứng dụng
Phiên bản này không có gì
Beep Out là game một người chơi, dữ liệu lưu cục bộ. Tiến trình, kỷ lục và cài đặt nằm trong trình duyệt của người chơi. Không có chơi mạng nhiều người, không có bảng xếp hạng trực tuyến hay kỷ lục trên đám mây, không có SDK quảng cáo và không có SDK portal. Ứng dụng native, lưu trữ và dịch vụ host không nằm trong gói.
Với nhiều trang web, đó lại là cấu trúc phù hợp: không có gì phải bảo trì trên máy chủ và dữ liệu người chơi không rời khỏi trình duyệt. Nếu bạn cần bảng xếp hạng hoặc quảng cáo, hãy lên kế hoạch cho phần việc đó trước khi ra mắt chứ đừng để sau.
Giấy phép, hỗ trợ và giá trong một đoạn
Mỗi lần mua cho bạn giấy phép vĩnh viễn, không độc quyền để dùng phiên bản này trong một sản phẩm cuối, của bạn hoặc của một khách hàng. Người chơi có thể chơi miễn phí hoặc qua mô hình kiếm tiền bằng quảng cáo. Bạn được sửa code, hình ảnh và âm thanh trong sản phẩm đó và thay tên, logo của chúng tôi, nhưng không được bán lại hay chia sẻ riêng template, mã nguồn hoặc tài nguyên của nó. Hỗ trợ kéo dài 6 tháng, hoặc 12 tháng nếu mua gia hạn khi thanh toán, bao gồm cài đặt, sử dụng file và sửa các lỗi tái hiện được. Giá niêm yết là $35; đến hết ngày 30/11/2026, chương trình Black Friday giảm 15% cho mọi template nên Beep Out còn $29.75, và từ ngày 1/12 giá trở về mức niêm yết.
Đọc toàn bộ điều khoản giấy phép và hỗ trợ
Câu hỏi thường gặp
Tôi có cần máy chủ hay cơ sở dữ liệu không?
Không. Tải nội dung thư mục game/ lên host tĩnh HTTP(S) rồi mở index.html qua địa chỉ đó. Tiến trình và kỷ lục được lưu trong trình duyệt của người chơi.
Tôi có thể thêm màn đỗ xe của riêng mình không?
Có. Sửa file thiết kế màn chơi trong source/, kiểm tra bằng npm run levels, build lại và thay thư mục game/ trên host bằng bản mới.
Game giải đố giao thông có chạy trên điện thoại không?
Có. Người chơi chạm vào xe trên màn hình cảm ứng và nhấp chuột trên máy tính. Trình duyệt phải hỗ trợ WebGL2, và tùy chọn đồ họa Low giúp ích cho máy cũ. Hãy thử trên điện thoại của chính bạn trước khi ra mắt.
Tôi có thể đặt game vào trang web của mình không?
Có. Đặt game ở thư mục bất kỳ rồi nhúng bằng iframe. Tài liệu có sẵn đoạn code mẫu.
Có kèm quảng cáo hoặc điểm số trực tuyến không?
Không. Phiên bản này không có SDK quảng cáo, bảng xếp hạng trực tuyến hay chơi nhiều người. Thêm các phần đó là việc làm theo yêu cầu, báo giá theo từng dự án.
Tôi có thể dùng một giấy phép cho hai khách hàng không?
Không. Một giấy phép dành cho một sản phẩm cuối. Khách hàng thứ hai cần giấy phép thứ hai, và mua nhiều template trong cùng một đơn sẽ được giảm giá theo gói.
Các template giải đố liên quan
Nếu người chơi của bạn thích phân loại hơn là gỡ kẹt xe, Mochi Monsters là game giải đố sắp xếp màu với 60 màn trong ba thế giới và chế độ Endless (chơi vô tận), giá niêm yết $39. Nếu bạn muốn lượt chơi ngắn hơn, Gridspark là game xếp khối 8×8 có nước đi ZAP như tia chớp và thử thách hằng ngày dựng từ seed, giá niêm yết $29. Cả hai đều có mã nguồn dễ đọc và giao diện 14 ngôn ngữ.
Xem Mochi Monsters, game sắp xếp màu
Mua từ hai template trở lên trong cùng một đơn sẽ giảm giá mỗi giấy phép: giảm 5% khi mua hai, 10% khi mua ba, 15% khi mua bốn và 20% khi mua từ năm trở lên.