JS 게임을 다운로드 가능하게하려면 어떻게합니까?

20

HTML과 JavaScript를 같은 .html파일 에 넣을 수는 있지만 이미지는 별도의 파일이어야합니다. 내 마음에 오는 유일한 해결책은 사용자에게 .zip폴더 를 제공하는 것 입니다.

이건 예쁘지 않아요 ... 어떻게하면 되나요?

javascript html5 distribution

— 아르노
소스

8

"표준" 은 JS 게임을 다운로드 가능하게 만드는 것이 아닙니다 . 그들은 브라우저에서만 작동합니다. 그것을하는 모호한 방법이있을 수 있지만, 솔직히 그 이유는 무엇입니까? 직무에 적합한 도구를 사용하십시오.

— jhocking

21

dataurl-syntax를 사용하여 HTML 문서에 이미지를 포함 할 수 있습니다.이 이미지를 사용하면 이진 이미지 데이터의 base64 표현을 이미지의 src 속성으로 넣을 수 있습니다. 다른 종류의 미디어 파일에서도 작동합니다.

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

CSS 스타일 시트를 사용하면 JavaScript에서 완전히 절차적인 스타일 시트를 작성할 수 있습니다.

— 필립
소스

물론 base64는 파일 크기를 4 배로

— 늘려서

10

@TobiasKienzler : 64 * 4 = 256은 단일 바이트를 인코딩하는 데 4 배 많은 데이터가 필요하다는 것을 의미하지는 않지만 각 바이트의 8 개마다 6 비트 (2 ** 6 = 64) 만 사용합니다. 즉, 3 바이트를 인코딩하는 데 4 바이트가 걸리므로 크기가 33 % 증가합니다 (필요한 경우에는 패딩을 계산하지 않음). 거의 4 배가되지 않습니다. 데이터 크기가 4 배로 증가하는 유일한 경우는 2 바이트의 데이터 바이트와 2 개의 패딩 바이트가 필요한 단일 바이트를 인코딩 할 때입니다.

— Panda Pajama

2

@PandaPajama 나의 나쁜, 나는 "2/4 = 1/4 낭비 비트로 인해"1/4로 증가 시키려고했다. 어쨌든 내가 실수를 했음에도 불구하고 당신이 얻은 33 %가 맞습니다. 아직도, 그것은 이메일 첨부 파일에서 "유명한"오버 헤드입니다

— Tobias Kienzler

1

기본 64 인라인 인코딩이 .wav, .ogg, .m4a 및 일반적으로 모든 파일과 같은 다른 리소스에서 작동합니까?

— DrZ214

1

@ DrZ214 시도하지 않았지만 AFAIK는 URL이 작동하는 곳 어디에서나 작동해야합니다.

— Philipp

31

대부분의 웹 응용 프로그램은 HTTP 요청을 통해 리소스에 액세스 할 수 있도록 웹 서버가 필요하기 때문에 모든 파일을 .zip 파일에 넣는 것만으로는 효과적인 솔루션이 아닙니다. 일부 시스템에서는 file://URI-scheme을 통해 파일에 액세스 할 수 있지만 보안상의 이유로 모든 곳에서 작동한다고 보장 할 수 없으며 AJAX 요청과 같은 경우에는 실패합니다.

대부분의 인라인 리소스가있는 매우 간단한 앱에서 작동 할 수 있지만 이것은 내가 누군가에게 권장하는 접근법이 아닙니다. 그러나 다음과 같은 대안이 있습니다.

기본 애플리케이션 구축

Node-Webkit을 사용하여 웹 애플리케이션을 기본 앱으로 패키지 할 수 있습니다 . 이 기능을 사용하여 게임에 기본 데스크탑 기능 (예 : 로컬 저장 게임)을 추가 할 수도 있습니다.

이것은 " 패키지 및 완료 "접근 방식이 아닙니다. 응용 프로그램의 일부를 다시 작성하고 다른 로더를 작성해야합니다 (예 : 데스크톱 응용 프로그램을 사용하면 파일 시스템을 통해 파일을로드하는 대신 HTTP를 사용함) -브라우저 / 온라인 게임에서 요청).

HTML5 기능을 사용하여 앱의 오프라인 액세스를 허용

