WebSocket 是一种实时通信协议，它能够在客户端和服务器之间建立持久的连接，可以让浏览器和服务器实时地进行双向通信。在前端开发中，经常会用到 WebSocket 进行实时通信。本文将介绍如何在 Deno 中使用 WebSocket 实现一个简单的游戏，并且附带示例代码，帮助读者更好地理解。
准备工作
在介绍具体实现之前，我们需要先了解一下如何在 Deno 中使用 WebSocket。Deno 的标准库中已经提供了 WebSocket 类，我们只需要引入即可：
import { WebSocket } from 'https://deno.land/std/ws/mod.ts';接下来，我们需要创建一个 WebSocket 服务器：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
---------------------- ------ -- ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
----------------- ----- ---------- ---------- ------- -------------------------
-
-
----- -------- ------------------- ---------- -
---------------- --------- -------------
--- ----- ------ ----- -- --- -
-- ------- ----- --- --------- -
--------------------- -------- -- -------
------------ ----- - - ------- -- ----------
-
-
-这个 WebSocket 服务器可以接受客户端的连接，并监听客户端发送的消息，并将收到的消息原样返回给客户端。现在，我们已经准备好构建一个简单的游戏了。
构建游戏
我们将构建一个简单的多人游戏，每个玩家都可以控制一个小球移动，每个玩家看到的场景都是一样的，他们可以看到其他玩家的小球的移动情况。为了简单起见，我们只考虑水平方向的移动。
我们的游戏需要满足以下需求：
- 多个玩家同时在线，他们可以看到相同的场景；
- 每个玩家控制自己的小球移动；
- 每次移动后，服务器会将所有球的位置信息广播给所有玩家；
为了满足上述需求，我们需要做以下几个步骤：
- 在服务器端维护每个玩家的位置信息；
- 监听每个连接的 WebSocket，收到消息后，更新对应玩家的位置信息，并广播所有玩家的位置信息给其他玩家。
下面是实现代码：
1. 服务器端维护每个玩家的位置信息
-- -------------------- ---- -------
---- ------ - -
--- -------
-- -------
--
----- -------- -------- - ---
-------- ------------- ------- -
------ -------------- -- ---- --- ----
-
-------- ------------- ------- -
--------------
---
-- --
---
-
-------- ---------------- ------- -
----- ----- - ------------------- -- ---- --- ----
-- ------ --- --- -
--------------------- ---
-
-
-------- -------------- ------- -- ------- -
----- ------ - --------------
-- -------- -
-------- - --
-
-我们定义了一个 Player 类型，表示一个玩家的信息，包括玩家的 id 和 x 坐标。我们使用数组 players 来存储所有在线的玩家。addPlayer 方法用于添加一个新的玩家，removePlayer 方法用于删除一个玩家，getPlayer 方法用于根据 id 查找对应的玩家，movePlayer 方法用于更新某个玩家的位置信息。
2. 监听 WebSocket 连接
-- -------------------- ---- -------
----- -------- ------------------- ---------- -
---------------- --------- -------------
----- -- - ----------------------------------
--------------
---------------------------------
--- ----- ------ ----- -- --- -
-- ------- ----- --- --------- -
----- - ----- ------- - - ------------------
-- ----- --- ------- -
-------------- -----------
-------------------
-
-
-
-----------------
-------------------
-------- ------------------ -
----- --- - ------------------------
--- ------ - -- -------- -
----- -------- - ----------------------
-- ---------- -
-------------------
-
-
-
-首先，我们生成一个随机的 id，并将这个玩家添加到 players 数组中。为了让新加入的玩家能够看到其他玩家的位置信息，我们将 players 数组序列化为 JSON 字符串，并发送给客户端。
接着，我们监听 WebSocket 的消息事件，收到消息后解析消息类型和消息体，并根据消息类型更新对应的玩家位置信息。更新完毕后，我们调用 broadcastPlayers 方法将所有玩家的位置信息广播给所有在线玩家。
最后，我们在 WebSocket 的关闭事件中将当前玩家从 players 数组中删除，并再次调用 broadcastPlayers 方法，确保所有玩家都知道当前玩家已经离线。
当有新的玩家连接时，服务器会将它的 id 和初始位置信息发送给所有已连接的玩家，让所有玩家能够看到新的玩家进入。
3. 客户端实现
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
-------
------
------- ----------- ----------------------
--------
----- ------ - ---------------------------------
----- --- - ------------------------
--- ---
--- ------- - ---
----- -- - --- ------------------------------------
--------- - -------- -- -
---------------------- ------------
--
------------ - -------- ------- -
------- - -----------------------
---------------- -- ------------- ---------------
----------------- -- -
----------------- ---- --- ----
---
--
---------- - -------- -- -
---------------------- ---------
--
---------------------------------- -------- ------- -
------ ------------ -
---- ------------
-----------
------
---- -------------
------------
------
-
---
-------- ---------- -
----- - - -------------- -- ---- --- ----- - --
------------------------
----- -------
-------- - - --
----
-
-------- ----------- -
----- - - -------------- -- ---- --- ----- - --
------------------------
----- -------
-------- - - --
----
-
------------ - -------- ------- -
-- ----- -
-- - ----------------------------------
-
------- - -----------------------
----- -- - -------------- -- ---- --- ----
-- ---- -
---------------------------- - --------
---------------- -- ------------- ---------------
----------------- -- -
----------------- ---- --- ----
---
- ---- -
---------------------------- - -------
---------------- -- ------------- ---------------
--------------------- --- ----- ------- -- --------- ---- -----
-
--
---------
-------
-------客户端的实现相对简单。首先，我们创建一个 Canvas 元素，用于显示所有玩家的位置。然后，我们创建一个 WebSocket 连接，监听 open 事件，确保已经成功连接。
接着，我们监听用户的键盘事件，根据用户的输入发送相应的消息给服务器。在接收到服务器的位置信息后，我们将所有玩家的位置信息绘制在 Canvas 上。
当用户进入游戏时，客户端会生成一个随机的 id，并在收到服务器发送的所有玩家信息时进行判断。如果当前玩家存在于玩家列表中，则绘制 Canvas，并将背景色设置为白色；否则，绘制一个等待信息，并将背景色设置为灰色。
总结
通过本文，我们了解了如何在 Deno 中使用 WebSocket，实现了一个简单的多人游戏。在这个过程中，我们学习了如何在服务器端维护多个玩家的位置信息，如何监听客户端的 WebSocket 连接，并实现双向通信。这些知识不仅适用于游戏开发，也可以应用于实时聊天、在线编辑等场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f4dc348841e9894ef8a5a