Hướng dẫn

Cách host game HTML5 trên website: tải lên, nhúng và sửa lỗi

Hướng dẫn thực hành cho một thư mục game tĩnh: đặt ở đâu, mở ra sao, đưa vào trang thế nào và cần kiểm tra gì khi game không chạy.

Polarzinho đẩy một hộp game qua ống phát sáng từ máy chủ tới cửa sổ trình duyệt, nơi hiện một game đảo trên không.

Cách host game HTML5, trong một câu: tải nội dung thư mục game/ lên bất kỳ web host nào phục vụ file tĩnh, giữ nguyên các thư mục con, rồi mở địa chỉ của thư mục đó trên trình duyệt. Thư mục game/ đã sẵn sàng để host của mọi phiên bản trên marketplace của chúng tôi chạy ngay: không cần PHP, không cần cơ sở dữ liệu, không có bước build và không cần tài khoản, nên host chỉ việc chuyển file cho trình duyệt của người chơi.

Đó là toàn bộ công việc khi mọi thứ suôn sẻ. Hướng dẫn này nói về những ngày không suôn sẻ: màn hình trắng, lỗi 404, thông báo MIME type, một iframe không hiện gì cả. Chúng tôi bán các template này, nên hãy đọc nó như sổ tay thực địa cho chính các gói của chúng tôi. Chúng tôi đã phục vụ bản sao của Gridspark và Velvet Pool từ một máy chủ cục bộ tạm thời, cố tình làm hỏng Gridspark theo vài cách, và đọc sổ tay công khai của các phiên bản khác. Khi một nhận định đến từ sổ tay chứ không phải từ thử nghiệm của chúng tôi, chúng tôi nói rõ điều đó.

Việc host game HTML5 thực sự gồm những gì

Host tĩnh lưu file và gửi cho trình duyệt khi có yêu cầu. Nó không chạy game; trình duyệt của người chơi mới làm việc đó. Vì vậy các yêu cầu của phiên bản chúng tôi rất đơn giản: một trình duyệt hiện đại, một host phục vụ file tĩnh qua HTTP hoặc HTTPS, và không cần PHP, cơ sở dữ liệu hay tài khoản để chơi. Thư mục game/ đã được build sẵn, nên đưa lên không cần npm và không cần bước build.

Có hai giới hạn cần biết trước khi bắt đầu. Một số phiên bản có phần tùy chọn không phải tĩnh: Zabum và Ricopop liệt kê một bảng xếp hạng tùy chọn cần PHP 7.4 trở lên và một thư mục có quyền ghi; các phiên bản TypeScript (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z và Zabum) chỉ cần Node.js nếu bạn muốn sửa mã nguồn và build lại; mỗi sổ tay ghi rõ phiên bản cần dùng. Velvet Pool, Puttide, Ricopop và Gridspark dùng JavaScript thuần, không có bước biên dịch nào giữa việc bạn sửa và các file bạn tải lên. Không cần điều nào trong số đó để đưa game lên như đã giao. Còn việc host thì không nằm trong giao dịch mua. Điều khoản của cửa hàng liệt kê việc lưu trữ và cài đặt trên máy chủ của bạn là dịch vụ riêng, được báo giá trước khi làm; phần hỗ trợ chỉ bao gồm các câu hỏi về cài đặt và cách dùng các file đã cung cấp.

Những gì phải tải lên, và những gì giữ lại trên máy tính:

  • Tải lên mọi thứ bên trong game/: index.html, script, style, hình ảnh, âm thanh và font.
  • Không đưa source/ (bản có thể sửa dành cho nhà phát triển), documentation/ (sổ tay) và chính file ZIP lên. Sổ tay Zabum ghi nhận việc tải source/ nhầm lên là một nguyên nhân gây lỗi 404 như main.tsx.
  • Giữ các thông báo bản quyền của bên thứ ba đi kèm gói cùng sản phẩm của bạn, như điều khoản yêu cầu.

