Wie kann ich ein JS-Spiel herunterladen?

20

Ich kann HTML und JavaScript in derselben .htmlDatei zusammenfassen, aber die Bilder müssen separate Dateien sein. Die einzige Lösung, die mir in den Sinn kommt, ist, dem Benutzer einen .zipOrdner zu geben .

Das ist aber nicht schön ... Wie kann ich das sonst noch tun?

javascript html5 distribution Arnaud
quelle
8
Der "Standard" besteht nicht darin, JS-Spiele herunterladbar zu machen. Sie funktionieren nur in einem Browser. Es mag einen undurchsichtigen Weg geben, dies zu tun, aber ehrlich gesagt, warum sollte man es erzwingen: Verwenden Sie das richtige Werkzeug für den Job.
jhocking

Antworten:

21

Sie können Bilder in das HTML-Dokument einbetten, indem Sie die dataurl-Syntax verwenden, mit der die base64-Darstellung der binären Bilddaten als src-Attribut eines Bildes definiert wird. Dies funktioniert auch für jede andere Art von Mediendatei.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9EFBAoYMhVvMQIAAAAtSURBVHicY/z//z8DHoBH+v///yy4FDEyMjIwMDDhM3lgpaEuh7gTEzDiDxYA9HEPDF90e5YAAAAASUVORK5CYII=">

Wenn Sie CSS-Stylesheets verwenden, können Sie diese vollständig prozedural in JavaScript erstellen.

Philipp
quelle
Natürlich nimmt base64 mehr Platz in Anspruch und vervierfacht die Dateigröße ...
Tobias Kienzler
10
@TobiasKienzler: 64 * 4 = 256 bedeutet nicht, dass für die Codierung eines einzelnen Bytes viermal so viele Daten erforderlich sind, sondern dass Sie nur 6 Bits (2 ** 6 = 64) von jeweils 8 in jedem Byte verwenden. Das bedeutet, dass für die Codierung von 3 Bytes 4 Bytes erforderlich sind, wodurch sich die Größe um 33% erhöht (ggf. ohne Auffüllen). Kaum vervierfacht. Der einzige Fall, in dem die Datengröße vervierfacht wird, ist die Codierung eines einzelnen Bytes, für das 2 Datenbytes plus 2 Füllbytes erforderlich sind.
Panda Pyjama
2
@PandaPyjama Meine schlechte, ich wollte sagen "um ein Viertel erhöht" (wegen der 2/8 = 1/4 verschwendeten Bits). Obwohl ich dort offensichtlich einen Fehler gemacht habe, sind die 33%, die Sie ableiten, korrekt. Dennoch ist es ein Overhead, auch "berühmt" aus E-Mail-Anhängen
Tobias Kienzler
1
Funktioniert diese 64-Bit-Inline-Codierung auch für andere Ressourcen wie .wav, .ogg, .m4a und im Allgemeinen für alle Dateien?
DrZ214
1
@ DrZ214 habe ich nicht ausprobiert, aber AFAIK sollte es überall funktionieren, wo eine URL funktioniert.
Philipp
31

Nur alle Dateien in eine .zip-Datei zu packen, ist keine praktikable Lösung, da die meisten Webanwendungen einen Webserver benötigen, um über HTTP-Anfragen auf Ressourcen zugreifen zu können. Auf einigen Systemen können Sie über das file://URI-Schema auf Dateien zugreifen , dies funktioniert jedoch aus Sicherheitsgründen nicht überall und schlägt beispielsweise bei AJAX-Anforderungen fehl.

Es könnte für eine sehr einfache App funktionieren, in der Sie die meisten Ressourcen inline haben, aber dies ist wirklich nicht der Ansatz, den ich jedem empfehlen würde. Es gibt jedoch Alternativen, wie zum Beispiel:

Erstellen Sie eine native Anwendung

Sie können Ihre Webanwendung mit Node-Webkit als native App verpacken . Sie können dies sogar verwenden, um Ihrem Spiel native Desktop-Funktionen (z. B. lokale Save-Games) hinzuzufügen.

Dies ist jedoch kein " package and done " -Ansatz. Wahrscheinlich müssen Sie Teile Ihrer Anwendung neu schreiben und verschiedene Loader schreiben (z. B. mit einer Desktop-App laden Sie die Dateien lieber über das Dateisystem, während Sie HTTP verwenden -Anfragen in einem Browser / Online-Spiel).

