Question

我正在按照Phaser 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}}调用了游戏功能，但是我意识到，当我切换网站的路径时，游戏就出现在每个页面上。有什么方法可以将游戏隔离在一个模板/区域上吗？当我回到放置{{game}}的原始页面后，它甚至重复了。

感谢您的帮助！

Answer 1

而不是在帮助程序内，请尝试在其自己的Template.onCreated内部，并使用{{> game}}模板空格键而不是帮助程序空格键。到目前为止，这对我来说似乎还可以，但是我对此没有做过多的测试（如果我删除了{{> game}}，则游戏没有实例化，因此我认为这可以正常工作）...我在移动我的游戏从webpack升级到了流星，如果遇到任何问题，请及时更新！不幸的是，我见过的许多示例都是过时的软件包或伪代码，因此希望对您有所帮助...

别忘了：

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中的一个模板中显示移相器游戏

1 个答案: