Question

因此，经过约6个小时的尝试，这项工作被我淘汰，我来了。

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

我正在使用Visual Studio Code，通过“实时服务器”插件运行本地服务器。

假定正确的输出将是“简单游戏”，然后是一个图标文件。

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

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

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

调试 game.js 文件中的代码（我没有看到错误窗口定义）。
多次检查代码的语法。
检查服务器端是否有问题（一切正常执行）。
我已经阅读了网络上所有类似的帖子。
更改了多个图像文件，以防某些奇怪的图像阻塞不会出现在屏幕上。
尝试在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 3.x.x 运行 Phaser 2.x.x / CE 代码。难怪您会遇到这些错误。移相器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一起使用

2 个答案: