Question

我在一个非常基础的水平上学习javascript，我们有一个学校的分配，老师为每个学生分发了一个简单的游戏。这里的任务是改变游戏。我在javascript上非常糟糕，我想得到熟练技术人员的一些帮助。我的问题是：如何使门出现在随机坐标？现在它看起来像这样：

window.onload = function() {
class MazeToGoal extends Phaser.Scene {

  constructor (config)
  {
    super(config);
    Phaser.Scene.call(this, { key: "MazeToGoal", active: true });
    this.gameOn=true;
    this.score=0;
    this.scoreMsg="Score: ";
    this.scoreText;
    this.my_buttons = [];
    this.step=4;
    this.counter;
    this.gates=[];
  }

  preload() {
    this.load.spritesheet('mushrooms', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAL8SURBVHhe7dHRcqMwEETR/f+fzlZtXW/jAmKITY+T3PPYIwmh/vOhURYwzAKGWcAwCxhmAcMsYJgFDLOAYRYwzAKGfY8C/pzEtu/gve7K+12Gz7yT4TvxMEO4xKiBS/D3b4bL1fU+zI++Pa7bcvn3+K3ncNYZ7HwCB13sws/wHyex+Rp84wx2XuaSD3D3A9gwhEscw55Xe/G5XPYRVr8NrnUAG17nZSdywU+x9I1x0UdY/QovOItL7WPdt8LV97HuaU8dxF32se7b4jf2se4JXz+CK+xg0Y/AL+1g0Vd9cT8f38KKH4ff28Gi807v5INbWPGj8atbWHHSuW18aoXxr8FvrzA+48QePrLC+Jfh51cYH3Z0A8ffY/aL8RD3mB1zaDUH32P26/Ec95gd8MUCGOgfHuUes0cer+O8BQZa4GkWGDzyYB2HLTDQCg+0wOBTny3imAUG2sEzLTDYZwGvxDMtMNi3u4IDFhjoUzzWAoMdRwsg1QE82Q3pju0xWxcY6ACebIHBlkMFkOowHu6GdIsFXIKHuyHdYgGX4OFuSLdszNikl+JxVyyghMddsYASHnfFAkp43BULKOFxV3YH1+FGN6QTuMENaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRplwUEaZcFBGmXBQRp13wB74P7dVlAcL8uCwju12UBwf26LCC4X9fMV/WfBQyzgGEWMMwChlnAMAsYZgHDLGCYBQyzgGEWMMwChlnAMAsYZgHDLGCYBQyzgGEWMOrj4y8tsH+sT76qdwAAAABJRU5ErkJggg==', { frameWidth: 128, frameHeight: 128});
  }

  create ()
  {
    this.pen = this.make.graphics({x: 0, y: 0, add: false});
    this.pen.fillStyle(0x00FF00, 1.0);
    this.pen.fillRect(0, 0, 30, 30);
    this.pen.generateTexture('goal', 30, 30);
    this.player = this.add.image(100, 270, 'goal');
    this.scoreText = this.add.text(10, 10, this.scoreMsg+this.score, { fontSize: '32px', fill: '#FFF' });
    this.counter=0;
    this.gates[0] = this.createGate(100);
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update()
  {
    if(this.gameOn) {
      this.counter++;
      if(this.counter % 200 === 0) {
        this.gates.push(this.createGate(100));
      }
      if (this.cursors.up.isDown)
      {
        this.player.y-=this.step;
      }
      else if (this.cursors.down.isDown)
      {
        this.player.y+=this.step;
      }

      if(this.player.x-5 < this.gates[0].left.x && this.gates[0].left.x < this.player.x+5) {
        if(this.gates[0].left.y < this.player.y && this.player.y < this.gates[0].right.y) {
          console.log("Hit");
          this.gates.shift();
        }
        else {
          this.gameOn=false;
          this.add.text(25, 200,"Game Over", { fontSize: '128px', fill: '#F00' });
          console.log("Boom");
        }
      }
    }
  }

  createGate(StartY) {
    let gate={};
    gate.left = this.add.image(700,StartY, 'mushrooms', 1).setScale(0.25);
    gate.right = this.add.image(700, StartY+100, 'mushrooms', 1).setScale(0.25);
    gate.tween = this.tweens.add({
      targets: [gate.left, gate.right] ,
      x: -50,
      //ease: 'Power1',
      duration: 5000
    });
    return gate;
  }
}

  const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: "#FFFFFF",
    parent: "phaser-example",
    scene: [MazeToGoal]
  };

  const game = new Phaser.Game(config);
}

<head>
  <meta charset="utf-8" />
  <title>MushroomSlalom</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.1.1/dist/phaser.min.js"></script>
</head>
<body>
  <div id="phaser-example"></div>
</body>

提前致谢！

Answer 1

在Phaser 3中，您可以使用Phaser.Math.Between()生成一个随机数。

因此，要使门出现在随机的位置，请确定您希望门在哪个区域生成，并在该空间内生成随机坐标。

如果您希望它们在屏幕上的任何地方生成，可以执行以下操作。

// Update as needed. Here we have it based upon the width and height of the main camera.
let randomX = Phaser.Math.Between(0, this.cameras.main.width);
let randomY = Phaser.Math.Between(0, this.cameras.main.height);

let gate = this.add.image(randomX, randomY, 'mushrooms', 1);

这忽略了图像的一部分可能在屏幕外；您需要添加一个适当的缓冲区来考虑锚点。

Phaser游戏/学校项目，需要指导

1 个答案: