Πώς να φιλοξενήσετε παιχνίδι HTML5: ανέβασμα, iframe, διορθώσεις

Πώς φιλοξενείτε ένα παιχνίδι HTML5, σε μία πρόταση: ανεβάζετε τα περιεχόμενα του φακέλου game/ σε οποιονδήποτε web host που σερβίρει στατικά αρχεία, κρατάτε τους υποφακέλους ακριβώς όπως είναι και ανοίγετε τη διεύθυνση του φακέλου σε έναν browser. Ο φάκελος game/, έτοιμος για φιλοξενία, κάθε έκδοσης στο marketplace μας τρέχει όπως είναι: χωρίς PHP, χωρίς βάση δεδομένων, χωρίς βήμα build και χωρίς λογαριασμό. Ο διακομιστής χρειάζεται μόνο να δώσει τα αρχεία στον browser του παίκτη.

Αυτό είναι όλη η δουλειά όταν όλα πάνε καλά. Ο οδηγός αφορά τις άλλες μέρες: μια κενή οθόνη, σφάλματα 404, ένα μήνυμα για τον τύπο MIME, ένα iframe που δεν δείχνει τίποτα. Επειδή πουλάμε αυτά τα templates, διαβάστε το σαν εγχειρίδιο πεδίου για τα δικά μας πακέτα. Σερβίρουμε αντίγραφα των Gridspark και Velvet Pool από έναν προσωρινό τοπικό διακομιστή, χαλάσαμε το Gridspark σκόπιμα με διάφορους τρόπους και διαβάσαμε τα δημόσια εγχειρίδια άλλων εκδόσεων. Όταν μια πληροφορία προέρχεται από εγχειρίδιο και όχι από τη δική μας δοκιμή, το λέμε.

Τι περιλαμβάνει στην πραγματικότητα η φιλοξενία ενός παιχνιδιού HTML5

Ένας στατικός διακομιστής αποθηκεύει αρχεία και τα δίνει στους browsers όταν τα ζητήσουν. Ποτέ δεν τρέχει το παιχνίδι· αυτό το κάνει ο browser του παίκτη. Γι' αυτό οι απαιτήσεις των εκδόσεών μας είναι τόσο απλές: ένας σύγχρονος browser, ένας host που σερβίρει στατικά αρχεία μέσω HTTP ή HTTPS και καμία PHP, βάση δεδομένων ή λογαριασμός για να παίξετε. Ο φάκελος game/ είναι ήδη χτισμένος, οπότε η δημοσίευσή του δεν θέλει npm ούτε βήμα build.

Δύο όρια πρέπει να γνωρίζετε πριν ξεκινήσετε. Κάποιες εκδόσεις έχουν προαιρετικά μέρη που δεν είναι στατικά: τα Zabum και Ricopop έχουν προαιρετικό leaderboard που θέλει PHP 7.4 ή νεότερη έκδοση και φάκελο με δικαίωμα εγγραφής. Οι εκδόσεις TypeScript (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z και Zabum) χρειάζονται Node.js μόνο αν θέλετε να επεξεργαστείτε τον κώδικα και να ξαναχτίσετε· κάθε εγχειρίδιο αναφέρει την έκδοση. Τα Velvet Pool, Puttide, Ricopop και Gridspark έρχονται με απλή JavaScript, χωρίς βήμα μεταγλώττισης ανάμεσα στις αλλαγές σας και στα αρχεία που ανεβάζετε. Τίποτα από αυτά δεν χρειάζεται για να δημοσιεύσετε το παιχνίδι όπως παραδίδεται. Και η ίδια η φιλοξενία δεν περιλαμβάνεται στην αγορά. Οι όροι του καταστήματος αναφέρουν τη φιλοξενία και την εγκατάσταση στον διακομιστή σας ως ξεχωριστές υπηρεσίες, που σας τις προσφέρουμε πριν από κάθε εργασία· η υποστήριξη καλύπτει ερωτήσεις για την εγκατάσταση και τη χρήση των αρχείων που σας δίνουμε.

Τι ανεβαίνει και τι μένει στον υπολογιστή σας:

• Ανεβάστε όλα όσα υπάρχουν μέσα στον game/: index.html, scripts, styles, εικόνες, ήχους και γραμματοσειρές.
• Αφήστε έξω τον φάκελο source/ (το αντίγραφο για επεξεργασία από προγραμματιστές), τον φάκελο documentation/ (το εγχειρίδιο) και το ίδιο το ZIP. Το εγχειρίδιο του Zabum αναφέρει ότι το ανέβασμα του source/ κατά λάθος είναι αιτία σφαλμάτων 404, όπως για το main.tsx.
• Κρατήστε τις σημειώσεις άδειας των τρίτων που έρχονται με το πακέτο μαζί με το προϊόν σας, όπως ζητούν οι όροι.

Δείτε το Gridspark, την έκδοση που χρησιμοποιούμε ως παράδειγμα

Πώς να φιλοξενήσετε ένα παιχνίδι HTML5: η σύντομη διαδρομή από το ZIP σε σελίδα που παίζεται

Αυτά τα βήματα ακολουθούν τα κεφάλαια εγκατάστασης των εγχειριδίων Velvet Pool, Puttide, Gridspark και Sunset Rally, με τους ελέγχους που προσθέσαμε μετά τις δοκιμές μας. Το Gridspark είναι το παράδειγμα επειδή είναι η έκδοση που σερβίραμε και χαλάσαμε πιο συχνά.

1. Αποσυμπιέστε το πακέτο στον υπολογιστή σας. Θα βρείτε τον game/ (τον φάκελο που δημοσιεύετε), τον source/ (το επεξεργάσιμο αντίγραφο) και τον documentation/ (το εγχειρίδιο).
2. Προαιρετικά αλλά φθηνό: δοκιμάστε το τοπικά. Ανοίξτε ένα τερματικό μέσα στον game/, τρέξτε python -m http.server 8765 και επισκεφθείτε τη διεύθυνση http://localhost:8765/. Αν παίζει εκεί, τα αρχεία είναι σωστά και τυχόν επόμενο πρόβλημα ανήκει στον host.
3. Διαλέξτε τώρα την τελική διεύθυνση, για παράδειγμα https://your-site.example/games/gridspark/. Ένας υποφάκελος λειτουργεί, επειδή οι διαδρομές μέσα στο παιχνίδι είναι σχετικές· το εγχειρίδιο του Gridspark προτείνει public_html/games/gridspark/.
4. Ανεβάστε τα περιεχόμενα του game/ σε αυτόν τον φάκελο με τον διαχειριστή αρχείων του host σας ή με πρόγραμμα FTP, κρατώντας κάθε υποφάκελο. Το index.html πρέπει να βρίσκεται απευθείας μέσα στον φάκελο, όχι ένα επίπεδο πιο βαθιά.
5. Ανοίξτε τη διεύθυνση του φακέλου μέσω https, με την τελική κάθετο. Στο Gridspark πατάτε την αρχική οθόνη (οι browsers περιμένουν ένα άγγιγμα ή κλικ πριν επιτρέψουν τον ήχο) και πατάτε Play (Παίξε).
6. Κάντε μία κίνηση, ανανεώστε τη σελίδα και ελέγξτε ότι το μενού εμφανίζει πλέον το Continue (Συνέχεια). Αυτό αποδεικνύει ότι ο browser αποθηκεύει την πρόοδο για τη δική σας διεύθυνση.
7. Συνδέστε τον φάκελο από την ιστοσελίδα σας ή ενσωματώστε τον σε μια σελίδα (δείτε την ενότητα για το iframe παρακάτω).

Ένας έτοιμος φάκελος Gridspark περιέχει τα index.html, style.css, gridspark.config.js, src/ και assets/ το ένα δίπλα στο άλλο, και το εγχειρίδιο ζητά να μείνουν μαζί. Άλλες εκδόσεις οργανώνονται διαφορετικά (το Velvet Pool έχει css/ και assets/ αντί για ένα φύλλο στυλ), αλλά ο κανόνας είναι ίδιος: ανεβάστε τον φάκελο όπως έρχεται.

Γιατί το διπλό κλικ στο index.html δίνει κενή σελίδα

Οι εκδόσεις που ανοίξαμε φορτώνουν τον κώδικά τους ως ES modules, και οι browsers αρνούνται να φορτώσουν modules από διευθύνσεις file://. Ανοίξαμε το Gridspark απευθείας από τον δίσκο στο Chromium και πήραμε μια σκοτεινή, άδεια οθόνη. Η κονσόλα έγραφε ότι το script μπλοκαρίστηκε από την πολιτική CORS, με την αιτία «Cross origin requests are only supported for protocol schemes», δηλαδή μόνο για πρωτόκολλα όπως http και https. Ο ίδιος φάκελος σερβιρισμένος από τοπικό διακομιστή έδειξε την αρχική οθόνη αμέσως. Τα εγχειρίδια των Velvet Pool, Puttide, Sunset Rally και Gridspark λένε το ίδιο: μην ανοίγετε το παιχνίδι από το file://.

• Δεν δουλεύει: file:///C:/Users/you/games/gridspark/index.html
• Δουλεύει: http://localhost:8765/ από τοπικό δοκιμαστικό διακομιστή, ή https://your-site.example/games/gridspark/ στον host σας.

Δοκιμάσαμε μόνο στο Chromium. Τα εγχειρίδια περιγράφουν τον αποκλεισμό ως κάτι που κάνουν οι κοινοί browsers, οπότε υπολογίστε ότι θα συμβεί παντού.

Ενσωμάτωση του παιχνιδιού σε σελίδα με iframe

Για να δείξετε το παιχνίδι μέσα σε μια σελίδα που ήδη έχετε, δείξτε ένα iframe στον ανεβασμένο φάκελο. Αυτή είναι η ετικέτα που δοκιμάσαμε:

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

• src: η πλήρης διεύθυνση του φακέλου, με https και την τελική κάθετο.
• title: ένα σύντομο όνομα. Οι αναγνώστες οθόνης το χρησιμοποιούν για να περιγράψουν το πλαίσιο.
• allow="fullscreen; autoplay": τα εγχειρίδια λένε να επιτρέπετε πλήρη οθόνη και αυτόματη αναπαραγωγή στο iframe όταν χρειάζεται. Στη δοκιμή μας, ένα πλαίσιο από άλλη διεύθυνση χωρίς αυτό είχε απενεργοποιημένη την πλήρη οθόνη, και το Gridspark απλώς έκρυψε το κουμπί της. Η παλαιότερη ιδιότητα allowfullscreen έδωσε το ίδιο αποτέλεσμα με το allow. Ένα πλαίσιο στην ίδια διεύθυνση με τη σελίδα παίρνει πλήρη οθόνη και στις δύο περιπτώσεις.
• Χωρίς ιδιότητα sandbox. Με μόνο το sandbox="allow-scripts", το Gridspark δεν ξεκίνησε ποτέ: το πλαίσιο παίρνει null origin, ο browser μπλόκαρε το script του παιχνιδιού και η τοπική αποθήκευση πέταξε σφάλμα ασφαλείας. Η προσθήκη του allow-same-origin το κάνει να δουλέψει, αλλά το MDN προειδοποιεί ότι αυτό το ζεύγος σε πλαίσιο της ίδιας προέλευσης αφαιρεί την προστασία. Για παιχνίδι που φιλοξενείτε μόνοι σας, αφήστε έξω το sandbox.

Μέγεθος για κινητά

Ένα σταθερό κουτί 16:9 φαίνεται σωστό σε υπολογιστή και λάθος σε κινητό. Στα 390 px πλάτος, ένα iframe με aspect-ratio 16/9 είναι μόνο 219 px ψηλό, και το μενού του Gridspark κοβόταν κάτω από το κουμπί Daily challenge (Ημερήσια πρόκληση). Δίνοντας στο πλαίσιο ύψος 75svh, τα τρία τέταρτα του ύψους της οθόνης, εμφανίστηκε όλο το μενού. Η δική σας σελίδα χρειάζεται επίσης μια ετικέτα meta viewport· και τα έξι πακέτα που ανοίξαμε έχουν μία στο δικό τους index.html, γι' αυτό το παιχνίδι κλιμακώνεται όταν ανοίγει απευθείας.

Το παιχνίδι λειτουργεί στη δική του διεύθυνση χωρίς σελίδα γύρω του, οπότε ένας απλός σύνδεσμος που ανοίγει εκείνη τη διεύθυνση είναι πάντα έγκυρη εναλλακτική.

Δείτε το Velvet Pool, μια έκδοση 3D που ενσωματώνεται με τον ίδιο τρόπο

WordPress και άλλοι δημιουργοί ιστοσελίδων

Η φιλοξενία του φακέλου και η εμφάνισή του σε σελίδα είναι δύο ξεχωριστές δουλειές, και στο WordPress χρησιμοποιούνται δύο διαφορετικά εργαλεία. Όλα όσα ακολουθούν προέρχονται από την τεκμηρίωση του WordPress και από το developer reference του, όχι από το να τρέχουμε εμείς το WordPress.

1. Ανεβάστε τον φάκελο με τον διαχειριστή αρχείων του host ή με FTP, μέσα στο δέντρο φακέλων του site (για παράδειγμα έναν φάκελο games/ δίπλα στους φακέλους του WordPress). Όχι μέσω της Βιβλιοθήκης Πολυμέσων: ο κώδικας του WordPress αφαιρεί τα .html και .js από τους επιτρεπόμενους τύπους αρχείων, εκτός αν ο χρήστης έχει τη δυνατότητα unfiltered_html.
2. Ανοίξτε τη διεύθυνση του φακέλου μόνη της πριν αγγίξετε οποιαδήποτε σελίδα. Οι προεπιλεγμένοι κανόνες Apache που τεκμηριώνει το WordPress στέλνουν ένα αίτημα στο index.php μόνο όταν δεν υπάρχει ταιριαστό αρχείο ή φάκελος (αυτό ελέγχουν οι συνθήκες !-f και !-d), οπότε ένας ανεβασμένος φάκελος σερβίρεται όπως είναι.
3. Προσθέστε το iframe σε ένα μπλοκ Custom HTML. Το WordPress τεκμηριώνει ότι οι χρήστες χωρίς τη δυνατότητα unfiltered_html, για παράδειγμα ένας Contributor, βλέπουν τις ετικέτες iframe να αφαιρούνται όταν αποθηκεύεται το άρθρο. Αν το πλαίσιο εξαφανιστεί μετά την αποθήκευση, ελέγξτε ποιος επεξεργάστηκε τη σελίδα.

Άλλοι δημιουργοί ιστοσελίδων και CMS: δεν τους έχουμε δοκιμάσει και δεν κάνουμε καμία δήλωση για κανέναν. Το παιχνίδι χρειάζεται παντού τα ίδια δύο πράγματα: ένα μέρος για τον ανεβασμένο φάκελο και ένα στοιχείο ενσωμάτωσης που δέχεται iframe. Αν ένας δημιουργός δεν προσφέρει κανένα από τα δύο, φιλοξενήστε τον φάκελο όπου υπάρχει διακομιστής στατικών αρχείων και συνδέστε τη διεύθυνσή του.

Όταν δεν ξεκινάει: λίστα αντιμετώπισης προβλημάτων

Ανοίξτε τα εργαλεία προγραμματιστή του browser (F12 στους περισσότερους επιτραπέζιους browsers) και δείτε τις καρτέλες Console και Network πριν αλλάξετε οτιδήποτε. Κάθε πρόβλημα παρακάτω αφήνει μια κόκκινη γραμμή εκεί, και το όνομα του αρχείου μέσα της συνήθως δείχνει την αιτία.

Κενή οθόνη

Ελέγξτε με αυτή τη σειρά: η διεύθυνση ξεκινά με http:// ή https://· η Console δεν έχει κόκκινες γραμμές· τα ονόματα αρχείων διατηρούν ακριβώς τα κεφαλαία και πεζά τους· και, για τις εκδόσεις 3D, το WebGL2 είναι διαθέσιμο (το εγχειρίδιο του Velvet Pool λέει να ενεργοποιήσετε την επιτάχυνση υλικού). Οι φιλοξενίες Linux αντιμετωπίζουν το Game.js και το game.js ως δύο αρχεία, ενώ τα Windows όχι, οπότε ένας φάκελος που δούλευε στον υπολογιστή σας μπορεί να σπάσει μετά το ανέβασμα. Τα εγχειρίδια των Velvet Pool και Zabum προειδοποιούν και τα δύο για τα κεφαλαία.

404 για src/main.js, γραμματοσειρές ή εικόνες

