Cách thêm game HTML5 vào website công ty

Có ba cách thêm một game vào website công ty: nhúng một game do người khác lưu trữ bằng iframe, tải tệp của game lên không gian web của bạn và hiển thị trên một trang, hoặc cấp phép một game dưới dạng gói và xuất bản như sản phẩm của chính bạn. Cách đầu nhanh nhất để thử. Cách thứ hai cho bạn nhiều quyền kiểm soát nhất. Cách thứ ba phù hợp khi game phải mang thương hiệu của bạn về lâu dài.

Hướng dẫn này dành cho doanh nghiệp, agency và chủ website dùng WordPress, Wix, website tự thiết kế, intranet hoặc cổng thông tin. Nó so sánh các lựa chọn, đưa ra danh sách kiểm tra trước khi ra mắt và liệt kê những gì có trong gói của Polar Games. Đây là thông tin chung, không phải tư vấn pháp lý.

Ba cách đưa game lên website

1. Nhúng bằng iframe. Một game được lưu trữ ở nơi khác sẽ xuất hiện trong một khung trên trang của bạn. Bạn chỉ viết một thẻ, nhưng game, các bản cập nhật và khả năng truy cập của nó vẫn thuộc về bên lưu trữ.
2. Tự lưu trữ tệp. Bạn tải thư mục của game lên không gian web riêng và mở nó tại địa chỉ của bạn, riêng lẻ hoặc trong một iframe trên một trang của bạn. Với các gói của chúng tôi, một máy chủ phục vụ tệp tĩnh là đủ: không cần PHP, cơ sở dữ liệu hay tài khoản nào để chơi.
3. Cấp phép game dưới dạng gói. Studio giao một thư mục sẵn sàng để lưu trữ, mã nguồn có thể chỉnh sửa và tài liệu hướng dẫn, theo giấy phép cho một sản phẩm cuối. Bạn tự lưu trữ, và bạn được phép thay đổi mã, hình ảnh và âm thanh bên trong sản phẩm đó.

Xem các mẫu game HTML5

Iframe hay tự lưu trữ: so sánh

• Tốc độ: một khung tải game từ máy chủ của bên lưu trữ, nên trang của bạn phụ thuộc vào máy chủ đó. Tệp trên máy chủ của riêng bạn được tải từ một địa chỉ bạn kiểm soát.
• Quyền kiểm soát: trên máy chủ riêng, bạn quyết định địa chỉ, trang bao quanh game, bộ nhớ đệm và cập nhật. Với nhúng của người khác, bên đó quyết định và có thể thay đổi hoặc gỡ game.
• Cookie và sự đồng ý: một game tải từ địa chỉ của bên thứ ba khiến khách truy cập của bạn liên hệ với địa chỉ đó, và bên đó có thể đặt cookie riêng hoặc đo lượt truy cập. Tệp tự lưu trữ đến từ tên miền của bạn. Quảng cáo và phân tích, dù chạy ở đâu, có thể cần sự đồng ý, nên hãy kiểm tra các quy định áp dụng cho bạn với một cố vấn có chuyên môn.
• Tìm kiếm: đừng trông vào một game trong iframe để cung cấp văn bản cho trang của bạn. Hãy viết tiêu đề, mô tả ngắn, hướng dẫn và liên kết của riêng bạn xung quanh game.

Thẻ iframe, từng thuộc tính

Một đoạn nhúng điển hình cho game bạn tự lưu trữ. Các ghi chú về thuộc tính lấy từ tài liệu tham khảo iframe của MDN.

<iframe src="https://your-site.example/games/my-game/" title="My Game" loading="lazy" allow="fullscreen" width="960" height="540" style="border:0"></iframe>

• title: MDN nói người dùng trình đọc màn hình có thể dùng nó để gắn nhãn nội dung của khung, và nó nên mô tả nội dung đó một cách ngắn gọn.
• allow="fullscreen": MDN định nghĩa thuộc tính allowfullscreen kiểu cũ là allow="fullscreen *". Nếu không có quyền này, một khung từ địa chỉ khác không thể chuyển sang toàn màn hình.
• sandbox: bỏ qua với game bạn tự lưu trữ. MDN khuyến cáo mạnh không kết hợp allow-scripts với allow-same-origin trên một khung cùng nguồn, vì khi đó khung có thể gỡ chính sandbox của nó.
• Khung trống hoặc từ chối kết nối: máy chủ lưu trữ game có thể gửi X-Frame-Options (DENY chặn mọi khung, SAMEORIGIN chỉ cho phép cùng nguồn) hoặc một quy tắc frame-ancestors trong tiêu đề Content-Security-Policy, mà MDN khuyên dùng thay thế. Hãy đổi tiêu đề cho thư mục của game, hoặc phục vụ trang và game từ cùng một địa chỉ.

Đọc hướng dẫn thực hành về lưu trữ và nhúng

Danh sách kiểm tra trước khi xuất bản

