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)：