기본 목표는 플레이어가 게임을 오프라인에서 플레이하도록 허용하는 경우 응용 프로그램 캐시 를 사용하여 앱의 오프라인 액세스를 허용 할 수도 있습니다 . 이것은 대부분의 최신 브라우저 에서 작동하는 기능입니다 . 추가 이점은 사용자가 아무것도 다운로드 할 필요가 없으며 오프라인 일 때도 북마크를 사용하여 게임을 할 수 있다는 것입니다.

비동기 적으로로드되는 리소스 (AJAX)의 경우 별도의로드 메커니즘을 구현해야합니다. 당신의 사용을 만들 수있는 로컬 스토리지를 오프라인으로 사용하기 위해 이러한 자원을 절약 할 수 있습니다.

— 범작
소스

2

Node-Webkit은 꽤 커서 "hello world"JS 게임을 포함하면 60MB 정도가됩니다.

— ashes999

1

응용 프로그램이 원격으로 복잡한 경우에도 정답입니다.

— Vaughan Hilts

1

@ ashes999 동의하지만 요즘 데스크톱 앱의 경우 60MB는 여전히 작습니다. 많은 범용 프레임 워크가 파일 크기 오버 헤드를 생성합니다 (유니티를 두드러진 예로 사용하십시오). 계속 증가하는 저장 공간, 편리한 파일 크기 승)

— bummzack

2

@bummzack 동의하지 않습니다. 아트 나 오디오를 추가하기 전에 ~ 100kb JS 게임을하고 60MB가되는 것을보고 우울합니다. 바라건대 누군가가 더 나은 방법을 제시 할 것입니다. +1 btw

— ashes999

1

이 답변에는 유용한 정보가 많이 있지만, 선고는 분명하지 않습니다. 게임 데이터를 JavaScript 파일에 넣을 수 있으며 최신 브라우저는 최소 몇 MB의 JavaScript를 처리 할 수 있어야하며 캔버스에서 이미지 데이터를 읽으려고하지 않는 한 이미지 파일을 사용하는 데 아무런 문제가 없습니다. . 내가 마지막으로 확인했을 때, 모든 최신 브라우저는 file:///프로토콜 액세스를 허용하여 localStorage저장에 효과적입니다. 온라인 게임을 제외하고 HTML 게임에서 할 수있는 모든 것을 확장 할 수 있습니다.

— aaaaaaaaaaaa

7

Chrome 기반 솔루션으로 게임을 오프라인에서 실행하고 일부 기본 기능을 즐기려면 Chrome 앱 만들기를 고려할 수 있습니다 .

이런 식으로, 당신은 당신이 어떤 즐길 수있는, 추가 가시성 크롬 웹 스토어에 배포 할 수 있습니다 강력한 API를 , 그리고 그것을 만들어 더 많은 독립 실행 형 응용 프로그램처럼 .

단점은 물론 Chrome이 필요하다는 것입니다.

— 샨
소스

1

Firefox (및 Firefos OS)에는 OpenWebApps ( developer.mozilla.org/en/Apps/Quickstart/Build/… )가 있으며 이는 응용 프로그램으로 설치되어 다운로드 한 웹 응용 프로그램 ID입니다. 두 솔루션 모두 공통 표준 인 html5doctor.com/web-manifest-specification으로 수렴해야합니다 . code.google.com/p/chromium/issues/detail?id=366145

— ysdx

@ysdx 언급 한 수렴 표준은 '패키지 앱'이라고도하는 자체 포함 된 다운로드 가능한 앱과 달리 Chrome에서 '호스팅 된 앱'이라고하는 것입니다. Firefox에도 동일한 용어가 적용됩니다. 불행히도 패키지 된 앱은 구조적으로 매우 다르며 수렴 할 가능성이 없습니다.

— 샨

@Xan 패키지 앱이란 무엇입니까? Firefox 및 Chrome 앱 스토어에서 '호스트'및 '패키지'앱을 모두 사용할 수 있습니까?

— Qsigma

1

