Bir JS oyununu nasıl indirilebilir hale getirebilirim?

20

HTML ve JavaScript'i aynı .htmldosyada bir araya getirebilirim , ancak görüntülerin ayrı dosyalar olması gerekir. Aklıma gelen tek çözüm kullanıcıya bir .zipklasör vermektir .

Bu hoş değil ... Bunu başka nasıl yapabilirim?

javascript html5 distribution

— Arnaud
kaynak

8

"Standart" JS oyunlarını indirilebilir kılmak değildir ; sadece bir tarayıcıda çalışırlar. Bunu yapmak için bazı belirsiz yollar olabilir, ama açıkçası neden zorlayın: iş için doğru aracı kullanın.

— jhocking

21

İkili görüntü verilerinin base64 temsilini görüntünün src özniteliği olarak koymaya izin veren dataurl-sözdizimini kullanarak HTML belgesine görüntü gömebilirsiniz. Bu aynı zamanda başka herhangi bir medya dosyası üzerinde de çalışır.

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

CSS stil sayfalarını kullandığınızda, bunları JavaScript'te tamamen yordamsal olarak oluşturabilirsiniz.

— Philipp
kaynak

Tabii ki base64, dosya boyutunu dört katına

— çıkararak

10

@TobiasKienzler: 64 * 4 = 256, tek bir baytı kodlamak için 4 kat daha fazla veri gerektiği anlamına gelmez, ancak her baytta her 8'den sadece 6 bit (2 ** 6 = 64) kullanırsınız. Bu, 3 baytı kodlamak için 4 bayt gerektiğini gösterir, bu da% 33'lük bir boyut artışı sağlar (gerektiğinde dolgu saymaz). Neredeyse dörtlü. Veri boyutunun dört katına çıktığı tek durum, 2 veri baytı artı 2 dolgu baytı gerektiren tek bir baytı kodlamaktır.

— Panda Pijama

2

@PandaPajama Kötüüm, "çeyrek kat artar" demeyi amaçladım (2/8 = 1/4 boşa bit nedeniyle). Herhalde orada bir hata yapmış olmamıza rağmen, elde ettiğiniz% 33 doğru. Yine de, bu ek bir e-posta eklerinden "ünlü" bir havai

— Tobias Kienzler

1

Bu temel 64 satır içi kodlama, .wav, .ogg, .m4a ve genel olarak herhangi bir dosya gibi diğer kaynaklar için çalışır mı?

— DrZ214

1

@ DrZ214 Denemedim, ancak AFAIK bir URL'nin çalıştığı her yerde çalışmalıdır.

— Philipp

31

Tüm dosyaları bir .zip dosyasına koymak uygun bir çözüm değildir, çünkü çoğu web uygulamasının bir HTTP sunucusuna ihtiyaç duyması için bir web sunucusuna ihtiyacı vardır. Bazı sistemlerde file://URI şeması aracılığıyla dosyalara erişebilirsiniz , ancak güvenlik nedeniyle her yerde çalışacağı garanti edilmez ve AJAX istekleri gibi şeyler için başarısız olur.

Çoğu kaynağın inline olduğu çok basit bir uygulama için işe yarayabilir, ancak bu gerçekten kimseye tavsiye edeceğim yaklaşım değildir. Yine de alternatifler var, örneğin:

Yerel bir uygulama oluşturma

Node-Webkit kullanarak web uygulamanızı yerel bir uygulama olarak paketleyebilirsiniz . Bunu, oyununuza yerel masaüstü özellikleri (yerel kaydetme oyunları gibi) eklemek için bile kullanabilirsiniz.

Bu bir " paket ve tamamlandı " yaklaşımı değildir .. muhtemelen uygulamanızın bölümlerini yeniden yazmanız ve farklı yükleyiciler yazmanız gerekir (örneğin, bir masaüstü uygulamasıyla dosyaları dosya sistemi aracılığıyla yüklemeyi tercih edersiniz, HTTP kullanırsanız) -Tarayıcı / çevrimiçi oyunda istekleri).

Uygulamanıza çevrimdışı erişime izin vermek için HTML5 özelliklerini kullanma

