ฉันจะทำให้เกม JS ดาวน์โหลดได้อย่างไร

20

ฉันสามารถรวม HTML และ JavaScript ไว้ด้วยกันใน.htmlไฟล์เดียวกันแต่ภาพต้องเป็นไฟล์แยกต่างหาก ทางออกเดียวที่อยู่ในใจของฉันคือการมอบ.zipโฟลเดอร์ให้กับผู้ใช้

นี่มันไม่สวยเลย ... ฉันจะทำยังไงดีล่ะ?

javascript html5 distribution

— Arnaud
แหล่งที่มา

8

"มาตรฐาน" ไม่ให้ดาวน์โหลดเกม JS; พวกเขาทำงานในเบราว์เซอร์เท่านั้น อาจมีบางวิธีที่คลุมเครือที่จะทำ แต่ตรงไปตรงมาว่าทำไมบังคับ: ใช้เครื่องมือที่เหมาะสมสำหรับงาน

— jhocking

21

คุณสามารถฝังรูปภาพในเอกสาร HTML โดยใช้ dataurl-syntax ซึ่งอนุญาตให้ใส่ base64 ที่เป็นตัวแทนของข้อมูลภาพไบนารีเป็นแอตทริบิวต์ src-image ของรูปภาพ ยังสามารถใช้งานกับไฟล์สื่อชนิดอื่นได้

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

เมื่อคุณใช้สไตล์ชีท CSS คุณสามารถสร้างโพรซีเดอร์อย่างสมบูรณ์เหล่านี้ใน JavaScript

— ฟิลิปป์
แหล่งที่มา

แน่นอน base64 ใช้พื้นที่มากขึ้นขยายขนาดไฟล์เป็นสี่เท่า ...

— Tobias Kienzler

10

@TobiasKienzler: 64 * 4 = 256 ไม่ได้หมายความว่าจะต้องใช้ข้อมูลจำนวนมากถึง 4 เท่าในการเข้ารหัสไบต์เดียว แต่คุณใช้เพียง 6 บิต (2 ** 6 = 64) จากทุก ๆ 8 ในแต่ละไบต์ นั่นหมายความว่าจะใช้เวลา 4 ไบต์ในการเข้ารหัส 3 ไบต์ซึ่งเพิ่มขนาด 33% (ไม่นับการขยายเมื่อจำเป็น) สี่เท่าแทบจะไม่ กรณีเดียวที่ขนาดข้อมูลเป็นสี่เท่าคือเมื่อเข้ารหัสไบต์เดียวซึ่งต้องใช้ข้อมูล 2 ไบต์และเพิ่มอีก 2 ไบต์

— ชุดนอนแพนด้า

2

@PandaPajama ฉันไม่ดีฉันตั้งใจจะพูดว่า "เพิ่มขึ้นหนึ่งในสี่" (เนื่องจาก 2/8 = 1/4 บิตที่สูญเปล่า) แม้ว่าเห็นได้ชัดว่าฉันทำผิดพลาดอยู่แล้ว 33% ที่คุณได้รับนั้นถูกต้อง ยังเป็นค่าใช้จ่ายที่ "มีชื่อเสียง" จากไฟล์แนบอีเมล

— Tobias Kienzler

1

การเข้ารหัสแบบอินไลน์ 64 ตัวนั้นจะทำงานสำหรับทรัพยากรอื่น ๆ เช่น. wav, .ogg, .m4a และโดยทั่วไปไฟล์ใด ๆ

— DrZ214

1

@ DrZ214 ฉันยังไม่ได้ลอง แต่ AFAIK ควรทำงานได้ทุกที่ที่ URL ทำงาน

— ฟิลิปป์

31

เพียงแค่วางไฟล์ทั้งหมดลงในไฟล์. zip ไม่ใช่โซลูชันที่ทำงานได้เพราะเว็บแอปพลิเคชันส่วนใหญ่ต้องการเว็บเซิร์ฟเวอร์เพื่อให้พวกเขาสามารถเข้าถึงทรัพยากรผ่านทางคำขอ HTTP ในบางระบบคุณสามารถเข้าถึงไฟล์ผ่านfile://URI-schemeแต่นั่นไม่รับประกันว่าจะทำงานได้ทุกที่เพราะเหตุผลด้านความปลอดภัยและจะล้มเหลวสำหรับสิ่งต่าง ๆ เช่นคำขอ AJAX

มันอาจใช้งานได้กับแอพที่ง่ายมาก ๆ ที่คุณมีทรัพยากรส่วนใหญ่อยู่ในบรรทัด แต่นี่ไม่ใช่วิธีที่ฉันแนะนำให้ใคร มีทางเลือกแม้ว่าเช่น:

สร้างแอปพลิเคชันแบบเนทีฟ

คุณสามารถจัดแพคเกจเว็บแอพลิเคชันของคุณเป็นแอปที่ใช้Node-Webkit คุณสามารถใช้สิ่งนี้เพื่อเพิ่มคุณสมบัติเดสก์ท็อปดั้งเดิม (เช่นบันทึกเกมในเครื่อง) ลงในเกมของคุณ

นี่ไม่ใช่วิธีการ " แพ็คเกจและเสร็จสิ้น " แม้ว่าคุณอาจต้องเขียนบางส่วนของแอปพลิเคชันของคุณใหม่และเขียนตัวโหลดอื่น (เช่นด้วยแอปเดสก์ท็อปคุณจะโหลดไฟล์ผ่านระบบไฟล์ในขณะที่ใช้ HTTP) - การร้องขอในเบราว์เซอร์ / เกมออนไลน์)

ใช้คุณสมบัติ HTML5 เพื่ออนุญาตการเข้าถึงแอปของคุณแบบออฟไลน์

หากเป้าหมายหลักของคุณคืออนุญาตให้ผู้เล่นเล่นเกมของคุณแบบออฟไลน์คุณสามารถใช้แอปพลิเคชันแคชเพื่ออนุญาตการเข้าถึงแอปของคุณแบบออฟไลน์ นี้เป็นคุณลักษณะที่ทำงานในเบราว์เซอร์ที่ทันสมัยที่สุด ประโยชน์เพิ่มเติมคือผู้ใช้ไม่ต้องดาวน์โหลดอะไรและสามารถใช้ที่คั่นหน้าเพื่อเล่นเกมของคุณได้แม้ในขณะออฟไลน์

สำหรับทรัพยากรที่กำลังโหลดแบบอะซิงโครนัส (AJAX) คุณจะต้องใช้กลไกการโหลดแยกต่างหาก คุณสามารถใช้การจัดเก็บในตัวเครื่องเพื่อบันทึกทรัพยากรเหล่านี้เพื่อการใช้งานออฟไลน์

— bummzack
แหล่งที่มา

2

Node-Webkit มีขนาดค่อนข้างใหญ่และคุณจะพบกับเกมขนาด 60MB สำหรับเกม JS "สวัสดีโลก" หากคุณรวมมันไว้

— ashes999

1

นี่คือคำตอบที่ถูกต้องหากใบสมัครของคุณซับซ้อนแม้ในระยะไกล

— Vaughan Hilts

1

@ ashes999 ฉันเห็นด้วยกับคุณ แต่ 60MB ยังค่อนข้างเล็กสำหรับแอปเดสก์ท็อปในปัจจุบัน กรอบงานทั่วไปจำนวนมากสร้างค่าใช้จ่ายขนาดไฟล์บางส่วน (นำ Unity เป็นตัวอย่างที่โดดเด่น) ด้วยพื้นที่จัดเก็บที่เพิ่มขึ้นความสะดวกสบายเหนือกว่าขนาดไฟล์;)

— bummzack

2

@ bummzack ฉันไม่เห็นด้วย มันน่าหดหู่ที่จะใช้เกม ~ 100kb JS และดูว่ามันกลายเป็น 60MB ก่อนที่คุณจะเพิ่มงานศิลปะหรือเสียง หวังว่าบางคนจะเกิดขึ้นด้วยวิธีที่ดีกว่า +1 btw

— ashes999

1

ในขณะที่มีข้อมูลที่มีประโยชน์มากมายในคำตอบนี้ประโยคนำไม่ชัดเจน คุณสามารถใส่ข้อมูลเกมในไฟล์ JavaScript เบราว์เซอร์สมัยใหม่ควรสามารถจัดการ JavaScript อย่างน้อยสองสาม MB และตราบใดที่คุณไม่พยายามอ่านข้อมูลภาพจากแคนวาสก็ไม่มีอะไรผิดปกติกับการใช้ไฟล์รูปภาพ . ครั้งล่าสุดที่ฉันตรวจสอบเบราว์เซอร์ที่ทันสมัยทั้งหมดอนุญาตให้file:///โปรโตคอลเข้าถึงlocalStorageซึ่งใช้งานได้สำหรับการบันทึก มันจะขยายขนาดเพื่อทำสิ่งใดสิ่งหนึ่งที่สามารถทำได้ในเกม HTML ยกเว้นการเล่นออนไลน์

— aaaaaaaaaaaa

7

สำหรับโซลูชันที่ทำงานบน Chrome เพื่อให้เกมทำงานแบบออฟไลน์และเพลิดเพลินกับฟังก์ชั่นพื้นฐานบางอย่างคุณสามารถสร้างChrome Appได้

วิธีนี้คุณสามารถแจกจ่ายได้ใน Chrome เว็บสโตร์สำหรับการมองเห็นเพิ่มคุณสามารถเพลิดเพลินไปกับบางAPIs ที่มีประสิทธิภาพและทำให้มันมีลักษณะเหมือนเป็น app

แน่นอนว่าข้อเสียคือต้องใช้ Chrome

— Xan
แหล่งที่มา

1

Firefox (และ Firefos OS) มี OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/ ...... ) ซึ่งคล้ายกับสิ่งนี้: รหัสแอปพลิเคชันเว็บที่ดาวน์โหลดมาติดตั้งเป็นแอปพลิเคชัน การแก้ปัญหาทั้งสองควรมาบรรจบกันเพื่อมาตรฐานทั่วไป: html5doctor.com/web-manifest-specification ดูเช่นกัน: code.google.com/p/chromium/issues/detail?id=366145

— ysdx

@ysdx มาตรฐานการบรรจบที่คุณพูดถึงคือสิ่งที่ Chrome เรียกว่า "แอปที่โฮสต์" ซึ่งตรงข้ามกับแอปที่ดาวน์โหลดได้ในตัวที่แท้จริงหรือที่เรียกว่า "แอปที่จัดแพคเกจ" คำศัพท์เดียวกันนี้ใช้กับ Firefox น่าเสียดายที่แอพแพคเกจมีความแตกต่างทางสถาปัตยกรรมอย่างมากและไม่น่าจะมาบรรจบกัน

— Xan

@Xan แอพที่รวมอยู่ในแพ็คเกจคืออะไร? แอป 'โฮสต์' และ 'แพ็คเกจ' มีให้บริการในแอป Firefox และ Chrome หรือไม่

— Qsigma

1

@Qsigma แอพแพคเกจเป็นแอพ HTML5 ที่มีในตัวเองเป็นส่วนใหญ่พร้อมการเข้าถึง API ที่ทรงพลังเช่นการเข้าถึงระบบไฟล์ในเครื่อง มันเป็น "แพคเกจ" เพราะมันมีทรัพยากรของตัวเองในการดาวน์โหลด แอป "โฮสต์" นั้นเป็นลิงก์ไปยังเว็บไซต์ที่มีข้อมูลเมตาบางส่วน คิดว่ามันเป็นจุดตัดระหว่างทางลัดและคั่นหน้า ฉันไม่สามารถบอกได้เกี่ยวกับร้านค้า Firefox แต่เอกสารจากความคิดเห็นแรกอธิบายถึงวิธีการเขียนแอพพลิเคชั่นแบบแพคเกจ

— Xan

อะไรคือความแตกต่างระหว่างการคลิกและให้แอปทำงานแบบออฟไลน์โดยไม่ต้องดาวน์โหลดเพิ่มเติมด้วยโควต้าและการอนุญาตเพิ่มเติมและการคลิกและให้แอปทำงานโดยไม่ต้องดาวน์โหลดเพิ่มเติมด้วยโควต้าและการอนุญาตเพิ่มเติม ในขณะที่พวกเขามีความแตกต่างทางเทคนิคความแตกต่างเหล่านั้นเป็นเพียงผิวเผินสำหรับผู้ใช้ไม่มีความแตกต่าง การบรรจุแอปที่โฮสต์ไว้ที่ออกแบบมาอย่างถูกต้องน่าจะเป็นเรื่องที่ไม่น่าสนใจ ข้อเสียของแอพแพคเกจคือไม่สามารถอัปเดตตัวเองได้หากไม่มีแพ็คเกจผู้จัดการภายนอกด้วยแอพที่โฮสต์เพราะเบราว์เซอร์นั้นเป็นผู้จัดการแพ็คเกจ

