Bagaimana cara membuat game JS dapat diunduh?

20

Saya bisa meletakkan HTML dan JavaScript bersama-sama di .htmlfile yang sama , tetapi gambar harus file terpisah. Satu-satunya solusi yang muncul di benak saya adalah memberi kepada pengguna .zipfolder.

Ini tidak cantik ... Bagaimana lagi saya bisa melakukan ini?

javascript html5 distribution Arnaud
sumber
8
"Standar" bukan untuk membuat game JS dapat diunduh; mereka hanya bekerja di browser. Mungkin ada beberapa cara yang tidak jelas untuk melakukannya, tetapi terus terang mengapa memaksanya: gunakan alat yang tepat untuk pekerjaan itu.
jhocking

Jawaban:

21

Anda dapat menanamkan gambar dalam dokumen HTML menggunakan sintaks dataurl yang memungkinkan untuk menempatkan representasi base64 dari data gambar biner sebagai atribut-src dari suatu gambar. Ini juga berfungsi pada semua jenis file media lainnya.

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

Saat Anda menggunakan lembar gaya CSS, Anda dapat membuat ini sepenuhnya prosedural dalam JavaScript.

Philipp
sumber
tentu saja base64 membutuhkan lebih banyak ruang, empat kali lipat ukuran file ...
Tobias Kienzler
10
@TobiasKienzler: 64 * 4 = 256 tidak berarti dibutuhkan 4 kali lebih banyak data untuk menyandikan satu byte, tetapi Anda hanya menggunakan 6 bit (2 ** 6 = 64) dari setiap 8 dalam setiap byte. Itu berarti bahwa diperlukan 4 byte untuk mengkodekan 3 byte, yang memberikan peningkatan ukuran 33% (tidak termasuk padding bila perlu). Hampir empat kali lipat. Satu-satunya kasus di mana ukuran data adalah empat kali lipat adalah ketika pengkodean satu byte, yang membutuhkan 2 byte data ditambah 2 byte padding.
Panda Pajama
2
@ Pamanda Piyama saya buruk, saya bermaksud mengatakan "meningkat seperempat" (karena 2/8 = 1/4 bit yang terbuang). Meskipun jelas saya membuat kesalahan di sana, 33% yang Anda dapatkan benar. Tetap saja, ini adalah overhead, juga "terkenal" dari lampiran email
Tobias Kienzler
1
Apakah basis 64 inline encoding berfungsi untuk sumber daya lain seperti .wav, .ogg, .m4a, dan secara umum file apa saja?
DrZ214
1
@ DrZ214 Saya belum mencoba, tetapi AFAIK seharusnya berfungsi di mana saja URL berfungsi.
Philipp
31

Hanya dengan meletakkan semua file ke dalam file .zip bukanlah solusi yang layak karena sebagian besar aplikasi web memerlukan server web sehingga mereka dapat mengakses sumber daya melalui permintaan HTTP. Pada beberapa sistem Anda dapat mengakses file melalui file://skema URI , tetapi itu tidak dijamin untuk bekerja di mana-mana karena alasan keamanan dan akan gagal untuk hal-hal seperti permintaan AJAX.

Ini mungkin bekerja untuk aplikasi yang sangat sederhana di mana Anda memiliki sebagian besar sumber daya inline, tetapi ini sebenarnya bukan pendekatan yang saya sarankan kepada siapa pun. Ada beberapa alternatif, seperti:

Bangun aplikasi asli

Anda dapat mengemas aplikasi web Anda sebagai aplikasi asli menggunakan Node-Webkit . Anda bahkan dapat menggunakan ini untuk menambahkan fitur desktop asli (seperti save-game lokal) ke game Anda.

Ini bukan pendekatan " paket dan selesai " .. Anda mungkin harus menulis ulang bagian dari aplikasi Anda dan menulis pemuat yang berbeda (mis. Dengan aplikasi desktop Anda lebih suka memuat file melalui sistem file, sedangkan Anda menggunakan HTTP -Pertanyaan dalam browser / game online).

Gunakan fitur HTML5 untuk memungkinkan akses offline aplikasi Anda

