Cum adaugi jocuri HTML5 pe site-ul unei companii

Există trei moduri de a adăuga un joc pe site-ul unei companii: să încorporezi unul găzduit de altcineva, prin iframe, să încarci fișierele unui joc pe propriul spațiu web și să le afișezi pe o pagină sau să licențiezi un joc ca pachet și să-l publici ca fiind al tău. Primul este cel mai rapid de încercat. Al doilea îți oferă cel mai mare control. Al treilea este alegerea potrivită când jocul trebuie să poarte brandul tău pe termen lung.

Acest ghid este pentru firme, agenții și proprietari de site-uri pe WordPress, Wix, un site personalizat, o intranet sau un portal. Compară opțiunile, oferă o listă de verificare pentru lansare și enumeră ce conține un pachet Polar Games. Sunt informații generale, nu consultanță juridică.

Trei moduri de a pune un joc pe site

1. Încorporare cu iframe. Un joc găzduit în altă parte apare într-un cadru pe pagina ta. Scrii o singură etichetă, dar jocul, actualizările și disponibilitatea lui rămân la cel care îl găzduiește.
2. Găzduire proprie a fișierelor. Încarci folderul jocului în propriul spațiu web și îl deschizi la propria adresă, singur sau într-un iframe pe una dintre paginile tale. Pentru pachetele noastre, un server care livrează fișiere statice este suficient: nu este nevoie de PHP, bază de date sau cont ca să joci.
3. Licențiere ca pachet. Studioul livrează un folder gata de găzduit, sursa editabilă și un manual, sub o licență pentru un singur produs final. Îl găzduiești tu și poți modifica codul, grafica și audio-ul în cadrul acelui produs.

Răsfoiește șabloanele de jocuri HTML5

Iframe sau găzduire proprie: comparația

• Viteză: un cadru încarcă jocul de pe serverul gazdei, deci pagina ta depinde de acel server. Fișierele pe propria găzduire se încarcă de la o adresă pe care o controlezi.
• Control: pe propria găzduire decizi adresa, pagina din jurul jocului, cache-ul și actualizările. Cu un embed al altcuiva, gazda decide și poate schimba sau elimina jocul.
• Cookie-uri și consimțământ: un joc încărcat de la o adresă terță face vizitatorii tăi să contacteze acea adresă, iar acea parte poate seta propriile cookie-uri sau măsura vizitele. Fișierele proprii vin de pe domeniul tău. Reclamele și analiticele, oriunde rulează, pot necesita consimțământ, deci verifică regulile care se aplică ție cu un consilier calificat.
• Căutare: nu conta pe un joc dintr-un iframe ca să furnizeze text paginii tale. Scrie propriul titlu, o scurtă descriere, instrucțiunile și un link în jurul jocului.

Eticheta iframe, atribut cu atribut

Un embed tipic pentru un joc pe care îl găzduiești tu. Notele despre atribute vin din referința MDN pentru iframe.

<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 spune că utilizatorii cititoarelor de ecran îl pot folosi ca să eticheteze conținutul cadrului, iar acesta trebuie să descrie conținutul concis.
• allow="fullscreen": MDN definește atributul vechi allowfullscreen ca fiind allow="fullscreen *". Fără această permisiune, un cadru de la altă adresă nu poate trece pe ecran complet.
• sandbox: lasă-l afară pentru un joc pe care îl găzduiești. MDN descurajează puternic combinația allow-scripts cu allow-same-origin pe un cadru de aceeași origine, pentru că atunci cadrul își poate elimina propriul sandbox.
• Un cadru gol sau un refuz de conectare: serverul care găzduiește jocul poate trimite X-Frame-Options (DENY blochează orice încadrare, SAMEORIGIN permite doar aceeași origine) sau o regulă frame-ancestors dintr-un antet Content-Security-Policy, pe care MDN o recomandă în locul primului. Schimbă antetul pentru folderul jocului sau servește pagina și jocul de la aceeași adresă.

Citește ghidul practic de găzduire și încorporare

Lista de verificare înainte de publicare

