javascript - Vue.js 的 sprite.events.onInputDown.add() 问题

Question

我是一名新的 Web 开发人员，目前正在使用 Vue.js 框架。决定尝试使用 Phaser 2 制作游戏，我目前很喜欢它！虽然我遇到了鼠标事件的一些问题，但我对按键事件没有任何问题；）

目前我正在尝试单击图像，只是为了控制台将其注销。（稍后会想拖。）但第一件事是首先，我什至无法让我的控制台注销。这是我的代码，我将它与 vue.js 一起使用！任何帮助都会很棒！谢谢！

以下是我认为很重要的一些代码片段

mounted () {
  let self = this
  if (this.game == null) {
    this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, this.$el, {
      preload: function preload () {
        self.preload(this)
      },
      create: function create () {
        self.create(this)
      },
      update: function update () {
        self.update(this)
      },
      render: function redner () {
        self.render(this)
      }
    })
  }
}
preload () {
  this.game.load.image('pink', require(`@/assets/images/packing/pink-bg.png`))
  this.game.load.image('cat', require(`@/assets/images/packing/cat-head.png`))
  this.game.load.image('table', require(`@/assets/images/packing/table.png`))
  this.game.load.image('plate', require(`@/assets/images/packing/plate.png`))
  this.game.load.spritesheet('container', require(`@/assets/images/packing/container-set.png`), 310, 270)
  this.game.load.spritesheet('scorePlate', require(`@/assets/images/packing/kueh-set.png`), 313, 270)
}
let cat = this.game.add.sprite(0, 0, 'cat')
cat.height = this.game.world.height * 0.25
cat.width = this.game.world.width * 0.15

let table = this.game.add.sprite(0, 0, 'table')
table.height = this.game.height
table.width = this.game.width

this.game.physics.startSystem(Phaser.Physics.ARCADE)

let containerBullu = this.game.add.sprite(this.game.world.width - (this.game.world.centerX + this.game.world.centerX), this.game.world.height / 7, 'container')
containerBullu.height = this.game.world.height * 0.55
containerBullu.width = this.game.world.width * 0.35
containerBullu.frame = 4
containerBullu.inputEnabled = true
containerBullu.events.onInputDown.add(this.listener, containerBullu)

let containerCornflake = this.game.add.sprite(this.game.world.width - (this.game.world.centerX + this.game.world.centerX / 1.8), -50, 'container')
containerCornflake.height = this.game.world.height * 0.6
containerCornflake.width = this.game.world.width * 0.35
containerCornflake.frame = 9
render (phaser) {
  this.game.debug.spriteInfo(this.containerBullu, 100, 100)
}
listener (containerBullu) {
  console.log(containerBullu)
},
destroyed () {
  this.game.destroy()
}

我希望很快能收到任何人的来信！谢谢！

真诚、绝望和哭泣的新前端 Web 开发人员。（我在上面玩了 4 个小时。截至目前。还在继续......）

标签： javascriptvue.jsphaser-framework