Блог

Главная - Вопросы по программированию - Добавление мобильной функциональности в Phaser.js

Добавление мобильной функциональности в Phaser.js

#javascript #phaser-framework

#javascript #phaser-фреймворк

Вопрос:

Я создал простую игру для устранения ошибок, используя Phaser.js исходный код можно найти ниже:

https://&ithub.com/ankur&132/phaser-codecademy-projects/tree/master/Bu& Dod&er Game

И вы можете посмотреть живую демонстрацию здесь: https://codepen.io/ankur&132/pen/jOW&Xer

 function preload() {
    this.load.ima&e('bu&1', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/bu&_1.pn&');
    this.load.ima&e('bu&2', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/bu&_2.pn&');
    this.load.ima&e('bu&3', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/bu&_3.pn&');
    this.load.ima&e('platform', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/platform.pn&');
    this.load.ima&e('codey', 'https://s3.amazonaws.com/codecademy-content/courses/learn-phaser/physics/codey.pn&');
  }
  
  const &ameState = {
    score: 0
  };
  
  function create() {
    &ameState.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();
  
    &ameState.scoreText = this.add.text(195, 485, 'Score: 0', { fontSize: '15px', fill: '#000000' });
  
    &ameState.player.setCollideWorldBounds(true);
  
    this.physics.add.collider(&ameState.player, platforms);
    
      &ameState.cursors = this.input.keyboard.createCursorKeys();
  
    const bu&s = this.physics.add.&roup();
  
    function bu&Gen () {
      const xCoord1 = Math.random() * 450;
      const xCoord2 = Math.random() * 450;
      const xCoord3 = Math.random() * 450;
      bu&s.create(xCoord1, 10, 'bu&1');
      bu&s.create(xCoord2, 10, 'bu&2');
      bu&s.create(xCoord3, 10, 'bu&3');
    }
  
    const bu&GenLoop = this.time.addEvent({
      delay: 500,
      callback: bu&Gen,
      callbackScope: this,
      loop: true,
    });
  
    this.physics.add.collider(bu&s, platforms, function (bu&) {
      bu&.destroy();
      &ameState.score  = 10;
      &ameState.scoreText.setText(`Score: ${&ameState.score}`);
    })
    
    this.physics.add.collider(&ameState.player, bu&s, () =&&t; {
      bu&GenLoop.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', () =&&t;{
        &ameState.score = 0;
          this.scene.restart();
      });
    });
  }
  
  function update() {
    if (&ameState.cursors.left.isDown) {
      &ameState.player.setVelocityX(-160);
    } else if (&ameState.cursors.ri&ht.isDown) {
      &ameState.player.setVelocityX(160);
    }else if (this.input.activePointer.isDown) {
      if(this.input.activePointer.worldX < &ameState.player.&etCenter().x)
          &ameState.player.setVelocityX(-160);
      else &ameState.player.setVelocityX(160);
    }else {
      &ameState.player.setVelocityX(0);
    }
  }
  
  const confi& = {
    type: Phaser.AUTO,
    width: 450,
    hei&ht: 500,
    back&roundColor: "b9eaff",
    physics: {
      default: 'arcade',
      arcade: {
        &ravity: { y: 50 },
        enableBody: true,
      }
    },
    scene: {
      preload,
      create,
      update
    }
  };
  
  const &ame = new Phaser.Game(confi&);
    
 <html lan&="en"&&t;

<head&&t;
  <meta charset="UTF-8" /&&t;
  <title&&t;Bu& Dod&er</title&&t;
  <style&&t;
    canvas {
      width: 100%;
    }
  </style&&t;

</head&&t;

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

  <script defer src="&ame.js"&&t;</script&&t;
</body&&t;

</html&&t;

Теперь я хочу добавить в игру простую мобильную функциональность, чтобы, когда я касаюсь любого места слева или справа от спрайта игрока, игрок мог двигаться в этом направлении. В настоящее время я использую свойство cursors, поэтому оно работает только при нажатии клавиш со стрелками, как я могу изменить его, чтобы оно также могло работать при касании.
Пожалуйста, предоставьте всю процедуру. Заранее спасибо.

Комментарии:

1. получить точку касания -&&t; решить, что она оставлена правильной.

2. или, проще говоря, двух больших коллайдеров достаточно для этой демонстрации.

3. Можете ли вы объяснить, как добавить точку касания более понятно? Я пробовал это, но у меня возникли некоторые проблемы с его реализацией.

4. Добавьте свой код к вопросу, чтобы люди могли увидеть, что с ним не так.

5. Я предоставил ссылку на &ithub выше.

Ответ №1:

Вы должны быть в состоянии делать то, что вы хотите с input.activePointer . Затем он будет работать с помощью мыши и / или прикосновения.

 function update() {
    if (&ameState.cursors.left.isDown) {
      &ameState.player.setVelocityX(-160);
    } else if (&ameState.cursors.ri&ht.isDown) {
      &ameState.player.setVelocityX(160);
    } else if (this.input.activePointer.isDown) {
      if(this.input.activePointer.worldX < &ameState.player.&etCenter().x)
          &ameState.player.setVelocityX(-160);
      else &ameState.player.setVelocityX(160);
    } else {
      &ameState.player.setVelocityX(0);
    }
  }