Ένα μέρος του φακέλου δεν έφτασε, ή έφτασε ένα επίπεδο πιο βαθιά. Το αναπαραγάγαμε ανεβάζοντας μόνο τα index.html, style.css και το αρχείο ρυθμίσεων: η οθόνη έμεινε κενή και η καρτέλα Network έδειχνε 404 για το src/main.js και για κάθε γραμματοσειρά. Ανεβάστε τους φακέλους που λείπουν ή μετακινήστε τα περιεχόμενα πιο πάνω, ώστε το index.html να βρίσκεται στη διεύθυνση που ανοίγετε. Αν λείπουν ή είναι κατεστραμμένες εικόνες ή ήχοι, το εγχειρίδιο του Zabum προτείνει FTP σε λειτουργία binary ή auto, ή ανέβασμα ZIP και αποσυμπίεση στον διαχειριστή αρχείων του host. Ένα 404 σημαίνει αρχείο που λείπει. Δεν είναι πρόβλημα MIME.

Η σελίδα φορτώνει χωρίς στυλ, με τεράστια εικονίδια

Αν ένας κανόνας rewrite ή μια ρύθμιση καθαρών διευθύνσεων σερβίρει τον φάκελο χωρίς την τελική κάθετο, οι σχετικές διαδρομές καταλήγουν ένα επίπεδο πιο πάνω. Το αναπαραγάγαμε με δοκιμαστικό διακομιστή που επιστρέφει τη σελίδα του φακέλου χωρίς ανακατεύθυνση. Ο browser ζήτησε το /games/style.css και το /games/src/main.js αντί για τα αρχεία μέσα στο /games/gridspark/, πήρε 404 και ζωγράφισε το μενού ως ωμά κουμπιά και υπερμεγέθη εικονίδια. Συνδέστε τον φάκελο με την τελική κάθετο, ή δείξτε κατευθείαν το index.html.

Σφάλμα τύπου MIME σε script module

Στη δοκιμή μας η κονσόλα έγραφε: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Οι browsers είναι αυστηροί με τα script module. Τα εγχειρίδια λένε ότι ο διακομιστής πρέπει να στέλνει τα αρχεία .js με τύπο JavaScript και τα .wasm ως application/wasm· το εγχειρίδιο του Sunset Rally προσθέτει και το .mjs. Η καρτέλα Network δείχνει το Content-Type κάθε αρχείου. Στις εκδόσεις που ανοίξαμε, τα modules είναι αρχεία .js. Αν προσθέσετε δικά σας αρχεία .mjs και μια παλαιότερη ρύθμιση Apache δεν τα αντιστοιχίζει, μία γραμμή στο .htaccess το διορθώνει, η ίδια που χρησιμοποιεί και το δικό μας site:

AddType text/javascript .mjs

Ο πίνακας τύπων του Apache 2.4.62 στον δοκιμαστικό μας υπολογιστή αντιστοιχίζει ήδη τα js και mjs σε text/javascript και το wasm σε application/wasm, οπότε μια κανονική εγκατάσταση δεν χρειάζεται τη γραμμή. Άλλοι διακομιστές έχουν δικούς τους πίνακες· ρωτήστε όποιον τους διαχειρίζεται.

Μπλοκαρισμένο από την πολιτική CORS

Τα script module και οι γραμματοσειρές που φορτώνονται από άλλη διεύθυνση χρειάζονται κεφαλίδα Access-Control-Allow-Origin από εκείνη τη διεύθυνση. Στη δοκιμή μας, μια σελίδα σε μια θύρα δεν μπορούσε να φορτώσει script module από άλλη θύρα, μέχρι ο δεύτερος διακομιστής να στείλει την κεφαλίδα. Στην πράξη η διόρθωση είναι βαρετή: κρατήστε τα αρχεία του παιχνιδιού μαζί, σε έναν φάκελο και μία διεύθυνση, όπως είναι φτιαγμένα τα πακέτα. Δεν χρειάζεστε CORS για να ενσωματώσετε το παιχνίδι με iframe σε άλλη σελίδα, επειδή το iframe απλώς φορτώνει τη διεύθυνση του παιχνιδιού. Ένα σφάλμα CORS μέσα σε ενσωμάτωση συνήθως προέρχεται από ιδιότητα sandbox, όπως περιγράφηκε πιο πάνω.

Μεικτό περιεχόμενο σε σελίδα https