Verwenden Sie HTML5-Funktionen, um den Offline-Zugriff auf Ihre App zu ermöglichen

Wenn Ihr primäres Ziel darin besteht, dem Spieler das Offline-Spielen Ihres Spiels zu ermöglichen, können Sie auch den Anwendungs-Cache verwenden , um den Offline-Zugriff auf Ihre App zu ermöglichen. Dies ist eine Funktion, die in den meisten modernen Browsern funktioniert . Der zusätzliche Vorteil ist, dass der Benutzer nichts herunterladen muss und einfach ein Lesezeichen verwenden kann, um Ihr Spiel zu spielen, auch wenn es offline ist.

Für Ressourcen, die asynchron geladen werden (AJAX), müssen Sie separate Lademechanismen implementieren. Sie können den lokalen Speicher verwenden , um diese Ressourcen für die Offline-Verwendung zu speichern.

Blödmann
quelle
2
Node-Webkit ist ziemlich groß, und Sie werden am Ende ungefähr 60 MB für ein "Hallo Welt" -JS-Spiel haben, wenn Sie es einschließen.
Asche999
1
Dies ist die richtige Antwort, wenn Ihre Anwendung auch nur annähernd kompliziert ist.
Vaughan Hilts
1
@ ashes999 Ich stimme dir zu, aber 60 MB sind für eine Desktop-App heutzutage immer noch ziemlich klein. Viele der universellen Frameworks verursachen einen gewissen Overhead in Bezug auf die Dateigröße (nehmen Sie Unity als prominentes Beispiel). Mit immer mehr Speicherplatz gewinnt der Komfort über die Dateigröße;)
bummzack
2
@bummzack Ich bin nicht anderer Meinung. Es ist nur deprimierend, ein ~ 100-KB-JS-Spiel zu nehmen und zu sehen, dass es 60 MB groß wird, bevor Sie Kunst oder Audio hinzufügen. Hoffentlich findet jemand einen besseren Weg. +1 übrigens
Asche999
1
Obwohl diese Antwort viele nützliche Informationen enthält, ist der Hauptsatz einfach falsch. Sie können Spieldaten in JavaScript-Dateien ablegen, moderne Browser sollten mindestens ein paar MB JavaScript verarbeiten können, und solange Sie nicht versuchen, die Bilddaten von einer Zeichenfläche auszulesen, ist es auch nichts auszusetzen, wenn Sie Bilddateien verwenden . Als ich das letzte Mal nachgesehen habe, erlauben alle modernen Browser den file:///Zugriff auf das Protokoll localStorage, was sich zum Speichern eignet. Es wird skaliert, um alles zu tun, was man in einem HTML-Spiel tun kann, außer Online-Spielen.
aaaaaaaaaaa 30.09.14
7

Wenn Sie eine Chrome-basierte Lösung benötigen, um das Spiel offline zu schalten und einige native Funktionen zu nutzen, können Sie eine Chrome-App erstellen .

Auf diese Weise können Sie es im Chrome Web Store verteilen, um die Sichtbarkeit zu verbessern, einige leistungsstarke APIs nutzen und es mehr wie eine eigenständige App aussehen lassen .

Der Nachteil ist natürlich Chrome erforderlich.