1. HTTPS ở mọi nơi. Một trang https không thể tải một iframe http: MDN liệt kê script và iframe trong các yêu cầu mà trình duyệt chặn như nội dung hỗn hợp.
2. Điện thoại. Mở trang trên một chiếc điện thoại thật, ở cả hai hướng, trong trang của bạn.
3. Âm thanh. MDN nói các trình duyệt thường chỉ cho phép tự phát có tiếng sau khi khách truy cập đã tương tác với trang. Hãy chờ im lặng đến lần chạm đầu tiên và thiết kế màn hình bắt đầu xoay quanh một lần chạm.
4. Toàn màn hình và ngôn ngữ. Kiểm tra nút toàn màn hình có xuất hiện bên trong khung không và các ngôn ngữ của game có bao phủ đối tượng của bạn không.
5. Những điều cơ bản về khả năng truy cập. Đặt tiêu đề cho khung, cung cấp một liên kết mở game riêng, kiểm tra cỡ chữ và độ tương phản, và nói rõ các điều khiển là gì. Giữ thông tin thiết yếu là văn bản trang thông thường, không nằm trong game.
6. Quyền riêng tư và sự đồng ý. Liệt kê những gì chạy trên trang: script quảng cáo, phân tích, phông chữ từ máy chủ khác. Cập nhật chính sách quyền riêng tư của bạn. Nếu dùng quảng cáo hoặc phân tích, hãy hỏi cố vấn xem pháp luật địa phương có yêu cầu sự đồng ý hay không.

Mười hai điều cần kiểm tra trước khi trả tiền cho một game

Gói Polar Games gồm những gì

Mỗi phiên bản liệt kê nội dung trên trang mẫu trên marketplace, và bạn có thể chơi bản demo trực tiếp trước khi mua. Nhìn chung bạn nhận được:

• Một thư mục game/ sẵn sàng để lưu trữ. Các yêu cầu mà phiên bản của chúng tôi liệt kê là một trình duyệt hiện đại và bất kỳ máy chủ HTTP(S) nào phục vụ tệp tĩnh. Việc lưu trữ không cần cơ sở dữ liệu và không cần bước build. Hai phiên bản, Zabum và Ricopop, có bảng xếp hạng tùy chọn cần PHP 7.4 trở lên.
• Một thư mục source/ có thể chỉnh sửa và một tài liệu hướng dẫn trong documentation/ với các chương về cài đặt và tùy biến.

Năm phiên bản, trong đó có Gridspark và Velvet Pool, là JavaScript thuần. Các phiên bản còn lại được viết bằng TypeScript và một số dùng các thư viện như Three.js hoặc Phaser, nhưng thư mục game/ đã được build sẵn. Bạn chỉ cần Node.js để chỉnh sửa và build lại mã nguồn.

Không bao gồm: lưu trữ, cài đặt trên máy chủ của bạn, tùy biến, tính năng mới, và tích hợp SDK hoặc cổng. Điều khoản liệt kê các mục này là dịch vụ riêng, được báo giá trước khi thực hiện bất kỳ việc gì. Hỗ trợ bao gồm các câu hỏi về cài đặt và sử dụng các tệp đã cung cấp, cùng các lỗi có thể tái hiện, trong 6 tháng, hoặc 12 tháng nếu có gia hạn.

Xem Gridspark, một phiên bản puzzle JavaScript thuần

Xem Velvet Pool, một phiên bản bi-a 3D

Giấy phép, hóa đơn và gói combo

• Một giấy phép bao gồm một sản phẩm cuối, cho bạn hoặc cho một khách hàng. Một agency làm cho nhiều khách hàng cần một giấy phép cho sản phẩm của mỗi khách hàng.
• Giấy phép là vĩnh viễn và không hết hạn khi hỗ trợ kết thúc. Khách truy cập có thể chơi miễn phí hoặc qua kiếm tiền từ quảng cáo.
• Chúng tôi xuất hóa đơn nota fiscal của Brazil nếu bạn yêu cầu, hoặc hóa đơn cho khách hàng ở nước ngoài.
• Mua nhiều món cùng lúc được giảm giá trên giá niêm yết: 5% cho hai, 10% cho ba, 15% cho bốn, 20% cho năm trở lên.

Giải thích giấy phép, từng điều khoản một

Khi nào một game mang thương hiệu của bạn là hợp lý

Một mẫu có sẵn là đủ khi bạn muốn nhanh chóng đưa một game hay lên trang. Một phiên bản tùy chỉnh có ý nghĩa khi game phải mang logo, màu sắc, văn bản và luật chơi của bạn, khi nó phải khớp với một chiến dịch, hoặc khi nó phải chạy trong một nền tảng bạn đã dùng. Chúng tôi nhận dự án tùy chỉnh và công việc white-label. Giá và thời gian thực hiện phụ thuộc vào công việc, nên chúng tôi không liệt kê con số nào: hãy gửi mẫu bạn thích và những gì bạn muốn thay đổi, rồi yêu cầu báo giá.

Liên hệ: willian@polargames.com.br

Engine, mẫu hay JavaScript thuần: nên chọn cái nào

Câu hỏi thường gặp

Một game trong iframe có giúp SEO của trang tôi không?

Đừng trông cậy vào điều đó. Hãy viết tiêu đề, mô tả và hướng dẫn xung quanh game như văn bản trang thông thường.

Các game có chứa quảng cáo hoặc theo dõi không?

Các phiên bản liệt kê SDK quảng cáo và tài khoản quảng cáo là không được bao gồm. Những gì trang riêng của bạn thêm vào, như phân tích hoặc quảng cáo, là trách nhiệm của bạn trong việc công bố và, khi được yêu cầu, xin sự đồng ý.

Bước tiếp theo

Chọn một game trong marketplace, chơi bản demo và đọc tài liệu hướng dẫn của nó. Sau đó chọn cách phù hợp với website của bạn, và viết cho chúng tôi nếu bạn muốn thương hiệu của mình có mặt trên đó.

Xem các mẫu game HTML5

Game HTML5 white label: bạn nhận được gì và nên hỏi gì

Cấp phép game HTML5 hay mua mã nguồn?

Advergame: nhận một game HTML5 mang thương hiệu cho chiến dịch của bạn