Μια σελίδα σε https δεν μπορεί να φορτώσει scripts ή iframes από http: οι browsers μπλοκάρουν και τα δύο, και το MDN αναφέρει ότι αποκλείονται και οι γραμματοσειρές και τα αιτήματα fetch. Χρησιμοποιήστε https:// στο src του iframe και σε κάθε πλήρη διεύθυνση που πληκτρολογείτε. Τα αρχεία του παιχνιδιού χρησιμοποιούν σχετικές διαδρομές, οπότε ακολουθούν το πρωτόκολλο της διεύθυνσης που ανοίξατε. Αν η διεύθυνση https δεν ανοίγει καθόλου, ενεργοποιήστε πρώτα το πιστοποιητικό από τον πίνακα ελέγχου του host σας.

Το iframe λέει «refused to connect»

Στη δοκιμή μας το Chromium κατέγραψε αυτή τη γραμμή, με τη διεύθυνση του μπλοκαρισμένου πλαισίου στα πρώτα εισαγωγικά: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Ο διακομιστής που φιλοξενούσε το παιχνίδι έστελνε αυτή την κεφαλίδα. Το SAMEORIGIN επιτρέπει ενσωμάτωση μόνο από την ίδια διεύθυνση, ενώ το DENY δεν επιτρέπει ποτέ· ένας κανόνας frame-ancestors σε κεφαλίδα Content-Security-Policy κάνει παρόμοια δουλειά. Αλλάξτε την κεφαλίδα για τον φάκελο του παιχνιδιού, ή σερβίρετε τη σελίδα και το παιχνίδι από μία διεύθυνση.

Αρχικά χωρίς ήχο

Οι browsers μπλοκάρουν τον ήχο μέχρι το πρώτο άγγιγμα ή κλικ, γι' αυτό το Gridspark ανοίγει σε οθόνη έναρξης με πάτημα. Πατήστε μία φορά, και μετά ελέγξτε την ένταση και τα δικαιώματα του browser.

Δείτε το Puttide, την έκδοση γκολφ με έτοιμο build για φιλοξενία

Ενημέρωση του παιχνιδιού χωρίς να σερβίρεται μισή παλιά έκδοση

Οι browsers αποθηκεύουν scripts στη μνήμη, οπότε μετά από ένα ανέβασμα εσείς ή ένας παίκτης μπορεί να βλέπετε ακόμα το παλιό παιχνίδι. Το εγχειρίδιο του Gridspark δίνει τον κανόνα: κρατήστε αντίγραφο των αλλαγών σας, αντικαταστήστε τα αρχεία που παίζονται ως ένα σύνολο, δοκιμάστε, και κάντε σκληρή ανανέωση αν ο host αποθηκεύει παλιά modules. Μην αναμειγνύετε παλιά και νέα modules. Ένα παιχνίδι φτιαγμένο από πολλά μικρά αρχεία που εισάγουν το ένα το άλλο είναι λάθος να ενημερώνεται στη μέση.

Οι εκδόσεις με service worker κρατούν δική τους μνήμη. Το Zabum είναι PWA: μετά από ενημέρωση, κάντε σκληρή ανανέωση (Ctrl ή Cmd συν Shift συν R). Αν αντικαταστήσατε αρχεία ήχου, αλλάξτε το όνομα της μνήμης στο sw.js (το παράδειγμα του εγχειριδίου πηγαίνει από zabum-v5 σε zabum-v6) και ανεβάστε αυτό το αρχείο. Αν η ιστοσελίδα σας βρίσκεται πίσω από CDN, καθαρίστε και τη μνήμη του. Από τα εγχειρίδια που διαβάσαμε, μόνο το Zabum είναι PWA· τα εγχειρίδια των Velvet Pool και Puttide λένε ρητά ότι το δικό τους δεν είναι εφαρμογή εγκαταστάσιμη και εκτός σύνδεσης.

Διαβάστε το ιστορικό αλλαγών πριν αντικαταστήσετε αρχεία, και κρατήστε αντίγραφο όσων επεξεργαστήκατε. Οι αποθηκεύσεις ζουν στον browser κάθε παίκτη, όχι στον φάκελο που ανεβάζετε, οπότε η αντικατάσταση των αρχείων δεν τις διαγράφει.

Δείτε το Zabum, την έκδοση PWA με προαιρετικό leaderboard σε PHP