Jika tujuan utama Anda adalah untuk memungkinkan pemain untuk memainkan game Anda secara offline, maka Anda juga dapat menggunakan cache aplikasi untuk memungkinkan akses offline aplikasi Anda. Ini adalah fitur yang berfungsi di sebagian besar browser modern . Manfaat tambahannya adalah bahwa pengguna tidak perlu mengunduh apa pun dan cukup menggunakan bookmark untuk memainkan game Anda bahkan saat offline.

Untuk sumber daya yang dimuat secara tidak sinkron (AJAX) Anda juga harus menerapkan mekanisme pemuatan yang terpisah. Anda dapat menggunakan penyimpanan lokal untuk menghemat sumber daya ini untuk penggunaan offline.

bummzack
sumber
2
Node-Webkit cukup besar, dan Anda akan mendapatkan 60MB untuk game JS "hello world" jika Anda memasukkannya.
ashes999
1
Ini adalah jawaban yang tepat jika aplikasi Anda bahkan jauh rumit.
Vaughan Hilts
1
@ ashes999 Saya setuju dengan Anda, namun 60MB masih cukup kecil untuk aplikasi desktop saat ini. Banyak kerangka kerja tujuan umum membuat beberapa overhead ukuran file (ambil Unity sebagai contoh yang menonjol). Dengan ruang penyimpanan yang semakin meningkat, kenyamanan menang atas ukuran file;)
bummzack
2
@bummzack saya tidak setuju. Sangat menyedihkan untuk mengambil game JS ~ 100kb dan melihatnya menjadi 60MB, sebelum Anda menambahkan karya seni atau audio. Semoga seseorang akan datang dengan cara yang lebih baik. +1 btw
ashes999
1
Meskipun ada banyak info berguna dalam jawaban ini, kalimat utama itu jelas salah. Anda dapat memasukkan data gim dalam file JavaScript, browser modern harus dapat menangani setidaknya beberapa MB JavaScript, dan selama Anda tidak mencoba membaca data gambar dari kanvas, tidak ada yang salah dengan menggunakan file gambar. . Terakhir kali saya periksa, semua browser modern memungkinkan file:///protokol untuk mengakses localStorage, yang berfungsi untuk menyimpan. Ini akan skala untuk melakukan apa pun yang dapat dilakukan seseorang dalam permainan HTML, kecuali bermain online.
aaaaaaaaaaaa
7

Untuk solusi berbasis Chrome untuk membuat game berjalan offline dan menikmati beberapa fungsi asli, Anda dapat mempertimbangkan membuat Aplikasi Chrome .

Dengan cara ini, Anda dapat mendistribusikannya di Toko Web Chrome untuk visibilitas tambahan, Anda dapat menikmati beberapa API yang kuat , dan membuatnya lebih mirip aplikasi mandiri .

Kelemahannya, tentu saja, membutuhkan Chrome.

Xan
sumber
1
Firefox (dan Firefos OS) memiliki OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… ) yang mirip dengan ini: id aplikasi web yang diunduh telah diinstal sebagai aplikasi. Kedua solusi harus konvergen ke standar umum: html5doctor.com/web-manifest-specification . Lihat juga: code.google.com/p/chromium/issues/detail?id=366145
ysdx
@ysdx Standar konvergen yang Anda sebutkan adalah untuk apa yang oleh Chrome disebut "aplikasi yang dihosting", bukan aplikasi mandiri yang dapat diunduh, juga disebut "aplikasi paket". Terminologi yang sama berlaku untuk Firefox. Sayangnya, aplikasi yang dikemas secara arsitektur sangat berbeda dan tidak mungkin bertemu.
Xan
@ Dapatkah sebuah aplikasi dikemas? Apakah aplikasi 'dihosting' dan 'dikemas' tersedia di toko aplikasi Firefox dan Chrome?
Qsigma
1
@Qsigma Aplikasi terpaket adalah sebagian besar aplikasi HTML5 mandiri dengan akses ke API yang kuat seperti akses sistem file lokal; ini "dikemas" karena mengandung sumber dayanya sendiri dalam unduhan. Aplikasi "yang dihosting" pada dasarnya adalah tautan ke situs web dengan beberapa metadata. Anggap saja sebagai persilangan antara pintasan dan bookmark. Saya tidak tahu tentang toko Firefox, tetapi dokumentasi dari komentar pertama menjelaskan cara menulis aplikasi yang dikemas.
Xan
Apa perbedaan antara mengklik dan membiarkan aplikasi berjalan offline tanpa unduhan lebih lanjut dengan kuota dan izin lebih banyak dan mengeklik dan membiarkan aplikasi berjalan tanpa unduhan lebih lanjut dengan kuota dan izin lebih banyak? Meskipun secara teknis mereka memiliki perbedaan, perbedaan itu dangkal, bagi pengguna tidak ada perbedaan. Kemasan aplikasi yang di-host dengan benar seharusnya cukup sepele dengan manifes yang tepat. Kelemahan dengan aplikasi paket adalah tidak dapat memperbarui dirinya sendiri tanpa manajer paket eksternal, dengan aplikasi yang dihosting browser itu sendiri adalah manajer paket.
Lie Ryan
0

