javascript - 在 Phaser.js 中添加移动功能

问题描述

我使用 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 属性，所以它只有在我按下箭头键时才有效，我该如何更改它以便它也可以在触摸时工作。请提供整个过程。提前致谢。

标签： javascriptphaser-framework

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); } }

javascript - 在 Phaser.js 中添加移动功能

问题描述

解决方案

推荐阅读