首页 > 解决方案 > 将 Phaser 3 游戏嵌入现有的秘银网站

问题描述

我一直试图让 Phaser 3 在现有的秘银网站上工作。所有现有的 Phaser 3 示例似乎都“通过魔法”工作。没有 javascript 代码可以将移相器游戏安装到您的 DOM 中。搜索让我无处可去。即使是“现代”教程似乎也只是加载了 js,然后就有了一个游戏。

如何将移相器游戏合并到现有的秘银框架中?我可以像这样简单地安装一个 pixi 画布:

import * as PIXI from 'pixi.js'

app = new PIXI.Application 800, 600,
  backgroundColor: 0x1099bb

basicText = new PIXI.Text('Basic text in pixi')
basicText.x = 30
basicText.y = 90

app.stage.addChild basicText

export class BPScreen
  view: ->
    m '#balloon-pop',
      oncreate: ({ dom })->
        dom.appendChild app.view

我可以使用 Phaser 3 完成此任务吗?

标签: phaser-frameworkmithril.js

解决方案


在移相器游戏的配置中有一个名为的属性parent,您可以在其中传递父元素的 id,例如 div。

所以一个示例配置是:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    ...
    [other config options]
};

然后在HTML中你会有类似的东西

<div id="gameDiv"></div>

推荐阅读