Làm cách nào để tôi có thể tải xuống trò chơi JS?

20

Tôi có thể đặt HTML và JavaScript lại với nhau trong cùng một .htmltệp, nhưng hình ảnh cần phải là các tệp riêng biệt. Giải pháp duy nhất nảy ra trong đầu tôi là cung cấp cho người dùng một .zipthư mục.

Điều này không đẹp mặc dù ... Làm thế nào khác tôi có thể làm điều này?

javascript html5 distribution

— Arnaud
nguồn

8

"Tiêu chuẩn" không làm cho các trò chơi JS có thể tải xuống được; họ chỉ làm việc trong một trình duyệt. Có thể có một số cách tối nghĩa để làm điều đó, nhưng thẳng thắn tại sao buộc nó: sử dụng công cụ phù hợp cho công việc.

— jhocking

21

Bạn có thể nhúng hình ảnh vào tài liệu HTML bằng cú pháp dataurl cho phép đặt biểu diễn cơ sở64 của dữ liệu hình ảnh nhị phân làm thuộc tính src của hình ảnh. Điều này cũng hoạt động trên bất kỳ loại tập tin phương tiện khác.

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

Khi bạn sử dụng biểu định kiểu CSS, bạn có thể tạo các quy trình hoàn toàn thủ tục này trong JavaScript.

— Phi-líp
nguồn

tất nhiên, cơ sở64 chiếm nhiều dung lượng hơn, tăng gấp bốn lần kích thước tệp ...

— Tobias Kienzler

10

@TobiasKienzler: 64 * 4 = 256 không có nghĩa là phải mất gấp 4 lần số lượng dữ liệu để mã hóa một byte đơn, nhưng bạn chỉ sử dụng 6 bit (2 ** 6 = 64) trên mỗi 8 byte cho mỗi byte. Điều đó có nghĩa là phải mất 4 byte để mã hóa 3 byte, giúp tăng kích thước 33% (không tính phần đệm khi cần thiết). Khó tăng gấp bốn lần. Trường hợp duy nhất trong đó kích thước dữ liệu tăng gấp bốn lần là khi mã hóa một byte đơn, yêu cầu 2 byte dữ liệu cộng với 2 byte đệm.

— Panda Pyjama

2

@PandaPajama Thật tệ, tôi dự định nói "tăng một phần tư" (do 2/8 = 1/4 bit lãng phí). Mặc dù rõ ràng tôi đã phạm sai lầm ở đó, nhưng 33% bạn nhận được là chính xác. Tuy nhiên, đây là một chi phí quá cao, cũng "nổi tiếng" từ các tệp đính kèm email

— Tobias Kienzler

1

Liệu mã hóa nội tuyến 64 cơ sở đó có hoạt động cho các tài nguyên khác như .wav, .ogg, .m4a và nói chung bất kỳ tệp nào không?

— DrZ214

1

@ DrZ214 Tôi chưa thử, nhưng AFAIK nó sẽ hoạt động ở bất cứ nơi nào có URL hoạt động.

— Philipp

31

Chỉ cần đặt tất cả các tệp vào một tệp .zip không phải là giải pháp khả thi vì hầu hết các ứng dụng web đều cần máy chủ web để chúng có thể truy cập tài nguyên thông qua các yêu cầu HTTP. Trên một số hệ thống, bạn có thể truy cập các tệp qua file://lược đồ URI , nhưng điều đó không được đảm bảo để hoạt động ở mọi nơi vì lý do bảo mật và sẽ thất bại đối với những thứ như yêu cầu AJAX.

Nó có thể hoạt động cho một ứng dụng rất đơn giản, nơi bạn có hầu hết các tài nguyên nội tuyến nhưng đây thực sự không phải là cách tiếp cận mà tôi muốn giới thiệu cho bất kỳ ai. Có những lựa chọn thay thế, chẳng hạn như:

Xây dựng một ứng dụng gốc

Bạn có thể đóng gói ứng dụng web của mình dưới dạng một ứng dụng gốc bằng Node-Webkit . Bạn thậm chí có thể sử dụng điều này để thêm các tính năng gốc của máy tính để bàn (như trò chơi lưu cục bộ) vào trò chơi của bạn.

Tuy nhiên, đây không phải là cách tiếp cận " gói và hoàn thành " .. bạn có thể phải viết lại các phần của ứng dụng và viết các trình tải khác nhau (ví dụ: với ứng dụng trên máy tính để bàn, bạn sẽ tải các tệp qua hệ thống tệp, trong khi bạn sử dụng HTTP -Requests trong một trình duyệt / trò chơi trực tuyến).

Sử dụng các tính năng HTML5 để cho phép truy cập ngoại tuyến ứng dụng của bạn