Xem Gridspark, phiên bản chúng tôi dùng làm ví dụ

Cách host game HTML5: đường ngắn từ file ZIP đến trang chơi được

Các bước này theo các chương cài đặt trong sổ tay của Velvet Pool, Puttide, Gridspark và Sunset Rally, cộng thêm các kiểm tra chúng tôi bổ sung sau khi thử nghiệm. Gridspark là ví dụ vì đây là phiên bản chúng tôi đã phục vụ và làm hỏng nhiều lần nhất.

  1. Giải nén gói trên máy tính. Bạn sẽ thấy game/ (thư mục bạn sẽ đưa lên), source/ (bản có thể sửa) và documentation/ (sổ tay).
  2. Tùy chọn nhưng rẻ: thử cục bộ. Mở terminal bên trong game/, chạy python -m http.server 8765 rồi truy cập http://localhost:8765/. Nếu game chạy được ở đó, các file đã ổn và mọi lỗi sau này thuộc về host.
  3. Chọn địa chỉ cuối cùng ngay bây giờ, ví dụ https://your-site.example/games/gridspark/. Thư mục con vẫn ổn vì đường dẫn bên trong game là tương đối; sổ tay Gridspark gợi ý public_html/games/gridspark/.
  4. Tải nội dung của game/ vào thư mục đó bằng trình quản lý file hoặc client FTP của host, giữ mọi thư mục con. index.html phải nằm ngay trong thư mục, không được lùi sâu hơn một cấp.
  5. Mở địa chỉ thư mục qua https, có dấu gạch chéo cuối. Trong Gridspark, chạm vào màn hình bắt đầu (trình duyệt đợi một lần chạm hoặc click trước khi cho phép âm thanh) rồi nhấn Play (Chơi).
  6. Thực hiện một nước đi, tải lại trang và kiểm tra menu có hiện nút Continue (Tiếp tục) không. Điều đó chứng tỏ trình duyệt đang lưu tiến trình cho địa chỉ của bạn.
  7. Liên kết tới thư mục từ site của bạn, hoặc nhúng vào một trang (xem phần iframe bên dưới).

Một thư mục Gridspark hoàn chỉnh chứa index.html, style.css, gridspark.config.js, src/ và assets/ cạnh nhau, và sổ tay yêu cầu bạn giữ chúng cùng nhau. Các phiên bản khác bố trí khác (Velvet Pool có css/ và assets/ thay vì một file style duy nhất), nhưng nguyên tắc vẫn vậy: tải thư mục lên đúng như khi nhận.

Vì sao nhấp đúp index.html lại ra trang trắng

Các phiên bản chúng tôi đã mở tải mã của chúng dưới dạng ES module, và trình duyệt không cho tải module từ địa chỉ file://. Chúng tôi mở Gridspark trực tiếp từ ổ đĩa trong Chromium và thấy một màn hình tối, trống. Console báo script bị chặn bởi CORS policy, với lý do “Cross origin requests are only supported for protocol schemes” (yêu cầu cross-origin chỉ được hỗ trợ cho các giao thức như http và https). Cùng thư mục đó, khi được phục vụ bởi một máy chủ web cục bộ, lại hiện màn hình bắt đầu ngay. Sổ tay của Velvet Pool, Puttide, Sunset Rally và Gridspark đều nói cùng điều này: đừng mở game từ file://.

  • Không hoạt động: file:///C:/Users/you/games/gridspark/index.html
  • Hoạt động: http://localhost:8765/ từ một máy chủ thử nghiệm cục bộ, hoặc https://your-site.example/games/gridspark/ trên host của bạn.

Chúng tôi chỉ thử với Chromium. Sổ tay mô tả chặn này là điều các trình duyệt phổ biến thường làm, nên hãy lường trước điều đó trên mọi trình duyệt.

