在 meteor.js 中仅在一个模板中显示 Phaser 游戏

Question

我正在按照移相器 3.x 教程制作一个简单的游戏。 Phaser Tutorial 我使用 meteor.js 作为平台。

一切正常：

Template.App_home.helpers({

  game: function() { 
    var config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      physics: {
          default: 'arcade',
          arcade: {
              gravity: { y: 300 },
              debug: false
          }
      },
      scene: {
          preload: preload,
          create: create,
          update: update
      }
  };

  var game = new Phaser.Game(config);

  function preload ()
  {
      this.load.image('sky', './assets/sky.png');
      this.load.image('ground', './assets/platform.png');
      this.load.image('star', './assets/star.png');
      this.load.image('bomb', './assets/diamond.png');
      this.load.spritesheet('dude', 
          './assets/dude.png',
          { frameWidth: 32, frameHeight: 48 }
      );
  }

  var platforms;

  function create ()
  {
      this.add.image(400, 300, 'sky');

      platforms = this.physics.add.staticGroup();

      platforms.create(400, 568, 'ground').setScale(2).refreshBody();

      platforms.create(600, 400, 'ground');
      platforms.create(50, 250, 'ground');
      platforms.create(750, 220, 'ground');

      player = this.physics.add.sprite(100, 450, 'dude');

  player.setBounce(0.2);
  player.setCollideWorldBounds(true);

  this.physics.add.collider(player, platforms);

  cursors = this.input.keyboard.createCursorKeys();

  player.setBounce(0.2);
  player.setCollideWorldBounds(true);

  this.anims.create({
      key: 'left',
      frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
      frameRate: 10,
      repeat: -1
  });

  this.anims.create({
      key: 'turn',
      frames: [ { key: 'dude', frame: 4 } ],
      frameRate: 20
  });

  this.anims.create({
      key: 'right',
      frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
      frameRate: 10,
      repeat: -1
  });
  }

  function update ()
  {

    if (cursors.left.isDown)
    {
        player.setVelocityX(-160);

        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(160);

        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);

        player.anims.play('turn');
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.setVelocityY(-330);
    }
  }
  }
});

我用 {{game}} 调用了游戏功能，但当我切换我的网站的路由时我意识到游戏在每个页面上。有什么方法可以将游戏隔离在一个 template/area 上吗？在我回到我放置 {{game}}.

的原始页面后，它甚至重复了

感谢您的帮助！

Answer 1

尝试在它自己的 Template.onCreated 中而不是在助手中，并使用 {{> 游戏}} 模板空格键而不是助手空格键。到目前为止，这对我来说似乎没问题，但除此之外我还没有进行太多测试（如果我删除 {{> 游戏}}，那么游戏不会实例化，所以我认为这会正常工作）...我正在移动我的游戏从 webpack 构建到 meteor 中，如果我运行遇到任何问题，我会更新！不幸的是，我看到的很多例子都是过时的包或伪代码，所以希望这会有所帮助...

别忘了:

meteor npm install phaser

/client/main.html:

<head>
  <title>example-meteor</title>
</head>

<body>
  {{> game}}
</body>

<template name="game">
</template>

/client/main.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

// import logoImg from "./assets/logo.png";

import './main.html';

import Phaser from "phaser";

let config;
let game;

Template.game.onCreated( () => {

    config = {
      type: Phaser.AUTO,
      parent: "phaser-example",
      width: 900,
      height: 900,
      scene: {
        preload: preload,
        create: create
      }
    };

    game = new Phaser.Game(config);

    function preload() {
      // this.load.image("logo", logoImg);  
    }   
    function create() {
        console.log('game created')
    }
});




Template.game.helpers({

});

Template.game.events({

});

在 meteor.js 中仅在一个模板中显示 Phaser 游戏

Displaying phaser game in just one template in meteor.js

meteor

phaser-framework