使用 Socket.io 和 Phaser.js 创建实时对战游戏-JavaScript中文网-JavaScript教程资源分享门户

介绍

Socket.io 是一个基于 Node.js 的实时应用程序库，可用于创建实时 Web 应用程序，如聊天应用程序和多人游戏。而 Phaser.js 则是一个为浏览器打造的快速、免费、开源的 HTML5 游戏框架。结合 Socket.io 和 Phaser.js，我们可以很方便地创建一个实时对战游戏。

在本文中，我们将介绍如何使用 Socket.io 和 Phaser.js 创建实时对战游戏，包括如何设置和启动 Socket.io 服务器、如何将应用程序与 Socket.io 连接、如何使游戏运行在多个客户端之间等。

环境

在开始前，请确保你已经安装了以下环境：

Node.js： v12.16.3 或更新版本
npm： v6.14.7 或更新版本

创建项目

首先，我们需要创建一个项目文件夹，然后使用 npm 安装必要的依赖项。

mkdir socket-io-phaser
cd socket-io-phaser
npm init -y
npm install phaser socket.io --save

在这个项目中，我们使用 Phaser.js 和 Socket.io，因此我们需要将它们作为依赖项添加到项目中。

创建服务器

接下来，我们将创建一个名为 server.js 的文件，用于设置和启动 Socket.io 服务器。

// javascriptcn.com 代码示例
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);

const port = process.env.PORT || 3000;

http.listen(port, () => {
  console.log(`服务器启动并运行在端口 ${port}`);
});

这里我们使用 Express.js 创建一个 HTTP 服务器，并使用 Socket.io 将其连接到客户端。启动服务器并运行在本地的端口 3000。

连接到客户端

现在我们已经创建了服务器，我们需要在客户端中使用 Socket.io 来连接到服务器并启动游戏。下面是一个示例 HTML 文件，用于连接到服务器并加载游戏：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.io and Phaser.js</title>
  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  <script src="https://cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script>
</head>
<body>
  <script>
    const socket = io('http://localhost:3000');
    const game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
      preload: preload,
      create: create,
      update: update
    });
    function preload() {
      // 游戏资源的预加载
    }
    function create() {
      // 创建游戏场景
    }
    function update() {
      // 更新游戏状态
    }
  </script>
</body>
</html>

这个文件中，我们首先使用 Socket.io 的客户端库将客户端连接到我们创建的服务器。然后，我们使用 Phaser.js 创建游戏对象，并在创建、更新游戏状态时分别提供对应的函数。

游戏实现

现在，我们已经创建了服务器和客户端的连接，下一步是实现游戏。我们将在游戏中实现一个多人飞机大战游戏。每个玩家将操纵一架飞机，在游戏中可以移动、攻击敌人，然后在飞行中避免敌人的攻击。

飞机移动

首先，我们需要让玩家移动自己的飞机。我们需要通过发送消息由客户端向服务器发送玩家移动的指令，然后将其广播到其他客户端，以保持游戏状态同步。

客户端代码：

// javascriptcn.com 代码示例
let player;

function create() {
  // 创建玩家飞机
  player = game.add.sprite(400, 300, 'player');
  player.anchor.setTo(0.5, 0.5);

  // 监听玩家移动消息
  socket.on('movement', function(data) {
    player.x = data.x;
    player.y = data.y;
  });
}

function update() {
  // 发送玩家移动指令
  if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
    socket.emit('movement', { x: player.x - 5, y: player.y });
  } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
    socket.emit('movement', { x: player.x + 5, y: player.y });
  } else if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
    socket.emit('movement', { x: player.x, y: player.y - 5 });
  } else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
    socket.emit('movement', { x: player.x, y: player.y + 5 });
  }
}

服务器端代码：

// javascriptcn.com 代码示例
io.on('connection', function(socket) {
  // 监听玩家移动消息
  socket.on('movement', function(data) {
    socket.broadcast.emit('movement', {
      id: socket.id,
      x: data.x,
      y: data.y
    });
  });
});

在上述代码中，客户端首先创建了一个玩家飞机对象，并监听服务器发送的移动指令。游戏运行时，玩家可以通过键盘控制飞机的移动，同时向服务器发送移动指令。

服务器端监听玩家移动消息，一旦接收到移动消息则广播给其他客户端。移动消息包含玩家的 ID 和位置信息，其他客户端收到消息后更新相应玩家的位置。

玩家攻击

除了移动飞机之外，我们还需要在游戏中实现玩家攻击。类似于移动，我们可以通过发送消息由客户端向服务器发送玩家攻击敌人的指令，然后将其广播到其他客户端，以保持游戏状态同步。

客户端代码：

// javascriptcn.com 代码示例
function preload() {
  game.load.image('bullet', 'assets/bullet.png');
}

function create() {
  // 创建玩家飞机和子弹
  player = game.add.sprite(400, 300, 'player');
  player.anchor.setTo(0.5, 0.5);
  bullets = game.add.group();
  bullets.enableBody = true;
  bullets.physicsBodyType = Phaser.Physics.ARCADE;
  bullets.createMultiple(50, 'bullet');
  bullets.setAll('checkWorldBounds', true);
  bullets.setAll('outOfBoundsKill', true);

  // 监听玩家攻击消息
  socket.on('fire', function(data) {
    // 创建子弹对象并设置初始位置
    const bullet = bullets.getFirstExists(false);
    if (bullet) {
      bullet.reset(data.x, data.y);
      bullet.rotation = game.physics.arcade.moveToPointer(bullet, 1000, game.input.activePointer, 500);
    }
  });
}

function update() {
  // 发送攻击指令
  if (game.input.activePointer.isDown) {
    socket.emit('fire', { x: player.x, y: player.y });
  }
}

服务器端代码：

// javascriptcn.com 代码示例
io.on('connection', function(socket) {
  // 监听玩家攻击消息
  socket.on('fire', function(data) {
    socket.broadcast.emit('fire', {
      id: socket.id,
      x: data.x,
      y: data.y
    });
  });
});

敌人的生成和移动

玩家需要攻击敌人才能获得游戏分数，因此我们需要在游戏场景中生成敌人，并使其沿着指定路径移动。

客户端代码：

// javascriptcn.com 代码示例
function create() {
  // 创建玩家飞机和子弹
  // ...

  // 创建敌人和敌人路径
  enemies = game.add.group();
  enemies.enableBody = true;
  createEnemiesPath();

  // 监听敌人移动消息
  socket.on('enemyMove', function(data) {
    let enemy = getEnemyById(data.id);
    if (enemy) {
      enemy.x = data.x;
      enemy.y = data.y;
    }
  });

  // 监听敌人攻击消息
  socket.on('enemyFire', function(data) {
    // 创建敌人子弹
  });
}

function createEnemiesPath() {
  // 创建敌人移动路径
  // ...
  game.time.events.repeat(Phaser.Timer.SECOND * 2, 10, createEnemy, this);
}

function createEnemy() {
  // 在路径上产生敌人
}

function getEnemyById(id) {
  // 获取ID对应敌人对象
}

服务器端代码：

// javascriptcn.com 代码示例
io.on('connection', function(socket) {
  // 发送敌人移动消息
  setInterval(function() {
    enemies.forEachAlive(function(enemy) {
      socket.broadcast.emit('enemyMove', {
        id: enemy.id,
        x: enemy.x,
        y: enemy.y
      });
    });
  }, 10);

  // 发送敌人攻击消息
  setInterval(function() {
    enemies.forEachAlive(function(enemy) {
      if (Math.random() > 0.95) {
        socket.broadcast.emit('enemyFire', {
          x: enemy.x,
          y: enemy.y
        });
      }
    });
  }, 1000);
});

在上述代码中，我们使用路径生成敌人，并通过发送消息将每个敌人的位置广播到其他客户端中。我们还通过定时器实现了每隔一定时间触发敌人攻击。当一个敌人射出子弹时，将消息发送到其他客户端上。

总结

在本文中，我们学习了如何结合 Socket.io 和 Phaser.js 创建一个实时对战游戏。我们介绍了如何设置和启动 Socket.io 服务器、如何将应用程序与 Socket.io 连接，如何使游戏运行在多个客户端之间等。我们还提供了完整的示例代码，可用于构建基于 Socket.io 和 Phaser.js 的游戏应用程序。

Socket.io 和 Phaser.js 的完美结合使得我们可以很方便地创建实时对战游戏。我们希望本文可以为您提供深入了解 Socket.io 和 Phaser.js 的指导意义，并帮助您创建出更棒的实时对战游戏。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cdc367d4982a6ebe67c50