Nhúng game vào trang bằng iframe

Để hiện game bên trong một trang bạn đã có, hãy trỏ một iframe tới thư mục đã tải lên. Đây là thẻ chúng tôi đã thử:

<iframe src="https://your-site.example/games/gridspark/" title="Gridspark" allow="fullscreen; autoplay" width="960" height="540" style="border:0"></iframe>

  • src: địa chỉ đầy đủ của thư mục, có https và dấu gạch chéo cuối.
  • title: một tên ngắn. Trình đọc màn hình dùng nó để mô tả khung.
  • allow="fullscreen; autoplay": sổ tay nói nên cho phép toàn màn hình và tự phát trong iframe khi cần. Trong thử nghiệm của chúng tôi, một khung từ địa chỉ khác không có thuộc tính này bị tắt toàn màn hình, và Gridspark đơn giản ẩn nút toàn màn hình của nó. Thuộc tính cũ allowfullscreen cho kết quả giống allow. Khung cùng địa chỉ với trang thì được toàn màn hình trong cả hai trường hợp.
  • Không dùng thuộc tính sandbox. Chỉ với sandbox="allow-scripts", Gridspark không bao giờ khởi động: khung nhận origin rỗng (null), trình duyệt chặn script của chính game và local storage ném ra lỗi bảo mật. Thêm allow-same-origin thì chạy được, nhưng MDN cảnh báo rằng cặp này trên khung cùng origin sẽ bỏ mất lớp bảo vệ, nên với game bạn tự host, hãy bỏ sandbox đi.

Điều chỉnh cho điện thoại

Một hộp 16:9 cố định trông đúng trên máy tính nhưng sai trên điện thoại. Ở chiều rộng 390 px, một iframe có aspect-ratio 16/9 chỉ cao 219 px, và menu Gridspark bị cắt dưới nút Daily challenge (thử thách hằng ngày). Khi cho khung chiều cao 75svh, tức ba phần tư chiều cao màn hình, thì cả menu hiện ra. Trang của bạn cũng cần thẻ meta viewport; sáu gói chúng tôi mở đều đã có sẵn thẻ đó trong index.html, và đó là lý do game tự co giãn khi mở trực tiếp.

Hai màn hình điện thoại cạnh nhau, mỗi cái hiện trang có menu bắt đầu của Gridspark trong iframe: bên trái là khung 16:9 ngắn cắt mất menu, bên phải là khung cao hiện đủ menu.
Cùng một game, cùng chiều rộng điện thoại. Trái: iframe 16:9. Phải: khung cao 75svh.

Game chạy được ở địa chỉ riêng mà không cần trang bao quanh, nên một liên kết mở thẳng địa chỉ đó luôn là phương án dự phòng hợp lệ.

Xem Velvet Pool, phiên bản 3D được nhúng theo cách tương tự

WordPress và các trình xây site khác

Đưa thư mục lên host và hiện nó trên một trang là hai việc riêng biệt, và trong WordPress chúng dùng hai công cụ khác nhau. Mọi nội dung dưới đây lấy từ tài liệu WordPress và tài liệu tham chiếu cho nhà phát triển, không phải từ việc chúng tôi tự chạy WordPress.

  1. Tải thư mục lên bằng trình quản lý file hoặc FTP của host, vào cây thư mục của site (ví dụ một thư mục games/ nằm cạnh các thư mục WordPress). Đừng tải qua Media Library: mã của WordPress loại .html và .js khỏi các loại file được phép tải lên, trừ khi người dùng có khả năng unfiltered_html.
  2. Mở địa chỉ của thư mục ở riêng nó trước khi chạm vào bất kỳ trang nào. Các quy tắc Apache mặc định mà WordPress ghi lại chỉ gửi yêu cầu tới index.php khi không có file hoặc thư mục khớp (đó là điều kiện !-f và !-d kiểm tra), nên thư mục đã tải lên sẽ được phục vụ đúng như vậy.
  3. Thêm iframe trong một khối Custom HTML. WordPress ghi nhận rằng người dùng không có khả năng unfiltered_html, ví dụ Contributor, sẽ bị loại thẻ iframe khi bài được lưu. Nếu khung biến mất sau khi lưu, hãy kiểm tra xem ai đã sửa trang.

Các trình xây site và CMS khác: chúng tôi chưa thử và không đưa ra nhận định nào về chúng. Game cần cùng hai thứ ở mọi nơi: một chỗ cho thư mục đã tải lên và một phần tử nhúng chấp nhận iframe. Nếu một trình xây site không cung cấp cả hai, hãy host thư mục ở nơi nào đó phục vụ file tĩnh và liên kết tới địa chỉ của nó.

Khi game không khởi động: danh sách xử lý sự cố

Mở công cụ dành cho nhà phát triển của trình duyệt (F12 trên hầu hết trình duyệt máy tính) và xem tab Console và Network trước khi thay đổi gì. Mỗi lỗi dưới đây để lại một dòng đỏ ở đó, và tên file trong dòng đó thường chỉ ra nguyên nhân.

Màn hình trắng

Kiểm tra theo thứ tự này: địa chỉ bắt đầu bằng http:// hoặc https://; Console không có dòng đỏ nào; tên file giữ đúng chữ hoa và chữ thường; và với các phiên bản 3D, WebGL2 khả dụng (sổ tay Velvet Pool yêu cầu bật tăng tốc phần cứng). Máy chủ Linux coi Game.js và game.js là hai file, còn Windows thì không, nên một thư mục chạy được trên máy tính của bạn có thể hỏng sau khi tải lên. Sổ tay Velvet Pool và Zabum đều cảnh báo về chuyện chữ hoa chữ thường.

404 cho src/main.js, font hoặc hình ảnh

Một phần thư mục chưa được tải lên, hoặc đã được tải lên lùi sâu hơn một cấp. Chúng tôi tái hiện bằng cách chỉ tải index.html, style.css và file cấu hình: màn hình vẫn trắng và tab Network liệt kê lỗi 404 cho src/main.js và mọi font. Hãy tải các thư mục còn thiếu, hoặc chuyển nội dung lên một cấp để index.html nằm ngay tại địa chỉ bạn mở. Nếu hình ảnh hoặc âm thanh bị thiếu hoặc hỏng, sổ tay Zabum gợi ý dùng FTP ở chế độ binary hoặc auto, hoặc tải lên một file ZIP rồi giải nén trong trình quản lý file của host. Lỗi 404 là file bị thiếu, không phải vấn đề MIME.

Trang tải lên không có style, icon quá to

Nếu một rewrite hoặc cài đặt URL sạch phục vụ thư mục mà thiếu dấu gạch chéo cuối, các đường dẫn tương đối sẽ phân giải lên một cấp. Chúng tôi tái hiện bằng một máy chủ thử nghiệm trả về trang thư mục mà không chuyển hướng. Trình duyệt yêu cầu /games/style.css và /games/src/main.js thay vì các file bên trong /games/gridspark/, nhận 404 và vẽ menu thành các nút thô cùng icon quá lớn. Hãy liên kết tới thư mục có dấu gạch chéo cuối, hoặc trỏ thẳng tới index.html.

Cửa sổ trình duyệt hiện trang trắng với các nút xám không có style và icon đen quá lớn, tức là menu Gridspark thiếu style sheet.
Gridspark mở tại địa chỉ không có dấu gạch chéo cuối, trên máy chủ không chuyển hướng: không có style sheet, không có script.

Lỗi MIME type trên một module script

