如何在Facebook即时游戏移动端用Phaser 2 CE创建可触发按钮

你遇到的这个问题我之前开发Phaser 2项目时也碰到过——桌面端按钮点击正常，到移动端就完全没反应，结合你的代码和截图来看，咱们可以从这几个方向排查：

首先还原你的问题场景，当前实现的代码如下：

var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game', { preload: preload, create: create, update: update }); 

function preload () { 
    game.load.image('logo', 'assets/phaser2.png'); 
    game.load.image("upArrow", "assets/up.png"); 
} 

function create () { 
    // Initialize player 
    //player = game.add.sprite(20, 20, 'logo'); 
    game.device.desktop || addMobileInputs(); 
} 

function addMobileInputs() { 
    upButton = game.add.sprite(40, 40, "upArrow"); 
    upButton.inputEnabled = !0; 
    upButton.events.onInputDown.add(myHandler, this); 
} 

function myHandler() { 
    alert("up"); 
} 

function update() { } 

当前按钮的显示效果：

接下来是具体的解决方法：

• 修正设备检测逻辑（最可能的问题）
  你当前用的game.device.desktop || addMobileInputs()逻辑虽然语法上没问题，但可读性差，容易搞混逻辑。其实你想实现的是“非桌面设备才添加移动端按钮”，建议改成明确的if判断，避免逻辑出错：

  function create () {
      // Initialize player
      //player = game.add.sprite(20, 20, 'logo');
      if (!game.device.desktop) { // 只有移动端才执行
          addMobileInputs();
      }
  }
  

• 启用触摸输入支持
  Phaser 2 CE在移动端默认可能没有完全开启触摸事件支持，你可以在游戏初始化时明确配置，或者在create函数里启用：

  // 方法1：在游戏配置中添加输入设置
  var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game', { 
      preload: preload, 
      create: create, 
      update: update,
      input: {
          touch: true,
          mouse: true,
          touchCapture: true // 确保触摸事件被Phaser捕获
      }
  });
  
  // 方法2：在create函数中启用
  function create () {
      game.input.touch.preventDefault = false; // 防止默认触摸行为干扰
      game.input.enabled = true;
      // ... 其他代码
  }
  

• 改用移动端友好的事件绑定
  onInputDown虽然能处理点击，但在移动端更推荐使用onTap事件，它专门针对触摸点击优化，避免长按、滑动等误触：

  function addMobileInputs() { 
      upButton = game.add.sprite(40, 40, "upArrow"); 
      upButton.inputEnabled = true; // 用true代替!0，可读性更好
      upButton.events.onTap.add(myHandler, this); // 替换onInputDown为onTap
  }
  

• 阻止浏览器默认触摸行为
  有时候浏览器的默认触摸操作（比如滚动、缩放）会抢占Phaser的触摸事件，你可以在页面CSS中添加：

  body {
      touch-action: none; /* 阻止浏览器默认触摸行为 */
      margin: 0;
      padding: 0;
  }
  

按照上面的步骤调整后，你的移动端按钮应该就能正常响应点击了。

内容的提问来源于stack exchange，提问作者albator2018