简介
Socket.io 是一个开放源代码的 JavaScript 库，使用 WebSockets 协议进行双向通信，并提供了更高层次的抽象，以便于开发实时应用程序，如实时聊天和在线游戏等。
本文将介绍如何使用 Socket.io 创建一个基于位置的实时多人在线游戏，并提供详细的学习和指导意义。我们将使用 Express 和 Socket.io 来创建基于 Node.js 的服务器，使用 HTML、CSS 和 JavaScript 来创建基于浏览器的客户端。我们还将使用一组地图和一组地标来创建游戏世界，并将在其中添加多个玩家，以便演示所有功能。
准备工作
在开始创建游戏之前，我们需要确保我们已经安装了以下软件：
- Node.js：一个用于构建后端应用程序的 JavaScript 运行时环境。
- Express：一个用于构建 Web 应用程序的 Node.js 框架。
- Socket.io：一个用于实现实时应用程序的 JavaScript 库。
- Git：一个版本控制系统，用于跟踪代码更改。
确保您的电脑已经安装了这些软件之后，我们可以开始创建应用程序了。
创建服务器
- 创建一个名为
multiplayer-game的新文件夹，并使用终端导航到这个文件夹中。 - 初始化 npm 项目：
npm init --yes。 - 安装必要的依赖：
npm install express socket.io。 - 创建一个名为
server.js的新文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- -------- - --------------------- ----- --- - ---------- ----- ------ - ----------------------- ----- -- - ----------------- -------------------------------- - ------------ ------------------- -- -- - ------------------- ------- -- ---- ------- ---
- 在文件夹中创建一个名为
public的新文件夹，并在其中创建一个名为index.html的新文件。 - 将以下代码添加到
index.html文件中：
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------------
-------
------
------- ---------------------------------------
--------
----- ------ - -----
-------------------- -- -- -
---------------------- -- ---------
---
---------
-------
-------- 运行服务器：
node server.js。 - 在浏览器中打开
http://localhost:3000。您应该会在控制台中看到Connected to server信息。
现在我们已经创建了一个简单的 Express 服务器，并使用 Socket.io 进行了初始化。我们还没有添加任何游戏逻辑，但是现在我们可以接收来自客户端的连接请求，并使用控制台输出服务端的一些信息。
创建游戏世界
在我们开始添加游戏逻辑之前，我们需要创建一个地图，玩家可以在其中移动。我们将使用一个名为 Leaflet 的开源 JavaScript 库来创建地图，它是一个用于创建交互式地图的流行库。
- 在
public文件夹中创建一个名为leaflet的新文件夹。 - 将下面的链接复制到
index.html文件的<head>标签中：
<link rel="stylesheet" href="/leaflet/leaflet.css" integrity="sha512-Hi3r3RXFFwsZeNA9XnXN0c37pEFZ1lLgLzN/yybe/T/k2ORosfMFa9BvSy8GmWV5YL5Q2c5sdtrgJ8PlRUwL6w==" crossorigin="" />
- 在
<body>标签下添加以下代码，创建一个 Leaflet 地图：
-- -------------------- ---- -------
---- ---------------
------- -----------------------------------
--------
----- --- - ------------------------------ ----------- ----
----- ----- - ------------
-----------------------------------------------------
-
-------- ---
-
--
-----------------
---------
-------
---- -
------- ------
------ ------
-
--------现在我们已经创建了一个 Leaflet 地图，玩家可以在其中移动。我们需要添加一些地标来使我们的游戏世界有意义。
- 在
public文件夹中创建一个名为markers.js的新文件。 - 在
markers.js文件中添加以下代码，创建一些地标：
-- -------------------- ---- -------
----- ------- - -
-
------- --------- -----------
------------ ------- ---
--
-
------- --------- -----------
------------ ------- ---
--
-
------- --------- -----------
------------ ------- ---
--
--
-------------- - --------- 在
server.js文件中添加以下代码，以便在客户端中获取这些地标数据：
const markers = require("./public/markers");
io.on("connection", (socket) => {
console.log("New client connected");
socket.emit("markers", markers);
});- 在
index.html文件中添加以下代码，以在地图上显示这些地标：
-- -------------------- ---- -------
---- ---------------
------- -----------------------------------
------- ---------------------------------------
--------
----- --- - ------------------------------ ----------- ----
----- ----- - ------------
-----------------------------------------------------
-
-------- ---
-
--
-----------------
----- ------ - -----
-------------------- -- -- -
---------------------- -- ---------
---
-------------------- --------- -- -
------------------------ -- -
----- ------------- - -----------------------------------
--------------------------------------------
---
---
---------
-------
---- -
------- ------
------ ------
-
--------现在我们已经创建了一个地图和一些地标。我们需要添加一些玩家，以便他们可以在游戏中移动和与其他玩家交互。
创建玩家
- 在
public文件夹中创建一个名为player.js的新文件。 - 在
player.js文件中添加以下代码，创建一个玩家类：
-- -------------------- ---- -------
----- ------ -
--------------- ----- -- -- -
------- - ---
--------- - -----
------ - --
------ - --
----------- - ---
---------- - ------
-
------------- -
--------------------
------------------- ------- ------------ -- - - -------- -------
----------------- - -----------
---------------
----------------- - --
------------------- - ----------
-----------------
-
-
-------------- - -------- 在
server.js文件中添加以下代码，以便在客户端中获取玩家数据：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ------ - ---------------------------
----- ------- - ---
------------------- -------- -- -
---------------- ------ ------------
----- -------- - ----------
----------------- - --- ---------------- --------- ------ ---------
---------------------- ---------
---------------------- ---------
----------------------- -- -- -
------ ------------------
---
----------------- ----------- -- -
----- ------ - ------------------
------ ----------- -
---- -----
-------- -- --
------
---- -------
-------- -- --
------
---- -------
-------- -- --
------
---- --------
-------- -- --
------
--------
------
-
------------------ ---------
---
---- 在
index.html文件中添加以下代码，以在地图上显示这些玩家：
-- -------------------- ---- -------
---- ---------------
------- ---------------------
------- -----------------------------------
------- ---------------------------------------
------- --------------------------
--------
----- --- - ------------------------------ ----------- ----
----- ----- - ------------
-----------------------------------------------------
-
-------- ---
-
--
-----------------
----- ------ - -----
--- ------- - ---
-------- ------------- -
----- ------ - ----------------------------------
----- ------- - ------------------------
-------------------- -- ------------- ---------------
--------------------------------------- -- -
---------------------
---
-
-------------------- -- -- -
---------------------- -- ---------
---
-------------------- --------- -- -
------------------------ -- -
----- ------------- - -----------------------------------
--------------------------------------------
---
---
-------------------- ------------ -- -
------- - -----------
--------------
---
------------------------------------ ------- -- -
-- ----------- --- ---------- -
------------------- ------
- ---- -- ----------- --- ------------ -
------------------- --------
- ---- -- ----------- --- ------------ -
------------------- --------
- ---- -- ----------- --- ------------- -
------------------- ---------
-
---
---------
-------
---- -
------- ------
------ ------
-
------- -
--------- ---------
---- --
----- --
--------------- -----
-
--------现在我们已经创建了一些玩家，并可以在地图上看到他们移动。
创建实时交互
现在我们已经创建了一个基于位置的多人在线游戏，玩家可以在游戏中移动。但是，我们还没有添加任何实时交互，玩家之间的移动不会被其他玩家看到。我们将使用 Socket.io 来实现这个功能。
- 在
server.js文件中添加以下代码：
socket.on("move", (direction) => {
// ...
io.emit("players", players);
socket.broadcast.emit("move", { playerId, direction });
});- 在
index.html文件中添加以下代码：
-- -------------------- ---- -------
----------------- -- --------- --------- -- -- -
-- ------------------- -
----- ------ - ------------------
------ ----------- -
---- -----
-------- -- --
------
---- -------
-------- -- --
------
---- -------
-------- -- --
------
---- --------
-------- -- --
------
--------
------
-
--------------
-
---现在我们已经创建了一个基于位置的实时多人在线游戏，可以在其中看到其他玩家移动。玩家可以在地图上移动，并在其他人移动时看到他们的位置。
结论
在本文中，我们展示了如何使用 Socket.io 创建一个基于位置的实时多人在线游戏。我们使用 Leaflet 库创建了一个地图和一些地标，使用了包含名称、位置和颜色的玩家类创建了几个玩家，创建了一个 Express 服务器和 Socket.io。我们还通过向服务器发送信息并将其广播到所有其他客户端来添加了实时交互。
本文中的代码可以作为起点，您可以将其扩展为自己的在线游戏。感谢您的耐心阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710a99e37e68564411da680