Trong thử nghiệm của chúng tôi, Console hiện: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain" (không tải được module script: máy chủ trả về MIME type là "text/plain"). Trình duyệt rất khắt khe với module script. Sổ tay yêu cầu máy chủ gửi file .js với MIME type JavaScript, và .wasm là application/wasm; sổ tay Sunset Rally bổ sung .mjs. Tab Network hiện Content-Type của từng file. Trong các bản build chúng tôi đã mở, các module là file .js. Nếu bạn thêm file .mjs của riêng mình và cấu hình Apache cũ không ánh xạ chúng, một dòng trong .htaccess sẽ sửa được, đúng dòng mà chính site của chúng tôi dùng:

AddType text/javascript .mjs

Bảng kiểu Apache 2.4.62 trên máy thử của chúng tôi đã ánh xạ js và mjs thành text/javascript và wasm thành application/wasm, nên một bản cài mặc định không cần dòng đó. Các máy chủ khác giữ bảng riêng; hãy hỏi người quản trị máy chủ của bạn.

Bị chặn bởi CORS policy

Module script và font tải từ một địa chỉ khác cần header Access-Control-Allow-Origin từ địa chỉ đó. Trong thử nghiệm của chúng tôi, một trang trên một cổng không tải được module script từ cổng khác cho đến khi máy chủ thứ hai gửi header. Trong thực tế cách sửa khá nhàm: giữ các file của game cùng một thư mục trên cùng một địa chỉ, đó là cách các gói được xây dựng. Bạn không cần CORS để nhúng game vào iframe trên site khác, vì iframe chỉ đơn giản tải địa chỉ của game. Lỗi CORS bên trong một khung nhúng thường đến từ thuộc tính sandbox, đã mô tả ở trên.

Nội dung không an toàn trên trang https (mixed content)

Trang phục vụ qua https không thể tải script hoặc iframe qua http: trình duyệt chặn cả hai, và MDN liệt kê font và các yêu cầu fetch cũng nằm trong các loại bị chặn. Hãy dùng https:// trong src của iframe và trong mọi địa chỉ đầy đủ bạn gõ. Các file của game dùng đường dẫn tương đối, nên chúng đi theo giao thức của địa chỉ bạn mở. Nếu địa chỉ https không mở được, hãy bật chứng chỉ trong bảng điều khiển host trước.

iframe báo "refused to connect"

Trong thử nghiệm của chúng tôi, Chromium ghi dòng này, với địa chỉ của khung bị chặn trong dấu nháy đơn đầu tiên: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. (Từ chối hiển thị 'https://game-host.example/' trong khung vì nó đặt 'X-Frame-Options' thành 'sameorigin'.) Máy chủ đang host game đã gửi header đó. SAMEORIGIN chỉ cho phép nhúng từ cùng địa chỉ, còn DENY thì không bao giờ cho phép; một quy tắc frame-ancestors trong header Content-Security-Policy cũng làm việc tương tự. Hãy đổi header cho thư mục của game, hoặc phục vụ trang và game từ cùng một địa chỉ.

Ban đầu không có âm thanh

Trình duyệt chặn âm thanh cho đến lần chạm hoặc click đầu tiên, đó là lý do Gridspark mở ra một màn hình chạm để bắt đầu. Chạm một lần, rồi kiểm tra âm lượng và quyền của trình duyệt.

Xem Puttide, phiên bản golf có bản build sẵn sàng để host

Cập nhật game mà không phục vụ bản nửa cũ nửa mới

Trình duyệt lưu cache script, nên sau khi tải lên, bạn hoặc người chơi vẫn có thể đang xem bản game cũ. Sổ tay Gridspark đưa ra quy tắc: sao lưu các chỉnh sửa của bạn, thay toàn bộ các file chơi được cùng một lúc, kiểm tra, và tải lại cứng (hard refresh) nếu host cache các module cũ. Đừng trộn module cũ và mới. Một game gồm nhiều file nhỏ import lẫn nhau là loại không nên cập nhật dở dang.