Yah itu tergantung pada seberapa banyak pekerjaan yang ingin Anda masukkan ke dalamnya. Dengan menggunakan set API Web saat ini, Anda dapat:

  • Buat Aplikasi Web Progresif (PWA) (Sayangnya, PWA hanya untuk ponsel dan Chrome OS, tetapi saya pernah mendengar bahwa Chrome untuk Desktop akan segera memiliki dukungan untuk itu. Untuk saat ini, ia bersembunyi di balik bendera) sejak Aplikasi lama Cache sekarang sudah tidak digunakan lagi
  • Konversikan semuanya menjadi teks ( gambar dan audio ). Dan mendorong pengguna untuk menyimpan halaman web apa adanya (menggunakan Cmd+Satau Ctrl+Sdi browser) atau cache halaman sebagai PWA. Ketahuilah bahwa, di seluler, dataURI tidak berkinerja baik.
  • Anda dapat membuat Aplikasi Chrome , tetapi itu tidak akan berfungsi pada versi Chrome apa pun yang tidak berjalan di Chrome OS . Ini berarti lebih baik bagi Anda untuk membuat ekstensi sebagai gantinya
  • Sebagian besar game berukuran di bawah 10 MB, dengan itu Anda bisa menyimpan semua data game ke penyimpanan lokal. Bagaimana Anda melakukan ini, itu terserah Anda: Anda dapat melakukan hal di atas (mengonversi semuanya menjadi teks), menggunakan Blob api, dll. Walaupun saya sangat mencegah hal ini, karena beberapa ponsel dapat menghapus seluruh permainan Anda dari memori. Yang berarti Anda harus memeriksa bahwa semuanya baik-baik saja (jika kode Anda masih dalam memori), yang berarti waktu muat lebih lama dan juga dapat membuat crash pada ponsel pengguna. Jika Anda memilih untuk turun jalan ini, Anda pasti akan mendapat manfaat dari menggunakan LocalForage
  • Menggunakan Electron atau NW.js , Anda dapat menggunakan html, css, dan js untuk membuat aplikasi desktop. Metode serupa dapat digunakan untuk membuat aplikasi seluler juga (menggunakan sesuatu seperti Cordova atau Cordova yang tergantung seperti PhoneGap ). Anda akan melakukan ini dan mengizinkan pengguna untuk mengunduh permainan lengkap jika mereka mau.
  • Jika Anda masih ingin melanjutkan dengan zipfile, checkout JSZip . Saya tidak tahu bagaimana Anda bisa menggunakannya, tapi saya yakin seseorang dapat datang dengan ide yang bagus (mungkin zip file Anda dan kemudian mengkonversi data biner ke string dan tempatkan inline ke dalam html).
  • Peretasan aneh ini memungkinkan Anda untuk memuat data teks apa pun sebagai sesuatu yang dikenal sebagai blok data. Ini hanyalah alat lain yang dapat Anda gunakan untuk menanamkan aset ke dalam file html.
Kitanga Nday
sumber