2017-12-03 3 views
0

내 CS 과정에서 javascript로 게임을했습니다. Webstorm을 실행하여 문서를 열면 게임이 올바르게로드되지만 Finder에서 html 파일을 열려고하면 웹 페이지가 열리지 만 스프라이트로드에 사용하는 png 파일은 없습니다. 나는 구글 크롬에서 요소 검사를 열었고 자바 스크립트 파일은 올바르게로드되었지만 모든 png 파일은 취소 된 것으로 나열되었습니다. 이것은 게임이 웹 스톰에서 실행될 때 발생합니다 (웹 스톰에서 실행하면 모든 이미지 파일이 올바르게로드됩니다).html 파일을 직접 열 때 png 파일을로드 할 수 없지만 webstorm에서 열 때로드됩니다.

는 webstorm에서 열 때 있지만, 그것은 게임이 HTML 파일 (I 문제가있을 때 그건)에서 직접 열 때, 크롬은 webaddress으로 HTML 문서의 경로를 나열

을 나열 http://localhost:63342/CS%20Week%2010/CS105_Jessica.Davis_DogGame.html?_ijt=tmrr2fndgac82h07hlvt101gi4

어떻게 Finder에서 html 파일을 열 때 모든 것이 올바르게로드되도록이 문제를 해결할 수 있습니까? 모든 이미지 파일은 html 파일과 동일한 디렉토리에 있습니다. 때문에 브라우저 보안

+4

[mcve]를 게시 할 수 있습니까? 또한, 왜 이것이 문제입니까? 어쨌든 HTML 파일을 열지 않아야합니다. –

+0

TA가 내 작품을 등급 매김하여 게임을 열고 실행할 수 있어야합니다. –

+0

파일을 실행하기 위해 자체 서버를 실행하지 않습니까? 그렇지 않다면, 그들은 당신이 일을 어떻게하기를 바라는 지에 대한 지침을 가져야합니다. –

답변

2

,이 같은로드 파일 대신 file:// 말을 당신이 http://을 말할 수 있도록 아마 로컬 웹 서버를 만드는 무엇 webstorm file://

로 시작하는 URL에서 작동하지 않을 수 있습니다. 어떤 웹 사이트가 file://에서 이미지를로드 할 수 있다면 귀하가 방문하는 모든 웹 페이지는 귀하의 컴퓨터에있는 파일을 검색하여 귀하의 동의없이 인터넷을 통해 전송할 수 있으므로 브라우저에 이러한 설정이 적용되는 경우가 많습니다. 그래서 서버가 필요합니다. 컴퓨터에서 작업하는 경우 웹 서버와 같은 로컬 서버를 만들어 자신의 파일을 호스트 할 수 있습니다. 또는 github 페이지 또는 codepen 같은 다른 서비스에서 호스팅하십시오.

모든 이미지가 동일한 디렉토리에 있으므로 loadImage으로 전화 할 때마다 /User/user/whatever_other_directory_you_have_it_under/image.png 대신 이미지 이름과 확장자를 사용해야합니다.

일단 그렇게하면 프로젝트에 대한 로컬 웹 서버를 만들 수 있습니다. 로컬 서버를 만들려면 터미널 (유틸리티 아래의 응용 프로그램)을 열고 cd을 입력하고 프로젝트 폴더를 끌어서 터미널 위에 놓은 다음 Enter 키를 누릅니다. 그런 다음 python -m SimpleHTTPServer를 입력하고 Serving HTTP on 0.0.0.0 port 8000 ...과 같은 메시지가 나타날 때까지 기다립니다. 그런 다음 예에서 볼 수있는 0.0.0.0과 8000을 사용하면 브라우저에 가서 http://0.0.0.0:8000을 입력합니다 (숫자를 원하는대로 바꾸면이 링크가 작동 할 때까지 작동하지 않습니다. 그)

이미지로드해야합니다. 서버를 중지해야하는 경우 터미널로 돌아가 control+C을 누르십시오.

p5 스케치를 제공 할 때 로컬 서버를 만들면 다른 사람이 자신의 컴퓨터에서 웹 사이트를 볼 수 없습니다. 로컬 서버는 자신의 로컬 서버를 만들고 프로젝트 파일을 정상적으로 작동시키는 경우에도 실행중인 장치에서 격리되어 있습니다.

세계 어디에서나 누구와 링크를 공유 할 수 있도록 웹 사이트를 호스팅하려면 codepen 또는 github 페이지를 사용할 수 있습니다. codepen.io로 간다면 tumblr 같은 이미지 호스팅 사이트에 이미지를 업로드하고 codepen에 해당 이미지의 URL 소스를 추가해야합니다. 그렇지 않으면 모든 것을 github에 넣을 수 있습니다. 결과!

github 페이지를 사용하려면 github 계정을 만들어야합니다. 사용자 이름이 페이지 이름을 원하는대로 지정해야합니다. 저장소 이름을 insert_username_here.github.io으로 지정하십시오.저장소에 파일을 추가하십시오 (모든 하위 디렉토리와 폴더를 프로젝트 폴더에서 그대로 유지하도록하십시오). 1 ~ 2 분 후 http://insert_username_here.github.io으로 가서 새로운 호스팅 웹 페이지에 감탄하십시오!

희망 하시겠습니까?

관련 문제