1. HTTPS peste tot. O pagină https nu poate încărca un iframe http: MDN include scripturile și iframe-urile printre cererile pe care browserele le blochează ca mixed content.
2. Telefoane. Deschide-l pe un telefon real, în ambele orientări, în interiorul paginii tale.
3. Sunet. MDN spune că browserele permit, în general, redarea audio automată doar după ce vizitatorul a interacționat cu pagina. Așteaptă-te la liniște până la prima atingere și proiectează ecranul de start în jurul unei atingeri.
4. Ecran complet și limbi. Verifică dacă butonul de ecran complet apare în interiorul cadrului și dacă limbile jocului acoperă publicul tău.
5. Elemente de bază de accesibilitate. Dă cadrului un titlu, oferă un link care deschide jocul singur, verifică dimensiunea textului și contrastul și spune care sunt comenzile. Păstrează informațiile esențiale ca text normal al paginii, nu în interiorul jocului.
6. Confidențialitate și consimțământ. Listează ce rulează pe pagină: scripturi de reclame, analitice, fonturi de la alte gazde. Actualizează politica de confidențialitate. Dacă folosești reclame sau analitice, întreabă consilierul dacă este nevoie de consimțământ conform legii locale.

Douăsprezece lucruri de verificat înainte să plătești pentru un joc

Ce conține un pachet Polar Games

Fiecare ediție își enumeră conținutul pe pagina ei din marketplace, iar poți juca o demonstrație live înainte de a cumpăra. În general primești:

• Un folder game/ gata de găzduit. Cerințele pe care le enumeră edițiile noastre sunt un browser modern și orice gazdă HTTP(S) care livrează fișiere statice. Găzduirea nu cere bază de date și nici pas de build. Două ediții, Zabum și Ricopop, au un clasament opțional care necesită PHP 7.4 sau mai nou.
• Un folder source/ editabil și un manual în documentation/, cu capitole despre instalare și personalizare.

Cinci ediții, printre care Gridspark și Velvet Pool, sunt JavaScript simplu. Celelalte sunt scrise în TypeScript, iar unele folosesc biblioteci precum Three.js sau Phaser, dar folderul game/ este deja construit. Ai nevoie de Node.js doar ca să editezi și să reconstruiești sursa.

Nu sunt incluse: găzduirea, instalarea pe serverul tău, personalizarea, funcționalități noi și integrarea cu SDK-uri sau portaluri. Termenii le enumeră drept servicii separate, cu ofertă de preț înainte de orice lucru. Suportul acoperă întrebările despre instalarea și utilizarea fișierelor furnizate și defectele reproductibile, timp de 6 luni, sau 12 cu extensia.

Vezi Gridspark, o ediție de puzzle în JavaScript simplu

Vezi Velvet Pool, o ediție de biliard 3D

Licență, facturi și pachete

• O licență acoperă un singur produs final, pentru tine sau pentru un client. O agenție care construiește pentru mai mulți clienți are nevoie de o licență pentru produsul fiecărui client.
• Licența este perpetuă și nu expiră când se încheie suportul. Vizitatorii pot juca gratuit sau prin monetizare cu publicitate.
• Emitem o notă fiscală braziliană dacă o ceri, sau o factură pentru clienții din străinătate.
• Dacă cumperi mai multe produse împreună, primești o reducere la prețurile de listă: 5% pentru două, 10% pentru trei, 15% pentru patru și 20% pentru cinci sau mai multe.

Licența explicată, clauză cu clauză

Când are sens un joc cu brandul tău

Un șablon standard ajunge când vrei repede un joc bun pe o pagină. O versiune personalizată are sens când jocul trebuie să poarte logo-ul, culorile, textele și regulile tale, când trebuie să se potrivească unei campanii sau când trebuie să funcționeze într-o platformă pe care o folosești deja. Preluăm proiecte personalizate și lucrări white-label. Prețurile și termenele depind de lucrare, așa că nu le listăm: trimite șablonul care îți place și ce vrei schimbat, și cere o ofertă.

Contact: willian@polargames.com.br

Motor, șablon sau JavaScript simplu: ce să alegi

Întrebări frecvente

Un joc în iframe ajută SEO-ul paginii mele?

Nu te baza pe asta. Scrie titluri, o descriere și instrucțiuni în jurul jocului, ca text normal al paginii.

Jocurile includ reclame sau urmărire?

Edițiile enumeră SDK-urile de reclame și conturile de publicitate drept neincluse. Ce adaugă propria ta pagină, cum ar fi analitice sau reclame, îți aparține ție: trebuie să le declari și, unde este cerut, să ceri consimțământ pentru ele.

Pasul următor

Alege un joc din marketplace, joacă demonstrația și citește manualul. Apoi alege modul care se potrivește site-ului tău și scrie-ne dacă vrei brandul tău pe el.

Răsfoiește șabloanele de jocuri HTML5

Jocuri HTML5 white label: ce primești și ce să întrebi

Licențiezi jocuri HTML5 sau cumperi codul sursă?

Advergame: un joc HTML5 cu brandul tău pentru campania ta