Πού αποθηκεύεται η πρόοδος και τι συμβαίνει όταν καθαρίζετε τον browser

Αυτές οι εκδόσεις δεν έχουν λογαριασμούς ούτε βάση δεδομένων στον διακομιστή. Οι ρυθμίσεις, η γλώσσα, η τρέχουσα παρτίδα και τα προσωπικά ρεκόρ βρίσκονται στην τοπική αποθήκευση του browser (local storage), και τίποτα δεν στέλνεται στην Polar Games. Το εγχειρίδιο του Gridspark ονομάζει τα κλειδιά gridspark.standalone.v1.*· μετά από μία κίνηση είδαμε τα gridspark.standalone.v1.best και gridspark.standalone.v1.save.

Η αποθήκευση ανήκει στη διεύθυνση (πρωτόκολλο, host και θύρα), όχι στον φάκελο. Το ελέγξαμε με τρεις τρόπους. Ένα αντίγραφο του Gridspark σε άλλο φάκελο της ίδιας διεύθυνσης διάβασε τις ίδιες αποθηκευμένες τιμές. Το ίδιο παιχνίδι ανοιγμένο ως localhost αντί για 127.0.0.1 ξεκίνησε άδειο, και το ίδιο συνέβη με τη διεύθυνση σε άλλη θύρα. Το εγχειρίδιο του Zabum προσθέτει ότι τα http και https, το www και το μη www, καθώς και οι υποτομείς, έχουν η καθεμία τη δική της αποθήκευση.

• Ο καθαρισμός δεδομένων ή cookies του site σβήνει την αποθηκευμένη παρτίδα και τα ρεκόρ. Σε ιδιωτικό παράθυρο η πρόοδος μπορεί να κρατήσει μόνο για τη συνεδρία· το παιχνίδι συνεχίζει να τρέχει όταν η αποθήκευση είναι μπλοκαρισμένη.
• Άλλος browser ή άλλη συσκευή ξεκινά από το μηδέν. Δεν υπάρχει συγχρονισμός και δεν υπάρχει λογαριασμός για σύνδεση.
• Η αλλαγή της διεύθυνσης μηδενίζει τους πάντες: από http σε https, από www σε μη www, ή σε νέο domain.
• Η μετακίνηση του παιχνιδιού σε άλλο φάκελο της ίδιας διεύθυνσης κρατά τις αποθηκεύσεις, όπως έδειξε η δοκιμή μας με το Gridspark.

Λίστα δοκιμών πριν μοιραστείτε τον σύνδεσμο

1. Ανοίξτε την τελική διεύθυνση στους browsers που χρησιμοποιούν οι παίκτες σας: έναν βασισμένο στο Chromium (Chrome ή Edge), Firefox και Safari. Οι δικές μας δοκιμές έγιναν μόνο στο Chromium, οπότε αυτή είναι η λίστα που πρέπει να τρέξετε εσείς.
2. Ανοίξτε το σε πραγματικό κινητό, πρώτα στη δική του διεύθυνση του παιχνιδιού και μετά μέσα στη σελίδα σας, και στους δύο προσανατολισμούς.
3. Περιορίστε το δίκτυο στα εργαλεία προγραμματιστή και παρακολουθήστε την πρώτη φόρτωση. Το Gridspark, σερβιρισμένο χωρίς συμπίεση από τον τοπικό μας διακομιστή, χρειάστηκε περίπου 0,5 MB και 26 αιτήματα για να φτάσει στην αρχική οθόνη. Με το Chromium περιορισμένο σε 1,6 Mbit/s και 150 ms καθυστέρηση, η οθόνη εμφανίστηκε σε περίπου 3 δευτερόλεπτα. Ολόκληρος ο φάκελος game/ είναι περίπου 3,4 MB στο αντίγραφό μας· το Velvet Pool περίπου 7,3 MB και το Puttide περίπου 15 MB. Αν τα παλιά κινητά δυσκολεύονται, το εγχειρίδιο του Zabum προτείνει να ελέγξετε ότι ο host σας συμπιέζει τα αρχεία με gzip ή brotli.
4. Κάντε μια κίνηση, ανανεώστε, και επιβεβαιώστε ότι υπάρχουν το Continue και το καλύτερο σκορ.
5. Πατήστε μία φορά και ελέγξτε ότι ξεκινά ο ήχος. Η σιγή πριν από το πρώτο πάτημα είναι φυσιολογική.
6. Ανοίξτε ιδιωτικό παράθυρο. Το παιχνίδι πρέπει να τρέχει, ακόμα και αν ξεχάσει την πρόοδο όταν το κλείσετε.
7. Διαβάστε τις καρτέλες Console και Network σε μια πρώτη φόρτωση: καμία κόκκινη γραμμή, κανένα 404.
8. Σε μια ενσωμάτωση, ελέγξτε ότι εμφανίζεται το κουμπί πλήρους οθόνης και ότι το πλαίσιο είναι αρκετά ψηλό σε κινητό.

