דף זה תורגם על ידי Cloud Translation API.

המבנה של משחק HTML5 (H5)

לרוב, מפיצים של משחקים מארחים את המשחקים שלהם בצורה שאפשר לשחק בה במסך מלא או ב-iFrame&#39d כדי להיכנס לדף אינטרנט אחר או ל-WebView באפליקציה.

בדף שמארח את המשחק (כלומר קנבס העריכה של משחק) יש קוד AdSense ('התג&#39); הוא טוען את לוגיקת JavaScript של המשחק, ובדרך כלל כולל רכיב של לוח עריכה שבו המשחק מעובד.

המטרה שלנו ב-Ad Placement API היא למזער את הקוד שצריך להוסיף למשחק. כך תוכלו לשלוט במודעות מבלי לשנות את המשחק באופן קבוע ולפרסם גרסאות חדשות שלו.

בודקים את המבנה הקונספטי של משחק HTML5 בדמות הזו. קוד לדוגמה זמין בקטע דוגמה במשחק בפורמט H5.

יש דרכים רבות ליצור משחקי H5 באמצעות JavaScript ישירות, או ספריות של צד שלישי לגרפיקה דו-ממדית ולתלת-ממד שמעובדות לווידג'ט של בד ציור, למנועי משחקים ובמקרים מסוימים, תהליכים מורכבים של אוסף בשפות אחרות.

ה-Ad Placement API מיועד לפעול באותו מסמך כמו ה-Canvas עם התג והתג adsbygoogle. לדוגמה, אם מוסיפים משחק כ-iFrame בדף גדול יותר, יש לקרוא את התג ואת כל הקריאות ל-API מתוך אותו iFrame.

דוגמה למבנה של משחק H5

הדוגמה המפורטת הבאה מציגה את החלקים העיקריים של דף משחק טיפוסי.

<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>

<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>

אופן ההפצה של משחקי H5

ניתן להפיץ משחקי H5 בדרכים רבות ושונות, ובפלטפורמות רבות. לעיתים קרובות עשויות להיות ישויות שונות בתהליך היצירה וההפצה של משחקים, כולל:

מפתחים – האנשים שיוצרים את המשחקים
מנועי חיפוש – חברות שמספקות את הכלים לבנייתן
ספקי אירוח – המארחים משחקים
מפיצים – שעובדים עם מפתחים כדי ליצור קטלוגים עשירים של משחקים
בעלי תוכן דיגיטלי – שבבעלותם מקור התנועה ורוצים להציב משחקים באתרים או באפליקציות שלהם

ברוב המקרים, הישויות יכולות לכלול את התפקידים האלה — אתם יכולים לפתח, לארח ולפרסם את המשחקים שלכם.

אפשר לשחק במשחקים בדרכים שונות, כולל:

מסך מלא – מסך מלא שבו אפשר ליהנות מחוויה מקיפה
iFrame/WebView – שבו הם מוצגים כחלק ממסמך גדול יותר
מוטמע – במקומות שבהם הם ממוקמים ישירות בדפים עם תוכן אחר

תרשים לאופן שבו המודעות מוצגות בפועל

חוויות מסך מלא ו-iFrame חלות גם על אינטרנט וגם על אפליקציות ("iFrame" במקרה הזה, הן יכולות להתייחס גם ל-WebView שמוטמע באפליקציה) – אנחנו מצפים שרוב המשחקים יופצו בדרכים האלה. משחקים מוטמעים הם חוויית אינטרנט בלבד.

להיזכר

מסמך ה-HTML שמכיל את התג הוא המקום שבו המודעה מוצגת.
המודעה צריכה לכלול תמיד את המסמך המקיף.
התג והמשחק צריכים תמיד להיות באותו מסמך.