如何将phaser3游戏嵌入html

Question

我对 node.js 和 Phaser3 完全陌生。 我昨天跟着这个教程，到目前为止一切都很好。 如何将客户端游戏嵌入到 html 文件中？ Phaser3工程模板使用的webpack，简单的取工程模板自带的index.html，引用main.js（我猜是webpack的一部分）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html>

Phaser3 教程只是将移相器配置和游戏场景 object 放入同一个 html 文件中。 我不喜欢这个解决方案，我确信有办法将所有场景放入单独的文件中。 但是怎么做？

如果我执行以下操作（修改 Phaser 3 项目模板）：

src/scenes/MaGame.js

import Phaser from 'phaser';
import logoImg from '../assets/logo.png';

export default class MyGame extends Phaser.Scene {
    constructor() {
        super();
    }

    preload() {
        this.load.image('logo', logoImg);
    }

    create() {
        const logo = this.add.image(400, 150, 'logo');

        this.tweens.add({
            targets: logo,
            y: 450,
            duration: 2000,
            ease: "Power2",
            yoyo: true,
            loop: -1
        });
    }
}

游戏.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my title</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <script src="src/scenes/MyGame.js"></script>
</head>
<body>


    <script type="text/javascript">
        const config = {
            type: Phaser.AUTO,
            parent: 'phaser-example',
            width: 800,
            height: 600,
            scene: MyGame
        };

        const game = new Phaser.Game(config);

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

当我打开/导航到 game.html（在开发者控制台中）时出现以下错误：

未捕获的语法错误：无法在模块外使用导入语句 - MyGame.js:1

未捕获的 ReferenceError：MyGame 未在 game.html:20 中定义

这无济于事：如果我将其定义为 package.json 中的模块或将文件重命名为.mjs，则无法使用 npm 启动它。

那么问题来了：我如何正确地将游戏嵌入到 html 文件中？ 出于开发目的，可以使用 npm 启动，但是我以后如何将游戏部署到网络服务器？ 我似乎找不到任何有用的信息，但这肯定是一个非常基本的话题。

Answer 1

我认为你需要的是一个模块捆绑器。 查看Webpack或Parcel ，我推荐 Parcel ，因为它不需要配置且易于使用。

如果您选择使用 Parcel，您可以使用您的主 html 文件作为入口点，如下所示： parcel index.html

如何将phaser3游戏嵌入html

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-12-26 16:22:41

如何将phaser3游戏嵌入html

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-12-26 16:22:41

解决方案1
1 已采纳 2020-12-26 16:22:41