javascript - 如何将phaser3游戏嵌入html
问题描述
我对 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教程只是将移相器配置和游戏场景对象放入同一个 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 start 启动它。
那么问题来了:如何正确地将游戏嵌入到 html 文件中?出于开发目的,可以使用 npm 启动,但是我以后如何将游戏部署到网络服务器?我似乎找不到任何有用的信息,但这肯定是一个非常基本的话题。
解决方案
推荐阅读
- nginx - Nginx 配置错误
- javascript - 拼接不适用于 DOM 元素数组
- javascript - 错误和删除错误时的可访问性问题
- laravel - 多态关系laravel问题与视图
- azure - 如何设置对 Azure 应用服务的 FTP 访问?
- node.js - 当我尝试保存到 Firestore 时,为什么我的 Firebase HTTPS 功能会静默?
- javascript - 如何让 IonViewDidLoad 在事件订阅之后运行
- python - Django - 通知迁移不一致迁移历史
- .net - 在批处理文件中区分 COM dll 和 .NET 程序集
- mysql - MySQL 十进制列 SUM