Nếu mục tiêu chính của bạn là cho phép người chơi chơi trò chơi ngoại tuyến, thì bạn cũng có thể sử dụng bộ đệm ứng dụng để cho phép truy cập ngoại tuyến ứng dụng của mình. Đây là một tính năng hoạt động trong hầu hết các trình duyệt hiện đại . Lợi ích bổ sung là người dùng không phải tải xuống bất cứ thứ gì và chỉ có thể sử dụng dấu trang để chơi trò chơi của bạn ngay cả khi ngoại tuyến.

Đối với các tài nguyên đang được tải không đồng bộ (AJAX), bạn cũng sẽ phải thực hiện các cơ chế tải riêng biệt. Bạn có thể sử dụng bộ nhớ cục bộ để lưu các tài nguyên này để sử dụng ngoại tuyến.

— bummzack
nguồn

2

Node-Webkit khá lớn và bạn sẽ kết thúc với thứ gì đó như 60MB cho trò chơi JS "hello world" nếu bạn đưa nó vào.

— tro999

1

Đây là câu trả lời đúng nếu ứng dụng của bạn thậm chí còn phức tạp từ xa.

— Vaughan Hilts

1

@ as999999 Tôi đồng ý với bạn, nhưng 60MB vẫn còn khá nhỏ đối với một ứng dụng máy tính để bàn hiện nay. Rất nhiều khung công tác chung tạo ra một số chi phí kích thước tệp (lấy Unity làm ví dụ nổi bật). Với dung lượng lưu trữ ngày càng tăng, sự tiện lợi sẽ thắng trên kích thước tệp;)

— bummzack

2

@bummzack Tôi không đồng ý. Thật là chán nản khi chơi một trò chơi JS ~ 100kb và thấy nó trở thành 60 MB, trước khi bạn thêm bất kỳ nghệ thuật hoặc âm thanh nào. Hy vọng ai đó sẽ đưa ra một cách tốt hơn. +1 btw

— tro999

1

Mặc dù có rất nhiều thông tin hữu ích trong câu trả lời này, nhưng câu dẫn lại hoàn toàn sai. Bạn có thể đặt dữ liệu trò chơi vào các tệp JavaScript, các trình duyệt hiện đại sẽ có thể xử lý ít nhất một vài MB JavaScript và miễn là bạn không cố đọc dữ liệu hình ảnh từ khung vẽ, không có gì sai khi sử dụng tệp hình ảnh . Lần trước tôi đã kiểm tra, tất cả các trình duyệt hiện đại cho phép file:///giao thức truy cập localStorage, hoạt động để lưu. Nó sẽ mở rộng quy mô để làm bất cứ điều gì người ta có thể làm trong trò chơi HTML, ngoại trừ chơi trực tuyến.

— aaaaaaaaaaaa

7

Để có giải pháp dựa trên Chrome để giúp trò chơi chạy ngoại tuyến và tận hưởng một số chức năng gốc, bạn có thể xem xét việc tạo Ứng dụng Chrome .

Bằng cách này, bạn có thể phân phối nó trong Cửa hàng Chrome trực tuyến để tăng khả năng hiển thị, bạn có thể thưởng thức một số API mạnh mẽ và làm cho nó trông giống như một ứng dụng độc lập .

Nhược điểm là, tất nhiên, yêu cầu Chrome.

— Xiên
nguồn

1

Firefox (và Firefos OS) có OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/ trộm ) tương tự như thế này: id ứng dụng web được tải xuống dưới dạng ứng dụng. Cả hai giải pháp nên hội tụ theo một tiêu chuẩn chung: html5doctor.com/web-manifest-specification . Cũng xem: code.google.com/p/chromium/issues/detail?id=366145

— ysdx

@ysdx Tiêu chuẩn hội tụ mà bạn đề cập là dành cho những gì Chrome gọi là "ứng dụng được lưu trữ", trái ngược với một ứng dụng có thể tải xuống, khép kín thực sự, còn được gọi là "ứng dụng đóng gói". Thuật ngữ tương tự áp dụng cho Firefox. Thật không may, các ứng dụng đóng gói về mặt kiến trúc rất khác nhau và không có khả năng hội tụ.

— Xan

@Xan một ứng dụng đóng gói là gì? Cả hai ứng dụng 'được lưu trữ' và 'được đóng gói' đều có sẵn trong các cửa hàng ứng dụng Firefox và Chrome?

— Qsigma

1