— Lie Ryan

0

มันขึ้นอยู่กับว่าคุณต้องการใส่มันลงไปมากแค่ไหน การใช้ชุด API เว็บปัจจุบันคุณสามารถ:

สร้างProgressive Web App (PWA) (น่าเศร้า PWAs สำหรับโทรศัพท์มือถือและ Chrome OS เท่านั้น แต่ฉันได้ยินมาว่าChrome สำหรับเดสก์ท็อปจะรองรับเร็ว ๆ นี้ในไม่ช้าสำหรับตอนนี้มันซ่อนอยู่หลังธง) ตั้งแต่แอปพลิเคชันเก่าแคชเลิกใช้แล้ว
แปลงทุกอย่างเป็นข้อความ ( รูปภาพและเสียง ) และสนับสนุนให้ผู้ใช้บันทึกเว็บเพจตามที่เป็นอยู่ (ใช้Cmd+SหรือCtrl+Sในเบราว์เซอร์) หรือแคชเพจเป็น PWA เพิ่งรู้ว่าบนมือถือ dataURIs ทำงานได้ไม่ดีนัก
คุณสามารถสร้างแอป Chromeแต่ที่จะไม่ทำงานกับรุ่นใด ๆ ของ Chrome ที่ไม่ได้ทำงานบน Chrome OS ซึ่งหมายความว่าเป็นการดีกว่าสำหรับคุณที่จะสร้างส่วนขยายแทน
เกมส่วนใหญ่มีขนาดต่ำกว่า 10 MB โดยที่คุณสามารถแคชข้อมูลเกมทั้งหมดลงในที่จัดเก็บในตัวเครื่อง วิธีที่คุณทำมันขึ้นอยู่กับคุณ: คุณสามารถทำสิ่งต่าง ๆ ได้ (แปลงทุกอย่างเป็นข้อความ) ใช้ Blob api ฯลฯ แม้ว่าฉันจะไม่เห็นด้วยอย่างยิ่งเนื่องจากโทรศัพท์มือถือบางรุ่นสามารถล้างเกมทั้งหมดของคุณจากหน่วยความจำ ซึ่งหมายความว่าคุณต้องตรวจสอบว่าทุกอย่างเรียบร้อย (หากรหัสของคุณยังอยู่ในหน่วยความจำ) ซึ่งหมายถึงเวลาในการโหลดนานขึ้นและอาจทำให้โทรศัพท์ของผู้ใช้ขัดข้อง หากคุณเลือกที่จะใช้เส้นทางนี้คุณจะได้รับประโยชน์จากการใช้LocalForage
เมื่อใช้ElectronหรือNW.jsคุณสามารถใช้ html, css และ js เพื่อสร้างแอปเดสก์ท็อป สามารถใช้วิธีการที่คล้ายกันในการสร้างแอปมือถือได้เช่นกัน (ใช้บางอย่างเช่นCordovaหรือ Cordova ที่ขึ้นกับPhoneGap ) คุณทำเช่นนี้และอนุญาตให้ผู้ใช้ดาวน์โหลดเกมเต็มหากพวกเขาต้องการ
ถ้าคุณยังต้องการที่จะดำเนินการกับzipไฟล์ชำระเงินJSZip ฉันไม่รู้ว่าคุณจะใช้งานได้อย่างไร แต่ฉันแน่ใจว่ามีบางคนคิดว่าเป็นความคิดที่ดี (อาจบีบไฟล์ของคุณแล้วแปลงข้อมูลไบนารี่เป็นสตริงและวางไว้ใน html)
การแฮ็กแปลก ๆ นี้ช่วยให้คุณสามารถโหลดข้อมูลที่เป็นข้อความซึ่งเป็นที่รู้จักกันในชื่อว่าบล็อคข้อมูล นี่เป็นอีกเครื่องมือหนึ่งที่คุณสามารถใช้เพื่อฝังเนื้อหาลงในไฟล์ html

— Kitanga Nday
แหล่งที่มา