Cấu trúc của trò chơi HTML5 (H5)

Thông thường, hầu hết các nhà phân phối trò chơi sẽ lưu trữ trò chơi của họ ở dạng có thể được chơi dễ dàng toàn màn hình hoặc iFrame\39;d vào một trang web khác hoặc WebView trong một ứng dụng.

Trang lưu trữ trò chơi (tức là canvas trò chơi có thể chơi) chứa mã AdSense (#39; thẻ\39), tải logic JavaScript cho trò chơi và thường chứa phần tử canvas nơi trò chơi được hiển thị.

Mục tiêu của chúng tôi với API Vị trí đặt quảng cáo là giảm thiểu mã mà bạn phải thêm vào trò chơi của mình. Vì vậy, bạn có thể kiểm soát quảng cáo mà không cần phải liên tục thay đổi trò chơi và phát hành các phiên bản mới của trò chơi đó.

Xem lại cấu trúc khái niệm của trò chơi HTML5 trong hình bên dưới. Bạn có thể xem mã mẫu trong phần Ví dụ về cấu trúc trò chơi H5.

Có nhiều cách để tạo trò chơi H5 bằng cách sử dụng JavaScript trực tiếp hoặc thư viện bên thứ ba dành cho đồ hoạ 2D và 3D để kết xuất với tiện ích canvas, công cụ phát triển trò chơi và trong một số trường hợp là quá trình biên dịch chéo khá phức tạp từ các ngôn ngữ khác.

API Vị trí đặt quảng cáo được thiết kế để chạy trong cùng một tài liệu với canvas trò chơi và thẻ adsbygoogle. Ví dụ: nếu bạn thêm một trò chơi dưới dạng iFrame vào một trang lớn hơn, thì thẻ và tất cả các lệnh gọi đến API phải được thực hiện từ trong iFrame đó.

Ví dụ về cấu trúc trò chơi H5

Ví dụ chi tiết hơn sau đây cho thấy các phần chính của trang trò chơi thông thường.

Có nhiều cách để tạo trò chơi H5 bằng cách sử dụng JavaScript trực tiếp hoặc thư viện bên thứ ba dành cho đồ hoạ 2D và 3D để kết xuất với tiện ích canvas, công cụ phát triển trò chơi và trong một số trường hợp là quá trình biên dịch chéo khá phức tạp từ các ngôn ngữ khác. Chi tiết chính xác về trò chơi của bạn có thể khác với ví dụ này.

<head>
   ## The Ad Placement tag ##
   # Configure your monetisation settings here and place the standard
   # boilerplate code for initialising the API functions. This code may change
   # depending on where the game is being distributed (eg. a website, a super
   # app, different publishers).
   <script async
       data-ad-frequency-hint="30s"
       src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789" # your publisher ID
       crossorigin="anonymous">
   </script>
   <script>
      window.adsbygoogle = window.adsbygoogle || [];
      var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
   </script>
   [...]
</head>
<body>
   [...]

   ## Your game code ##
   # This is your game logic that renders the playable canvas. Once you've
   # integrated your game with the Ad Placement API, this code won't change due
   # to ad configuration updates.
   <canvas id="game_canvas" width="100%" height="100%"></canvas>
   <script src="game.js"></script>
   [...]
</body>

API Vị trí đặt quảng cáo được thiết kế để chạy trong cùng một tài liệu với canvas trò chơi và thẻ adsbygoogle. Ví dụ: nếu bạn thêm một trò chơi dưới dạng iFrame vào một trang lớn hơn, thì thẻ và tất cả các lệnh gọi đến API phải được thực hiện từ trong iFrame đó.

<head>
  <!-- The adsbygoogle tag is not here -->
</head>
<body>
  <iframe src="https://www.my-game.com" title="My game" allow="autoplay">
    <!-- The game is loaded here and contains the adsbygoogle tag -->
  </iframe>
</body>

Cách phân phối trò chơi H5

Trò chơi H5 có thể được phân phối theo nhiều cách và trên nhiều nền tảng khác nhau. Thông thường, có thể có nhiều thực thể tham gia vào việc tạo và phân phối trò chơi, bao gồm:

  • Nhà phát triển – những người tạo ra trò chơi
  • engines (Công cụ) cung cấp các công cụ để xây dựng chúng
  • Nhà cung cấp dịch vụ lưu trữ – người tổ chức trò chơi
  • Nhà phân phối – hợp tác với nhà phát triển để tạo danh mục trò chơi phong phú
  • Nhà xuất bản – người sở hữu nguồn lưu lượng truy cập và muốn đặt trò chơi trên trang web hoặc ứng dụng của họ

Trong nhiều trường hợp, các thực thể cũng có thể đóng vai trò này – bạn có thể phát triển, lưu trữ và phát hành trò chơi của riêng mình.

Bạn có thể chơi trò chơi theo nhiều cách, bao gồm:

  • Toàn màn hình – nơi chúng chiếm toàn bộ màn hình để mang lại trải nghiệm sống động
  • iFrame/WebView – nơi chúng phân phát vào một phần của tài liệu lớn hơn
  • Được nhúng – tại đó chúng được đặt trực tiếp trên các trang có nội dung khác

Sơ đồ về cách hiển thị quảng cáo thực sự

Trải nghiệm toàn màn hình và iFrame áp dụng cho cả web và ứng dụng ("iFrame" trong trường hợp này cũng có thể tham chiếu đến WebView được nhúng trong ứng dụng) —chúng tôi hy vọng phần lớn trò chơi sẽ được phân phối theo những cách này. Trò chơi được nhúng là trải nghiệm chỉ có trên web.

Lưu ý

  1. Tài liệu HTML chứa thẻ là nơi quảng cáo hiển thị.
  2. Quảng cáo phải luôn bao gồm đầy đủ tài liệu đi kèm.
  3. Thẻ và trò chơi phải luôn nằm trong cùng một tài liệu.