Συχνές ερωτήσεις

Χρειάζομαι PHP, βάση δεδομένων ή ειδικό διακομιστή για να φιλοξενήσω παιχνίδι HTML5;

Όχι για τις εκδόσεις μας όπως παραδίδονται. Είναι στατικές: ανεβάζετε τον φάκελο game/ σε host που σερβίρει αρχεία μέσω HTTP ή HTTPS και τον ανοίγετε. Τα Zabum και Ricopop έχουν προαιρετικό leaderboard που χρειάζεται PHP 7.4 ή νεότερη έκδοση και φάκελο με δικαίωμα εγγραφής.

Μπορώ απλώς να κάνω διπλό κλικ στο index.html;

Όχι. Οι browsers μπλοκάρουν τα modules του παιχνιδιού στο file://, και η σελίδα μένει κενή. Ανοίξτε το παιχνίδι μέσω διεύθυνσης http ή https, είτε στον host σας είτε σε τοπικό δοκιμαστικό διακομιστή όπως το python -m http.server 8765.

Χρειάζομαι HTTPS;

Τα εγχειρίδια λένε να χρησιμοποιείτε HTTPS για δημόσια φιλοξενία. Το εγχειρίδιο του Zabum λέει ότι το Add to home screen το χρειάζεται, και μια σελίδα https δεν μπορεί να ενσωματώσει iframe http, επειδή οι browsers το μπλοκάρουν ως μεικτό περιεχόμενο.

Πώς προσθέτω το παιχνίδι σε σελίδα WordPress;

Ανεβάστε τον φάκελο με τον διαχειριστή αρχείων του host ή με FTP, ανοίξτε τη διεύθυνσή του για να επιβεβαιώσετε ότι παίζει, και μετά προσθέστε το iframe σε ένα μπλοκ Custom HTML. Οι χρήστες χωρίς τη δυνατότητα unfiltered_html βλέπουν τα iframe να αφαιρούνται, οπότε ελέγξτε τον ρόλο όποιου επεξεργάζεται τη σελίδα.

Πού αποθηκεύεται η πρόοδος, και τι γίνεται αν οι παίκτες καθαρίσουν τα δεδομένα του browser;

Στην τοπική αποθήκευση του browser, ανά διεύθυνση. Ο καθαρισμός δεδομένων του site τη σβήνει, άλλος browser ή συσκευή ξεκινά άδεια, και η αλλαγή του domain ή η εναλλαγή μεταξύ http και https τη μηδενίζει. Δεν υπάρχουν λογαριασμοί και τίποτα δεν στέλνεται σε εμάς.

Η Polar Games φιλοξενεί το παιχνίδι για μένα;

Όχι. Το κατάστημα πουλά τα αρχεία. Η υποστήριξη καλύπτει ερωτήσεις για την εγκατάσταση και τη χρήση τους· η φιλοξενία και η εγκατάσταση στον διακομιστή σας είναι ξεχωριστές υπηρεσίες, που τις προσφέρουμε πριν από κάθε εργασία.

Επόμενο βήμα

Αν ακόμα επιλέγετε παιχνίδια HTML5 για την ιστοσελίδα σας, κάθε σελίδα προϊόντος αναφέρει τις απαιτήσεις της, συνδέει το εγχειρίδιό της και σας επιτρέπει να παίξετε το demo πριν πληρώσετε. Διαβάστε πρώτα το κεφάλαιο εγκατάστασης του εγχειριδίου: είναι η σελίδα που θα χρησιμοποιήσετε για τη δουλειά αυτού του οδηγού.

Δείτε τα templates παιχνιδιών HTML5