努力使 Phaser 在本地服务器中与 javascript 一起工作

Question

因此，在尝试完成这项工作约 6 个小时后，我的想法都被淘汰了，我来了。

这是我第一次使用 JS 和 Phaser 3.16.2。

我正在编写 Visual Studio 代码，运行通过 'live server' 插件连接本地服务器。

假定的正确输出是 "Simple Game"，然后是一个图标文件。

这太奇怪了，因为我没有收到任何错误或警告，但是当我运行 index.html 文件时，.js 文件不产生任何输出。

phaser.js 与 game.js 文件位于同一文件夹中。

到目前为止我尝试过的事情：

调试 game.js 文件中的代码（我得到一个错误 window 不是定义).
多次检查代码的语法。
检查服务器端的问题（一切正常执行 ).
我已经阅读了网络上所有类似的帖子。
更改了多个图像文件以防有奇怪的东西挡住图像从出现在屏幕上。
在 chrome,edge.

我不太熟悉 JavaScript 所以我真的不知道还有什么方法可以解决这个问题。

以下是目前的文件：

32744.jpg

phaser.js

index.html

    <!DOCTYPE html>
    <html lang ="en">
    <head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Simple Game</title>
        <script>src="js/phaser.js"</script>
        <script>src="js/game.js"</script>
    </head>

    <body>
      <h1>Simple Game</h1>
      <div id="content"></div>
      </body>
</html>

game.js

var SimpleGame = (function() {
    function SimpleGame() {
        //create our phaser game
        //800 width
        //600 height
        //Phaser.AUTO determines the renderer automatically (canvas,webgl)
        // {preload:this.preload,create:this.create} -- function to call for our start game
        this.game = new Phaser.Game(800,600,Phaser.AUTO,'content',{preload:this.preload,create:this.create});
    };
    SimpleGame.prototype.preload = function () {
        //add our logo image to the assets class under the
        //key->logo, we are also setting the background colour
        //so its the same as the background colour in the image
        this.game.load.image('logo',"assets/32744.jpg");
        this.game.stage.backgroundColor=0xB20059;

    };
    SimpleGame.prototype.create = function () {
        //add the logo sprite to the game, position it in the 
        //center of the screen,and set the anchor to the center of 
        //the image so its centered properly.Theres a lot of centering in that last sentece
        var logo = this.game.add.sprite(this.game.world.centerX,this.game.world.centerY,'logo');
        logo.anchor.setTo(0.5,0.5);
    };

    return SimpleGame;
}); 

//when the page has finished loading,create our game 
global.window.onload = function() {
    var game = new SimpleGame();


};

Answer 1

已解决：

更改了我导入引擎的方式，降低了引擎的版本，将代码直接放在标签中。工作起来很有魅力。

我仍然不知道第一次尝试失败的确切原因，但关键是它奏效了。可能是新版本还不太稳定。

Answer 2

您正在尝试运行 Phaser 2.x。x/CE 代码与 Phaser 3.x.x 。难怪你会收到这些错误。 Phaser 2.x.x/CE 和 3.x.x 彼此不同。 Phaser 3 是从头开始编写的，因此内部结构完全不同。

这里有一些链接可以帮助您开始使用 Phaser 3。

Getting started with Phaser 3

Making your first game with Phaser 3

Phaser 3 Examples

Phaser 3 Docs

Phaser 3 FAQs

努力使 Phaser 在本地服务器中与 javascript 一起工作

Struggling to make phaser work with javascript in local server

javascript

phaser-framework