Phaser3入门

时间 2021-02-13

标签 html node python git github web apache npm 浏览器安全栏目 HTML 繁體版

原文原文链接

本文咱们将学习搭建能够用Phaser进行游戏开发的环境，包括一个本地Web服务器，IDE，最新版本的Phaser，并确保它们能正常工做。html

为何须要一个本地Web服务器？node

若是咱们写了HTML网页，将这个文件拖到浏览器中，能够看到最终相应的效果。还能够将整个网页“另存为”，再打开的话，能够看到没有什么很大的不一样。这两种方法都起做用，为何不能将HTML5游戏拖动到浏览器中运行它呢？python

这与访问文件的协议有关。当经过Web请求任何内容时，将使用http协议，而且服务器级别的安全性足以确保只能访问咱们想要的文件。可是，当将文件拖入其中时，它是经过本地文件系统(file://)加载的。在file://下，没有域的概念，没有服务器级的安全性，只有原始文件系统。git

举个例子：github

在本地新建一个目录，并添加以下两个文件：web

在该目录下启动服务器，apache

打开浏览器进行访问http://127.0.0.1:8000/，能够看到：npm

因为咱们没有指定请求的资源，默认访问的是Web根目录下的index.html文件。若是这个时候，咱们想要访问与A同级的目录，浏览器

好比，目录B或者目录C是不行的，由于咱们是在目录A下启动服务器的，服务器把目录A做为Web根目录，它只知道Web根目录下的文件，至于目录B，目录C等等，服务器压压根就不知道。安全

但若是咱们用file://方式访问index.html文件(将文件拖动到浏览器)，

能够看到相同的内容。但若是咱们将地址稍微更改一下，

整个本地的文件及目录均可以经过file://的方式访问到，与用本地Web服务器彻底不一样。

那么问题就来了，你真的想Javascript能够访问到你本地的全部文件吗？

若是不想的话，这就是须要本地Web服务器的缘由。

安装Web服务器

Windows

在Windows上，有不少捆绑安装包可用，它们将流行的Web技术，例如Apache，PHP和MySQL打包在一块儿并经过单个exe进行设置。

建议使用WAMPServer或XAMPP，它们都提供设置指南。 WAMP专门在系统托盘中装了一个图标，能够经过它中止和从新启动服务，修改Apache设置，例如为项目建立新的目录名。

除了上述的“多合一”捆绑包，还能够仅下载一个Web服务器。 Microsoft IIS和Apache都可免费下载。

OS X

做为一个Unix环境，OS X比Windows有更多的选择。若是想要一个像WAMP同样的“全部功能于一身”的工具，一个干净、易用的界面，那么强烈推荐MAMP。有两个版本:一个是免费的，一个是付费的。

http.server

若是须要一个快速运行的Web服务器，而且不但愿在设置Apache或下载应用程序时遇到麻烦，那么Python能够帮到咱们。Python提供了一个简单的内置HTTP服务器，这也是前面例子中展现的方法。固然，咱们须要安装Python。更多关于http.server的内容请看http.server — HTTP servers。

http-server

http-server是node.js中的一个简单的、零配置的命令行http服务器。它的功能足够强大，能够用于生产环境，天然也能够用于测试、本地开发和学习。

具体安装使用能够参考http-server: a command-line http server。

编辑器

咱们须要用于编写JavaScript代码的编辑器。有不少选择，每一个选择都有其优缺点。若是您是一位经验丰富的开发人员，那么您可能已经有了本身的首选编辑器，在这种状况下，请跳过本文的这部份内容。不然的话，这里有一些选项供您选择：

下载Phaser

Phaser是一个开源项目，能够免费下载。使用Phaser无需支付任何费用，不管将其用于商业项目仍是免费项目。

项目做者使用Github来管理该项目，咱们能够选择各类方式来下载它。这些都在下载页面上进行了说明。

这里我选择的min.js文件。

Hello World

如今，本地Web服务器、编辑器、Phaser都弄好了，万事具有，是时候写点东西确保一切均可以正常工做。

提示：若是您对下面代码一头雾水的话，建议您先一边写一边对照着
Javascript教程学习。

在Web的根目录(对于我而言就是前例中的A目录)下建立一个名为index.html的文件，并将如下代码粘贴保存：

<!DOCTYPE html>
<html>
    <head>
        <script src="phaser.min.js"></script>
    </head>
    <body>
        <script>
            var config = {
                type: Phaser.AUTO,
                width: 800,
                height: 600,
                physics: {
                    default: 'arcade',
                    arcade: {
                        gravity: {y:200}
                    }
                },
                scene: {
                    preload: preload,
                    create: create
                }
            };

            var game = new Phaser.Game(config);
            
            function preload(){
                this.load.setBaseURL('http://labs.phaser.io');
                this.load.image('sky', 'assets/skies/space3.png');
                this.load.image('logo', 'assets/sprites/phaser3-logo.png');
                this.load.image('red', 'assets/particles/red.png');
            }

            function create(){
                this.add.image(400, 300, 'sky');
                var particles = this.add.particles('red');
                var emitter = particles.createEmitter({
                    speed: 100,
                    scale: {start: 1, end: 0},
                    blendMode: 'ADD'
                });
                var logo = this.physics.add.image(400, 100, 'logo');
                logo.setVelocity(100, 200);
                logo.setBounce(1, 1);
                logo.setCollideWorldBounds(true);

                emitter.startFollow(logo);
            }

        </script>
    </body>
</html>

在控制台中输入以下命令(使用的以前提到的http-server)：