Các phiên bản có service worker giữ một cache riêng. Zabum là PWA: sau khi cập nhật, hãy tải lại cứng (Ctrl hoặc Cmd cộng Shift cộng R). Nếu bạn thay file âm thanh, hãy đổi tên cache trong sw.js (ví dụ trong sổ tay từ zabum-v5 thành zabum-v6) và tải file đó lên. Nếu site của bạn đứng sau CDN, cũng hãy xóa cache của CDN. Trong số các sổ tay chúng tôi đã đọc, Zabum là PWA duy nhất; sổ tay Velvet Pool và Puttide nói thẳng rằng phiên bản của họ không phải là ứng dụng offline có thể cài đặt.

Đọc changelog trước khi thay file, và giữ bản sao của mọi thứ bạn đã sửa. Dữ liệu lưu nằm trong trình duyệt của từng người chơi, không nằm trong thư mục bạn tải lên, nên thay file không xóa chúng.

Xem Zabum, phiên bản PWA có bảng xếp hạng PHP tùy chọn

Tiến trình được lưu ở đâu, và xóa dữ liệu trình duyệt thì sao

Các phiên bản này không có tài khoản và không có cơ sở dữ liệu trên máy chủ. Cài đặt, ngôn ngữ, lượt chơi hiện tại và kỷ lục cá nhân nằm trong local storage của trình duyệt, và không có gì được gửi tới Polar Games. Sổ tay Gridspark ghi tên các khóa là gridspark.standalone.v1.*; sau một nước đi, chúng tôi thấy gridspark.standalone.v1.best và gridspark.standalone.v1.save.

Menu chính của Gridspark với nút Continue, liên kết New game (Ván mới), nút Daily challenge và điểm kỷ lục đã lưu là 3.257.
Khi quay lại, menu hiện Continue và điểm kỷ lục đã lưu. Cả hai đều được đọc từ trình duyệt.

Vùng lưu thuộc về địa chỉ (giao thức, máy chủ và cổng), không thuộc về thư mục. Chúng tôi đã kiểm tra theo ba cách. Một bản sao Gridspark ở thư mục khác của cùng địa chỉ đọc được các giá trị đã lưu giống nhau. Cùng game mở bằng localhost thay vì 127.0.0.1 thì bắt đầu trống, và địa chỉ đó trên cổng khác cũng vậy. Sổ tay Zabum bổ sung rằng http và https, www và không www, cùng các subdomain, mỗi loại có vùng lưu riêng.

  • Xóa dữ liệu trang hoặc cookie sẽ xóa game đã lưu và các kỷ lục. Trong cửa sổ riêng tư, tiến trình có thể chỉ tồn tại trong phiên làm việc; game vẫn chạy khi bộ nhớ bị chặn.
  • Trình duyệt hoặc thiết bị khác sẽ bắt đầu từ số không. Không có đồng bộ và cũng không có tài khoản để đăng nhập.
  • Đổi địa chỉ sẽ đặt lại tất cả: từ http sang https, từ www sang không www, hoặc sang tên miền mới.
  • Chuyển game sang một thư mục khác của cùng địa chỉ vẫn giữ được dữ liệu lưu, như thử nghiệm Gridspark của chúng tôi cho thấy.

Danh sách kiểm tra trước khi chia sẻ liên kết

  1. Mở địa chỉ cuối cùng trên các trình duyệt mà người chơi của bạn dùng: một trình duyệt dựa trên Chromium (Chrome hoặc Edge), Firefox và Safari. Các thử nghiệm của chúng tôi chỉ chạy trên Chromium, nên đây là danh sách để bạn tự chạy.
  2. Mở trên một chiếc điện thoại thật, trước hết tại địa chỉ riêng của game rồi bên trong trang của bạn, ở cả hai hướng màn hình.
  3. Giới hạn băng thông trong công cụ dành cho nhà phát triển và theo dõi lần tải đầu tiên. Gridspark, khi được phục vụ không nén từ máy chủ cục bộ, cần khoảng 0,5 MB và 26 yêu cầu để đến màn hình bắt đầu. Với Chromium bị giới hạn ở 1,6 Mbit/s và độ trễ 150 ms, màn hình xuất hiện sau khoảng 3 giây. Toàn bộ thư mục game/ khoảng 3,4 MB trên bản của chúng tôi; Velvet Pool khoảng 7,3 MB và Puttide khoảng 15 MB. Nếu điện thoại đời cũ gặp khó khăn, sổ tay Zabum gợi ý kiểm tra xem host có nén file bằng gzip hoặc brotli không.
  4. Thực hiện một nước đi, tải lại trang, và xác nhận Continue cùng điểm kỷ lục vẫn còn.
  5. Chạm một lần và kiểm tra âm thanh có phát không. Im lặng trước lần chạm đầu tiên là chuyện bình thường.
  6. Mở cửa sổ riêng tư. Game vẫn nên chạy, dù có thể quên tiến trình khi bạn đóng cửa sổ.
  7. Đọc các tab Console và Network ở lần tải đầu: không có dòng đỏ, không có 404.
  8. Trong iframe, kiểm tra nút toàn màn hình có xuất hiện và khung đủ cao trên điện thoại không.

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

Tôi có cần PHP, cơ sở dữ liệu hoặc một máy chủ đặc biệt để host game HTML5 không?

Không, với các phiên bản của chúng tôi khi giao đúng như vậy. Chúng là tĩnh: tải thư mục game/ lên một host phục vụ file qua HTTP hoặc HTTPS rồi mở. Zabum và Ricopop có bảng xếp hạng tùy chọn, cần PHP 7.4 trở lên và một thư mục có quyền ghi.

Tôi có thể nhấp đúp index.html được không?

Không. Trình duyệt chặn module game trên file://, và trang sẽ trắng. Hãy mở game qua địa chỉ http hoặc https, hoặc host của bạn, hoặc một máy chủ thử nghiệm cục bộ như python -m http.server 8765.

Tôi có cần HTTPS không?

Sổ tay khuyên dùng HTTPS khi host công khai. Sổ tay Zabum nói tính năng Add to home screen (Thêm vào màn hình chính) cần HTTPS, và một trang https không thể nhúng iframe http vì trình duyệt chặn điều đó như mixed content.

Làm sao để thêm game vào một trang WordPress?

Tải thư mục lên bằng trình quản lý file hoặc FTP của host, mở địa chỉ để xác nhận game chạy, rồi thêm iframe trong khối Custom HTML. Người dùng không có khả năng unfiltered_html sẽ bị loại iframe, nên hãy kiểm tra vai trò của người sửa trang.

Tiến trình được lưu ở đâu, và nếu người chơi xóa dữ liệu trình duyệt thì sao?

Trong local storage của trình duyệt, theo từng địa chỉ. Xóa dữ liệu trang sẽ xóa nó, trình duyệt hoặc thiết bị khác sẽ bắt đầu trống, và đổi tên miền hoặc chuyển giữa http và https sẽ đặt lại tiến trình. Không có tài khoản và không có gì được gửi tới chúng tôi.

Polar Games có host game giúp tôi không?

Không. Cửa hàng bán các file. Hỗ trợ trả lời các câu hỏi về cài đặt và cách dùng chúng; việc host và cài đặt trên máy chủ của bạn là dịch vụ riêng, được báo giá trước khi làm.

Bước tiếp theo

Nếu bạn vẫn đang chọn game HTML5 cho website của mình, mỗi trang sản phẩm đều liệt kê yêu cầu, liên kết tới sổ tay và cho phép chơi thử bản demo trước khi trả tiền. Hãy đọc chương cài đặt của sổ tay trước: đó là trang bạn sẽ dùng cho công việc trong hướng dẫn này.

Xem các template game HTML5