@Qsigma Một ứng dụng đóng gói là một ứng dụng HTML5 độc lập với quyền truy cập vào các API mạnh mẽ như truy cập hệ thống tệp cục bộ; nó "được đóng gói" bởi vì nó chứa tài nguyên của chính nó trong một bản tải xuống. Ứng dụng "được lưu trữ" về cơ bản là một liên kết đến một trang web với một số siêu dữ liệu. Hãy nghĩ về nó như một sự giao thoa giữa một phím tắt và một dấu trang. Tôi không thể nói về cửa hàng Firefox, nhưng tài liệu từ bình luận đầu tiên mô tả cách viết các ứng dụng đóng gói.

— Xan

Sự khác biệt giữa nhấp và để ứng dụng chạy ngoại tuyến mà không cần tải xuống thêm với nhiều hạn ngạch và quyền hơn và nhấp và để ứng dụng chạy mà không cần tải xuống thêm với nhiều hạn ngạch và quyền hơn? Mặc dù về mặt kỹ thuật, chúng có những khác biệt, nhưng những khác biệt đó là bề ngoài, với người dùng thì không có sự khác biệt. Đóng gói một ứng dụng được lưu trữ được thiết kế đúng sẽ khá tầm thường với các biểu hiện đúng. Nhược điểm với ứng dụng đóng gói là nó không thể tự cập nhật mà không có trình quản lý gói bên ngoài, với ứng dụng được lưu trữ, chính trình duyệt là trình quản lý gói.

— Lie Ryan

0

Vâng, nó phụ thuộc vào bao nhiêu công việc bạn thực sự muốn đưa vào nó. Sử dụng bộ API Web hiện tại bạn có thể:

Tạo một ứng dụng web tiến bộ (PWA) (Đáng buồn là PWAs chỉ dành cho điện thoại di động và Chrome OS, nhưng tôi đã nghe nói rằng Chrome dành cho máy tính để bàn sẽ sớm hỗ trợ cho nó. Hiện tại, nó ẩn sau một lá cờ) kể từ Ứng dụng cũ Bộ nhớ cache hiện không dùng nữa
Chuyển đổi mọi thứ thành văn bản ( hình ảnh và âm thanh ). Và khuyến khích người dùng lưu trang web như hiện tại (sử dụng Cmd+ShoặcCtrl+S trong trình duyệt) hoặc lưu trữ trang dưới dạng PWA. Chỉ cần biết rằng, trên thiết bị di động, dataURI không hoạt động tốt.
Bạn có thể tạo Ứng dụng Chrome , nhưng ứng dụng này không hoạt động trên bất kỳ phiên bản Chrome nào không chạy trên Chrome OS . Điều này có nghĩa là tốt hơn cho bạn để tạo một tiện ích mở rộng thay thế
Hầu hết các trò chơi có dung lượng dưới 10 MB, cho biết bạn có thể lưu trữ tất cả dữ liệu của trò chơi vào bộ nhớ cục bộ. Cách bạn làm điều này tùy thuộc vào bạn: bạn có thể thực hiện các thao tác trên (chuyển đổi mọi thứ thành văn bản), sử dụng Blob api, v.v. Mặc dù tôi rất không khuyến khích điều này, vì một số điện thoại di động có thể xóa toàn bộ trò chơi của bạn khỏi bộ nhớ. Điều đó có nghĩa là bạn phải kiểm tra xem mọi thứ có ổn không (nếu mã của bạn vẫn còn trong bộ nhớ), điều đó có nghĩa là thời gian tải lâu hơn và cũng có thể làm sập điện thoại của người dùng. Nếu bạn chọn đi xuống con đường này, chắc chắn bạn sẽ được hưởng lợi từ việc sử dụng LocalF Storage
Sử dụng Electron hoặc NW.js , bạn có thể sử dụng html, css và js của mình để tạo ứng dụng trên máy tính để bàn. Các phương pháp tương tự cũng có thể được sử dụng để tạo các ứng dụng di động (sử dụng một cái gì đó như Cordova hoặc Cordova phụ thuộc như PhoneGap ). Bạn sẽ làm điều này và cho phép người dùng tải xuống toàn bộ trò chơi nếu họ muốn.
Nếu bạn vẫn muốn tiếp tục với một ziptệp, hãy kiểm tra JSZip . Tôi không biết làm thế nào bạn có thể sử dụng nó, nhưng tôi chắc chắn rằng ai đó có thể đưa ra một ý tưởng hay (có thể nén tệp của bạn và sau đó chuyển đổi dữ liệu nhị phân thành chuỗi và đặt nội tuyến vào html).
Vụ hack kỳ lạ này cho phép bạn tải bất kỳ dữ liệu văn bản nào dưới dạng một khối dữ liệu. Đây chỉ là một công cụ khác mà bạn có thể sử dụng để nhúng tài sản vào tệp html.

— Ngày Kitanga
nguồn