Birincil hedefiniz, oyuncunun oyununuzu çevrimdışı oynamasına izin vermekse, uygulamanıza çevrimdışı erişime izin vermek için uygulama önbelleğini de kullanabilirsiniz . Bu, çoğu modern tarayıcıda çalışan bir özelliktir . Ek avantaj, kullanıcının hiçbir şey indirmek zorunda olmaması ve sadece çevrimdışı olsa bile oyununuzu oynamak için bir yer imini kullanabilmesidir.

Zaman uyumsuz olarak yüklenen kaynaklar için (AJAX) ayrıca ayrı yükleme mekanizmaları uygulamanız gerekir. Sen yararlanabilecek yerel depolama çevrimdışı kullanım için bu kaynakları kaydedin.

— bummzack
kaynak

2

Düğüm-Webkit oldukça büyük ve eğer eklerseniz "merhaba dünya" JS oyunu için 60MB gibi bir şeyle sonuçlanacaksınız.

— ashes999

1

Uygulamanız uzaktan bile karmaşıksa, doğru cevap budur.

— Vaughan Hilts

1

@ ashes999 Size katılıyorum, ancak 60MB bugünlerde bir masaüstü uygulaması için hala oldukça küçük. Genel amaçlı çerçevelerin çoğu, bazı dosya boyutu ek yükleri oluşturur (Unity'yi önemli bir örnek olarak alın). Artan depolama alanı ile kolaylık dosya boyutunda kazanır;)

— bummzack

2

@bummzack Ben katılmıyorum. Herhangi bir sanat veya ses eklemeden önce ~ 100kb'lik bir JS oyunu almak ve 60MB olduğunu görmek çok üzücü. Umarım birisi daha iyi bir yol bulur. +1 btw

— ashes999

1

Bu cevapta pek çok yararlı bilgi bulunsa da, olası satış cümlesi oldukça yanlıştır. Oyun verilerini JavaScript dosyalarına koyabilirsiniz, modern tarayıcılar en az birkaç MB JavaScript işleyebilmelidir ve resim verilerini bir tuvalden okumaya çalışmadığınız sürece, resim dosyalarını kullanmanın da bir yanlışlığı yoktur. . En son kontrol ettiğimde, tüm modern tarayıcılar file:///protokolün erişmesine izin verir localStorage, bu da tasarruf için çalışır. Çevrimiçi oyun dışında bir HTML oyununda yapılabilecek her şeyi yapmak için ölçeklendirilir.

— aaaaaaaaaaaa

7

Oyunun çevrimdışı çalışmasını sağlamak ve bazı yerel işlevlerin keyfini çıkarmak için Chrome tabanlı bir çözüm için bir Chrome Uygulaması oluşturmayı düşünebilirsiniz .

Bu şekilde daha fazla görünürlük için Chrome Web Mağazası'na dağıtabilir, bazı güçlü API'ların keyfini çıkarabilir ve bağımsız bir uygulama gibi görünmesini sağlayabilirsiniz .

Dezavantajı elbette Chrome gerektirir.

— Xan
kaynak

1

Firefox (ve Firefos OS), aşağıdakine benzer OpenWebApps'e ( developer.mozilla.org/en/Apps/Quickstart/Build/… ) sahiptir: bir uygulama olarak yüklenen web uygulaması kimliği. Her iki çözüm de ortak bir standarda yaklaşmalıdır: html5doctor.com/web-manifest-specification . Ayrıca bakınız: code.google.com/p/chromium/issues/detail?id=366145

— ysdx

@ysdx Bahsettiğiniz yakınsama standardı, Chrome'un "paket uygulama" olarak da adlandırılan gerçek, bağımsız, indirilebilir bir uygulamanın aksine "barındırılan uygulamalar" olarak adlandırdığı şudur. Aynı terminoloji Firefox için de geçerlidir. Ne yazık ki, paketlenmiş uygulamalar mimari olarak çok farklıdır ve yakınsama olasılığı düşüktür.

— Xan

@Xan paketlenmiş uygulama nedir? Firefox ve Chrome uygulama mağazalarında hem 'barındırılan' hem de 'paketlenmiş' uygulamalar mevcut mu?

— Qsigma

1

@Qsigma Paket uygulama, yerel dosya sistemi erişimi gibi güçlü API'lara erişimi olan çoğunlukla bağımsız bir HTML5 uygulamasıdır; "paketlenir", çünkü bir indirme işleminde kendi kaynaklarını içerir. "Barındırılan" bir uygulama temelde bazı meta verilere sahip bir web sitesine bağlantıdır. Bunu bir kısayol ve bir yer imi arasında bir çarpı olarak düşünün. Firefox mağazasından bahsedemiyorum, ancak ilk yorumdaki belgeler paketlenmiş uygulamaların nasıl yazılacağını açıklıyor.

— Xan

Daha fazla kota ve izinle daha fazla indirme yapmadan uygulamanın tıklanması ve çevrimdışı çalıştırılması ile daha fazla kota ve izinle daha fazla indirmeden uygulamanın çalıştırılması ile arasındaki fark nedir? Teknik olarak farklılıkları olsa da, bu farklılıklar yüzeyseldir, kullanıcı için fark yoktur. Düzgün tasarlanmış bir barındırılan uygulamanın paketlenmesi, doğru bildirimlerle oldukça önemsiz olmalıdır. Paketlenmiş uygulamanın dezavantajı, harici bir paket yöneticisi olmadan kendini güncelleyememesi, barındırılan uygulama ile tarayıcının kendisi paket yöneticisidir.

— Lie Ryan

0

Peki, gerçekten ne kadar iş koymak istediğinize bağlı. Geçerli Web API'larını kullanarak şunları yapabilirsiniz:

Bir oluşturma Aşamalı Web Uygulaması (PWA) (Ne yazık ki PWAs sadece cep telefonları ve Chrome OS için, ama ben duydum Masaüstü için Chrome yakında yakında bunun için destek olacaktır. Şimdilik, bu bir bayrak arkasında gizler) eski beri Başvurusu Önbellek artık kullanımdan kaldırıldı
Dönüştürme içine her şey metin ( resim ve ses ). Ve olduğu gibi (kullanarak web sayfasını kaydetmek için kullanıcı teşvik ya Cmd+Sya Ctrl+Starayıcıda) veya PWA olarak sayfayı önbelleğe. Mobil cihazlarda dataURI'lerin çok iyi performans göstermediğini bilin.
Bir Chrome Uygulaması oluşturabilirsiniz , ancak bu Chrome OS'de çalışmayan hiçbir Chrome sürümünde çalışmaz . Bu, bunun yerine uzantı oluşturmanızın daha iyi olduğu anlamına gelir
Çoğu oyun 10 MB'ın altında gelir, bu da oyununuzun tüm verilerini yerel depolama alanında önbelleğe alabileceğinizi söyledi. Bunu nasıl yapacağınız size kalmış: yukarıdakileri yapabilirsiniz (her şeyi metne dönüştürün), Blob api, vb. Kullanın. Bazı cep telefonları tüm oyununuzu bellekten temizleyebileceğinden, bunu kesinlikle tavsiye etmem. Bu, her şeyin yolunda olup olmadığını kontrol etmeniz gerektiği anlamına gelir (kodunuz hala bellekte ise), bu da daha uzun yükleme süreleri anlamına gelir ve aynı zamanda kullanıcı telefonunu kilitleyebilir. Yine de bu yoldan gitmeyi seçerseniz, LocalForage'ı kullanmaktan kesinlikle faydalanacaksınız.
Electron veya NW.js'yi kullanarak , bir masaüstü uygulaması oluşturmak için html, css ve js öğelerinizi kullanabilirsiniz. Mobil uygulamalar oluşturmak için de benzer yöntemler kullanılabilir ( Cordova veya PhoneGap gibi bir Cordova gibi bir şey kullanarak ). Bunu yaparsınız ve isterse kullanıcının tam oyunu indirmesine izin verirsiniz.
Hala bir zipdosyayla devam etmek istiyorsanız , JSZip'i kontrol edin . Ben nasıl kullanabilirsiniz hakkında hiçbir fikrim yok, ama eminim birisi iyi bir fikir (belki dosya zip ve daha sonra ikili veri dönüştürmek dize ve html içine satır içi yerleştirmek) gelip olabilir.
Bu garip saldırı , herhangi bir metin verisini veri bloğu olarak bilinen bir şey olarak yüklemenizi sağlar. Bu, varlıkları bir html dosyasına gömmek için kullanabileceğiniz başka bir araçtır.

— Kitanga Nday
kaynak