Xan
quelle
1
In Firefox (und Firefos OS) gibt es OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ), die ungefähr so ​​aussehen : Die heruntergeladene Webanwendungs-ID wird als Anwendung installiert. Beide Lösungen sollten zu einem gemeinsamen Standard konvergieren: html5doctor.com/web-manifest-specification . Siehe auch: code.google.com/p/chromium/issues/detail?id=366145
ysdx
@ysdx Der von Ihnen erwähnte Konvergenzstandard bezieht sich auf das, was Chrome als "gehostete Apps" bezeichnet, im Gegensatz zu einer eigenständigen, herunterladbaren App, die auch als "gepackte App" bezeichnet wird. Dieselbe Terminologie gilt für Firefox. Leider sind gepackte Apps architektonisch sehr unterschiedlich und es ist unwahrscheinlich, dass sie konvergieren.
Xan
@Xan Was ist eine gepackte App? Sind sowohl gehostete als auch gepackte Apps in den App Stores von Firefox und Chrome verfügbar?
Qsigma
1
@Qsigma Eine gepackte App ist eine weitgehend eigenständige HTML5-App mit Zugriff auf leistungsstarke APIs wie den Zugriff auf das lokale Dateisystem. Es ist "gepackt", weil es eigene Ressourcen in einem Download enthält. Eine "gehostete" App ist im Grunde ein Link zu einer Website mit einigen Metadaten. Stellen Sie sich das als eine Kreuzung zwischen einer Verknüpfung und einem Lesezeichen vor. Ich kann nichts über den Firefox-Store erzählen, aber die Dokumentation aus dem ersten Kommentar beschreibt, wie man gepackte Apps schreibt.
Xan
Was ist der Unterschied zwischen dem Klicken und dem Offline-Ausführen der App ohne weitere Downloads mit mehr Kontingenten und Berechtigungen und dem Klicken und dem Ausführen der App ohne weitere Downloads mit mehr Kontingenten und Berechtigungen? Während sie technisch gesehen Unterschiede aufweisen, sind diese Unterschiede oberflächlich, für den Benutzer gibt es keinen Unterschied. Das Packen einer richtig gestalteten gehosteten App sollte mit den richtigen Manifesten ziemlich trivial sein. Der Nachteil einer gepackten App ist, dass sie sich ohne einen externen Paketmanager nicht selbst aktualisieren kann. Bei einer gehosteten App ist der Browser selbst der Paketmanager.
Lie Ryan
0

Nun, es hängt davon ab, wie viel Arbeit Sie wirklich investieren möchten. Mit den aktuellen Web-APIs können Sie:

  • Erstellen einer progressiven Webanwendung (PWA) (PWAs sind leider nur für Mobiltelefone und Chrome OS verfügbar, aber ich habe gehört, dass Chrome für Desktop bald Unterstützung dafür bietet. Derzeit verbirgt es sich hinter einer Markierung) seit der alten Anwendung Cache ist jetzt veraltet
  • Wandle alles in Text um ( Bilder und Audio ). Ermutigen Sie den Benutzer, die Webseite so zu speichern, wie sie ist (mit Cmd+Soder Ctrl+Sim Browser), oder speichern Sie die Seite als PWA im Cache. Wissen Sie nur, dass dataURIs auf Mobilgeräten nicht sehr gut funktionieren.
  • Sie können eine Chrome-App erstellen , dies funktioniert jedoch nicht mit Chrome-Versionen, die nicht unter Chrome OS ausgeführt werden . Das heißt, es ist besser für Sie, stattdessen eine Erweiterung zu erstellen
  • Die meisten Spiele haben eine Größe von weniger als 10 MB. Sie können also alle Daten Ihres Spiels im lokalen Speicher zwischenspeichern. Wie Sie dies tun, liegt an Ihnen: Sie können das oben Genannte tun (alles in Text umwandeln), Blob-API verwenden usw. Obwohl ich davon dringend abraten, da einige Mobiltelefone Ihr gesamtes Spiel aus dem Speicher löschen könnten. Das bedeutet, dass Sie überprüfen müssen, ob alles in Ordnung ist (wenn sich Ihr Code noch im Speicher befindet), was längere Ladezeiten bedeutet und auch zum Absturz des Benutzertelefons führen kann. Wenn Sie sich jedoch für diesen Weg entscheiden, werden Sie definitiv von LocalForage profitieren
  • Mit Electron oder NW.js können Sie Ihre HTML- , CSS- und JS-Dateien verwenden, um eine Desktop-App zu erstellen. Mit ähnlichen Methoden können auch mobile Apps erstellt werden (beispielsweise mit Cordova oder einem Cordova-abhängigen Gerät wie PhoneGap ). Sie würden dies tun und dem Benutzer erlauben, das vollständige Spiel herunterzuladen, wenn er dies möchte.
  • Wenn Sie trotzdem mit einer zipDatei fortfahren möchten , checken Sie JSZip aus . Ich habe keine Ahnung, wie Sie es verwenden können, aber ich bin sicher, dass jemand eine gute Idee haben kann (zippen Sie möglicherweise Ihre Datei, konvertieren Sie die Binärdaten in einen String und platzieren Sie sie in das HTML-Format).
  • Mit diesem verrückten Hack können Sie beliebige Textdaten als so genannten Datenblock laden. Dies ist nur ein weiteres Tool, mit dem Sie Assets in eine HTML-Datei einbetten können.
Kitanga Nday
quelle