在 Phaser.js 中添加移动功能答案

【问题标题】：Adding mobile functionality in Phaser.js在 Phaser.js 中添加移动功能
【发布时间】：2020-12-12 01:15:48
【问题描述】：

我用Phaser.js做了一个简单的Bug Dodger游戏，源代码如下：

https://github.com/ankurg132/phaser-codecademy-projects/tree/master/Bug%20Dodger%20Game

您可以在这里观看现场演示：https://codepen.io/ankurg132/pen/jOWgXer

function preload() {
    this.load.image('bug1', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/bug_1.png');
    this.load.image('bug2', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/bug_2.png');
    this.load.image('bug3', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/bug_3.png');
    this.load.image('platform', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/platform.png');
    this.load.image('codey', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/codey.png');
  }
  
  const gameState = {
    score: 0
  };
  
  function create() {
    gameState.player = this.physics.add.sprite(225, 450, 'codey').setScale(.5);
    
    const platforms = this.physics.add.staticGroup();
  
    platforms.create(225, 490, 'platform').setScale(1, .3).refreshBody();
  
    gameState.scoreText = this.add.text(195, 485, 'Score: 0', { fontSize: '15px', fill: '#000000' });
  
    gameState.player.setCollideWorldBounds(true);
  
    this.physics.add.collider(gameState.player, platforms);
    
      gameState.cursors = this.input.keyboard.createCursorKeys();
  
    const bugs = this.physics.add.group();
  
    function bugGen () {
      const xCoord1 = Math.random() * 450;
      const xCoord2 = Math.random() * 450;
      const xCoord3 = Math.random() * 450;
      bugs.create(xCoord1, 10, 'bug1');
      bugs.create(xCoord2, 10, 'bug2');
      bugs.create(xCoord3, 10, 'bug3');
    }
  
    const bugGenLoop = this.time.addEvent({
      delay: 500,
      callback: bugGen,
      callbackScope: this,
      loop: true,
    });
  
    this.physics.add.collider(bugs, platforms, function (bug) {
      bug.destroy();
      gameState.score += 10;
      gameState.scoreText.setText(`Score: ${gameState.score}`);
    })
    
    this.physics.add.collider(gameState.player, bugs, () => {
      bugGenLoop.destroy();
      this.physics.pause();
      this.add.text(180, 250, 'Game Over', { fontSize: '15px', fill: '#000000' });
      this.add.text(152, 270, 'Click to Restart', { fontSize: '15px', fill: '#000000' });
      
          // Add your code below:
      this.input.on('pointerup', () =>{
        gameState.score = 0;
          this.scene.restart();
      });
    });
  }
  
  function update() {
    if (gameState.cursors.left.isDown) {
      gameState.player.setVelocityX(-160);
    } else if (gameState.cursors.right.isDown) {
      gameState.player.setVelocityX(160);
    }else if (this.input.activePointer.isDown) {
      if(this.input.activePointer.worldX < gameState.player.getCenter().x)
          gameState.player.setVelocityX(-160);
      else gameState.player.setVelocityX(160);
    }else {
      gameState.player.setVelocityX(0);
    }
  }
  
  const config = {
    type: Phaser.AUTO,
    width: 450,
    height: 500,
    backgroundColor: "b9eaff",
    physics: {
      default: 'arcade',
      arcade: {
        gravity: { y: 50 },
        enableBody: true,
      }
    },
    scene: {
      preload,
      create,
      update
    }
  };
  
  const game = new Phaser.Game(config);

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Bug Dodger</title>
  <style>
    canvas {
      width: 100%;
    }
  </style>

</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.16.2/dist/phaser.min.js"></script>

  <script defer src="game.js"></script>
</body>

</html>

现在我想在游戏中添加一个简单的移动功能，以便当我触摸玩家精灵左侧或右侧的任意位置时，玩家可以朝那个方向移动。目前我正在使用 cursors 属性，所以它只有在我按下箭头键时才有效，我该如何更改它以便它也可以在触摸时工作。请提供整个过程。提前致谢。

【问题讨论】：

获取接触点 -> 确定它是左对齐的。
或者干脆放两个大对撞机就够了。
你能解释一下如何更清楚地添加接触点吗？我已经尝试过了，但在实施时遇到了一些问题。
将您的代码添加到问题中，这样人们就可以看到它有什么问题。
上面的github链接我已经提供了。

标签： javascript phaser-framework

【解决方案1】：

您应该能够使用input.activePointer 做您想做的事。然后它可以使用鼠标和/或触摸。

function update() {
    if (gameState.cursors.left.isDown) {
      gameState.player.setVelocityX(-160);
    } else if (gameState.cursors.right.isDown) {
      gameState.player.setVelocityX(160);
    } else if (this.input.activePointer.isDown) {
      if(this.input.activePointer.worldX < gameState.player.getCenter().x)
          gameState.player.setVelocityX(-160);
      else gameState.player.setVelocityX(160);
    } else {
      gameState.player.setVelocityX(0);
    }
  }

【讨论】：