@Qsigma 패키지 앱은 로컬 파일 시스템 액세스와 같은 강력한 API에 액세스 할 수있는 대부분 독립적 인 HTML5 앱입니다. 다운로드에 자체 리소스가 포함되어 있기 때문에 "패키지"되어 있습니다. "호스팅 된"앱은 기본적으로 일부 메타 데이터가있는 웹 사이트에 대한 링크입니다. 바로 가기와 책갈피 사이의 십자가라고 생각하십시오. Firefox 저장소에 대해서는 말할 수 없지만 첫 번째 의견의 문서에는 패키지 앱을 작성하는 방법이 설명되어 있습니다.

— Xan

더 많은 할당량 및 권한으로 추가 다운로드없이 앱을 클릭하여 오프라인으로 실행하고 더 많은 할당량 및 권한으로 추가 다운로드없이 앱을 클릭하여 실행하는 것의 차이점은 무엇입니까? 기술적으로는 차이가 있지만 그 차이는 피상적이며 사용자에게는 차이가 없습니다. 올바르게 디자인 된 호스팅 된 앱을 패키징하는 것은 올바른 매니페스트를 사용하는 것이 쉽지 않습니다. 패키지 된 앱의 단점은 외부 패키지 관리자 없이는 자체 업데이트 할 수 없으며 호스팅 된 앱에서는 브라우저 자체가 패키지 관리자라는 것입니다.

— 리 라이언

0

글쎄, 그것은 당신이 정말로 얼마나 많은 일을 넣고 싶어하는지에 달려 있습니다. 현재 웹 API 세트를 사용하여 다음을 수행 할 수 있습니다.

PWA ( 프로그레시브 웹 앱) 만들기 (대개 PWA 는 휴대 전화 및 Chrome OS 전용이지만 데스크톱 용 Chrome에서 곧 지원할 예정 이라고 들었습니다 . 현재는 이전 애플리케이션 이후 플래그 뒤에 숨겨져 있습니다) 캐시는 더 이상 사용되지 않습니다
변하게 하다모든 것을 텍스트 ( 이미지 및 오디오 ) 로 . 또한 사용자가 웹 페이지를 그대로 (사용 중이 Cmd+S거나 Ctrl+S브라우저에) 저장하거나 페이지를 PWA로 캐시 하도록 권장합니다 . 모바일에서는 dataURI가 잘 수행되지 않는다는 것을 알고 있습니다.
Chrome 앱을 만들 수 있지만 Chrome OS에서 실행되지 않는 Chrome 버전에서는 작동하지 않습니다 . 즉, 대신 확장 프로그램 을 만드는 것이 좋습니다
대부분의 게임은 10MB 미만이며 모든 게임 데이터를 로컬 저장소에 캐시 할 수 있다고합니다. 당신이하는 방법은 당신에게 달려 있습니다 : 당신은 위의 작업 (텍스트로 변환), Blob API 등을 사용할 수 있습니다. 일부 휴대 전화는 메모리에서 전체 게임을 지울 수 있기 때문에 이것을 권장하지 않습니다. 즉, 코드가 아직 메모리에있는 경우 모든 것이 정상인지 확인해야합니다. 이는로드 시간이 길어지고 사용자 전화가 중단 될 수 있음을 의미합니다. 그래도이 길을 선택하면 LocalForage 를 사용하면 도움이됩니다.
전자 사용하기 또는 NW.js를 html, css 및 js를 사용하여 데스크탑 앱을 만들 수 있습니다. 비슷한 방법을 사용하여 모바일 앱을 만들 수도 있습니다 ( Cordova 또는 PhoneGap 과 같은 Cordova 종속 기능 사용 ). 이렇게하면 원하는 경우 사용자가 정식 게임을 다운로드 할 수 있습니다.
여전히 계속하려면 zip 파일 JSZip을 체크 아웃 하십시오 . 어떻게 사용할 수 있는지 잘 모르겠지만 누군가가 좋은 아이디어를 얻을 수 있다고 확신합니다 (파일을 압축 한 다음 이진 데이터를 문자열로 변환 하여 HTML에 인라인으로 배치 할 수 있음).
이 이상한 해킹 통해 텍스트 데이터를 데이터 블록이라고하는 텍스트로로드 할 수 있습니다. 이것은 자산을 html 파일에 포함시키는 데 사용할 수있는 또 다른 도구입니다.

— 키 탕가 Nday
소스