我一直在为CS课程开发使用javascript进行的游戏。当我通过单击Webstorm中的run打开文档时,它将正确加载游戏,但是,当我尝试从Finder打开html文件时,网页会打开,但是我没有用于加载精灵的png文件。我在Google chrome中打开了Inspect Element,并且javascript文件已正确加载,但列出的所有png文件都已取消。从webstorm运行游戏时不会发生这种情况(当我从webstorm运行游戏时,所有图像文件均会正确加载)。

当直接从html文件打开游戏时(就是我遇到的问题),chrome从html文件的路径中将其作为网址,尽管从webstorm打开时,它会列出http://localhost:63342/CS%20Week%2010/CS105_Jessica.Davis_DogGame.html?_ijt=tmrr2fndgac82h07hlvt101gi4

如何解决此问题,以便从Finder打开html文件时,它可以正确加载所有内容?所有图像文件都与html文件位于同一目录中。

最佳答案

由于浏览器的安全性,可能无法从以file://开头的网址加载此类文件

Webstorm可能正在制作本地Web服务器,因此您可以说file://而不是说http://。如果任何网站都能够从file://加载图像,则您访问的任何网页都将能够在您的计算机上搜索任何文件并在未经您同意的情况下通过Internet发送,因此浏览器通常会启用这些设置。因此,您需要一台服务器。如果您使用的是计算机,则可以像webstorm一样制作本地服务器,并在其中托管自己的文件。或将其托管在github页面或Codepen等其他服务上。

现在,由于所有图像都在同一目录中,因此请确保每次调用loadImage时都使用图像名称和扩展名,而不要说/User/user/whatever_other_directory_you_have_it_under/image.png

完成后,您可以为该项目制作本地Web服务器。要制作本地服务器,请打开终端(在实用程序下的应用程序,也可以重点搜索它),然后键入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之类的图像托管站点,并将这些图像的URL源添加到Codepen中,否则您甚至可以将所有内容放入github更好的结果!

要使用github页面,您需要创建一个github帐户(最好使用您要使用的用户名来命名页面)。创建一个名为insert_username_here.github.io的存储库。将您的文件添加到存储库中(确保尝试将所有子目录和文件夹与项目文件夹中的文件完全一样)。一两分钟后,转到http://insert_username_here.github.io欣赏您全新的托管网页!

09-30 16:31
查看更多