Node.js + Socket.io 实现多人竞技游戏功能-JavaScript中文网-JavaScript教程资源分享门户

前言

在互联网时代，游戏已经成为了人们生活中重要的娱乐方式。而随着移动互联网的普及，手机游戏、网页游戏也越来越受到人们的关注。在这些游戏中，多人竞技游戏是一种极为受欢迎的游戏类型。本文将介绍如何使用 Node.js 和 Socket.io 实现多人竞技游戏功能，并提供示例代码和指导意义。

Node.js 和 Socket.io 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以使 JavaScript 运行在服务器端。它具有高效、轻量、易扩展等优点，被广泛应用于 Web 后端开发、命令行工具等领域。

Socket.io 是一个基于 WebSocket 的实时通信库，可以实现客户端与服务器之间的双向通信。它支持多种传输方式，包括 WebSocket、 AJAX 长轮询、JSONP 等。Socket.io 提供了简单易用的 API，可以方便地实现实时通信功能。

多人竞技游戏功能实现

服务器端代码

首先，我们需要在服务器端创建一个 Socket.io 实例，并监听客户端的连接事件。代码如下：

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');
});

当客户端连接到服务器时，会触发 connection 事件，我们可以在回调函数中处理连接事件。在本文中，我们将实现一个简单的多人竞技游戏，每个客户端代表一个玩家。因此，我们需要在连接事件中处理每个客户端的加入和离开。

let players = [];

io.on('connection', (socket) => {
  console.log('a user connected');

  // 处理加入事件
  socket.on('join', (name) => {
    console.log(`${name} joined`);
    players.push({ id: socket.id, name });
    io.emit('players', players);
  });

  // 处理离开事件
  socket.on('disconnect', () => {
    console.log(`${socket.id} disconnected`);
    players = players.filter((player) => player.id !== socket.id);
    io.emit('players', players);
  });
});

在上面的代码中，我们定义了一个 players 数组来保存所有玩家的信息，每个玩家都有一个 id 和一个 name。当客户端发送 join 事件时，表示玩家加入游戏，我们将其信息添加到 players 数组中，并通过 players 事件向所有客户端广播当前玩家列表。当客户端断开连接时，表示玩家离开游戏，我们从 players 数组中删除该玩家，并向所有客户端广播当前玩家列表。

为了实现多人竞技游戏，我们需要在服务器端处理玩家之间的交互。在本文中，我们将实现一个简单的坦克大战游戏，每个玩家控制一个坦克，可以移动、旋转、发射子弹。因此，我们需要在服务器端处理玩家的移动、旋转和发射子弹事件。

io.on('connection', (socket) => {
  console.log('a user connected');

  let player = null;

  // 处理加入事件
  socket.on('join', (name) => {
    console.log(`${name} joined`);
    player = { id: socket.id, name };
    players.push(player);
    io.emit('players', players);
  });

  // 处理离开事件
  socket.on('disconnect', () => {
    console.log(`${socket.id} disconnected`);
    players = players.filter((player) => player.id !== socket.id);
    io.emit('players', players);
  });

  // 处理移动事件
  socket.on('move', (direction) => {
    if (!player) return;
    player.direction = direction;
    io.emit('move', player);
  });

  // 处理旋转事件
  socket.on('rotate', (angle) => {
    if (!player) return;
    player.angle = angle;
    io.emit('rotate', player);
  });

  // 处理发射子弹事件
  socket.on('fire', () => {
    if (!player) return;
    const bullet = { playerId: player.id, x: player.x, y: player.y, angle: player.angle };
    io.emit('fire', bullet);
  });
});

在上面的代码中，我们定义了一个 player 变量来保存当前客户端所代表的玩家信息。当客户端发送 join 事件时，我们将 player 变量设置为当前玩家信息。在移动、旋转和发射子弹事件中，我们将 player 变量的方向、角度、位置等信息更新，并通过 move、rotate、fire 事件向所有客户端广播更新后的信息。

客户端代码

在客户端，我们需要创建一个 Socket.io 实例，并连接到服务器。连接成功后，我们需要发送 join 事件告诉服务器当前玩家的名字。

const socket = io();

socket.on('connect', () => {
  console.log('connected');
  const name = prompt('请输入你的名字');
  socket.emit('join', name);
});

在上面的代码中，我们使用 io() 创建了一个 Socket.io 实例，并通过 connect 事件监听连接成功事件。在连接成功后，我们通过 prompt 弹出对话框，让用户输入名字，并发送 join 事件告诉服务器当前玩家的名字。

接下来，我们需要监听服务器发送的玩家列表，更新游戏场景中的玩家信息。

socket.on('players', (players) => {
  console.log(players);
});

在上面的代码中，我们监听了 players 事件，并在回调函数中打印玩家列表。在实际开发中，我们需要根据玩家列表更新游戏场景中的玩家信息。

最后，我们需要处理玩家的移动、旋转和发射子弹事件，并向服务器发送相应的事件。

document.addEventListener('keydown', (event) => {
  switch (event.code) {
    case 'ArrowUp':
      socket.emit('move', 'up');
      break;
    case 'ArrowDown':
      socket.emit('move', 'down');
      break;
    case 'ArrowLeft':
      socket.emit('rotate', '-=10');
      break;
    case 'ArrowRight':
      socket.emit('rotate', '+=10');
      break;
    case 'Space':
      socket.emit('fire');
      break;
  }
});

在上面的代码中，我们监听了键盘按下事件，并根据按键的不同向服务器发送不同的事件。在实际开发中，我们需要根据事件更新游戏场景中的玩家信息。

总结

本文介绍了如何使用 Node.js 和 Socket.io 实现多人竞技游戏功能，并提供了详细的示例代码和指导意义。在实际开发中，我们可以根据自己的需求，进一步扩展和优化代码，实现更加丰富和复杂的多人竞技游戏。

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