Question

我想创建一个类似Tic-tac玩具的游戏，但是无法为图像设置正确的位置（在x()和y()函数内部）。单击特殊的平台（正方形）要在该平台内放置x或y。就我而言，它总是在第一个平台内创建。

export default class A extends Phaser.Scene {
  constructor () {
    super(SCENE_GAME)
    this.counter = 0
    const gameOptions = {
      tileSize: 200,
    }
    const gameConfig = {
      width: gameOptions.tileSize * 3,
      height: gameOptions.tileSize * 3,
    }
  }

  create = () => {
    this.platformArray = []
    this.platformGroup = this.add.group()
    for (let i = 0; i < 3; i++) {
      this.platformArray[i] = []
      for (let j = 0; j < 3; j++) {
        this.platform = this.add.sprite(j * gameOptions.tileSize + gameOptions.tileSize / 2, i * gameOptions.tileSize + gameOptions.tileSize / 2, 'platform').setInteractive()
        this.platform.on('pointerdown', this.clickCounter, this)
      }
    }
  }

  clickCounter () {
    this.counter++
    if (this.counter % 2 === 1) {
      this.x()
    } else {
      this.y()
    }
  }

  x () {
    this.add.sprite(gameOptions.tileSize / 2, gameOptions.tileSize / 2, 'x')
  }

  y () {
    this.add.sprite(gameOptions.tileSize / 2, gameOptions.tileSize / 2, 'y')
  }

Answer 1

它们出现在同一位置的原因是因为您仅将tileSize用于定位。

因此，如果tileSize为16，则x()将始终在位置8、8处添加一个精灵。

在您的for循环中，您有以下内容：

this.platform = this.add.sprite(
    j * gameOptions.tileSize + gameOptions.tileSize / 2,
    i * gameOptions.tileSize + gameOptions.tileSize / 2, 'platform')
 .setInteractive()

您会看到您正在使用tileSize并乘以网格位置。

我建议将您的x和y函数更改为接受数字或指针，如果您添加自变量（添加{ clickCounter()中的{1}}应该注销可用的参数。

然后根据指针的位置进行数学运算以确定单击的图块。

另一种替代方法是向每个图块精灵添加自定义属性，例如将console.log(arguments);和clickCounter()设置为适当的row / column值。然后，也可以在i中将点击的精灵作为自变量之一进行访问，然后就可以提取自定义属性。

如果您使用的是TypeScript，则需要创建一个扩展Sprite的自定义对象。

在单击的位置Phaser3上添加图像

1 个答案: