在这篇文章中，我们将探讨如何使用 NodeJS 和 Socket.io 创建一个在线石头剪子布游戏。这个简单的游戏使用 WebSockets 技术来实现实时通信，玩家可以在一个网页上与对手对战。
什么是 NodeJS 和 Socket.io？
NodeJS 是一个使用 JavaScript 编写的开源服务器端环境，它使用事件驱动和非阻塞 I/O 模型提供高效的并发能力。它有一个丰富的生态系统和非常强大的包管理器 npm，使开发更加容易。
Socket.io 是一个基于 WebSockets 的实时通信库，它允许我们使用高级的双向通信协议来实现实时通信。Socket.io 还支持轮询和基于流的传输方式，并提供了一些有用的功能，例如断开连接恢复和房间管理。
步骤一：搭建 NodeJS 服务器
首先，创建一个新的 NodeJS 项目并安装 Express 和 Socket.io：
mkdir rock-paper-scissors cd rock-paper-scissors npm init -y npm install express socket.io --save
接下来，让我们创建一个 app.js 文件，并在其中编写以下代码：
const express = require('express');
const socketio = require('socket.io');
const app = express();
const server = app.listen(3000, () => {
console.log('Server started on port 3000');
});
const io = socketio(server);这里我们使用 Express 创建了一个 HTTP 服务器，并在端口 3000 上进行监听。然后，我们使用 Socket.io 将服务器实例包装在一个 WebSocket 服务上。
步骤二：创建游戏房间
游戏将在房间中进行，因此我们需要一种方法来创建和管理不同的房间。在 app.js 文件中，添加以下代码：
-- -------------------- ---- -------
----- ----- - ---
------------------- -------- -- -
--- ------------
----------------- ------ -- -
-- ------------- -
--------------------------
-----------------------------
-
-- -------------- -
----------- - - -------- - --
-
-- -------------------- - -- -
----------- - -----
-----------------------------
-------------------------
--------------------- - ----- ----------- ---
- ---- -
--------------------
-
---
---这里我们创建了一个空对象 rooms 用于存储游戏房间。每当一个玩家加入房间时，我们将更新房间的 players 属性。如果一个房间没有达到它的最大玩家数（也就是 2），那么玩家可以加入该房间。
如果房间已经满了，我们向客户端发送 full 事件。否则，我们会添加一个新的玩家，并使用 socket.join 方法将玩家添加到房间中。接下来，我们向客户端发出 joined 事件，以便玩家知道他们已经成功加入了房间。
步骤三：实现游戏逻辑
游戏的主要逻辑就是比较两位玩家的出拳结果，然后决定谁是获胜者。在 app.js 文件中，添加以下代码：
-- -------------------- ---- -------
------------------- -------- -- -
-- ---
--- ------- - ---
------------------- ------ -- -
------------------ - ------------
----- ------ - -----------------------------
----- ---- - -------------------------------------
-- ---------- --- -- -
----- --------- -------- - ----------
-- ----------------- -- ----------------- -
----- -------- - -----------------
----- -------- - -----------------
--- -------
-- --------- --- --------- -
------ - ------
- ---- -- -
--------- --- ------ -- -------- --- ----------- --
--------- --- ---------- -- -------- --- -------- --
--------- --- ------- -- -------- --- -------
- -
------ - ----------
- ---- -
------ - ----------
-
----------------------------- - ------- ------- -------- ---
----------------------------- - ------- ------- -------- ---
------- - ---
-
-
---
---这里我们向 choices 对象中存储每个玩家的选择。当房间中有两个玩家做出选择时，我们需要比较它们的选择并计算出胜者。我们通过一个简单的条件语句来实现这一点。
最后，我们使用 io.to 方法将胜利者信息发送给每个玩家，并重置玩家选择的 choices 对象。
步骤四：实现前端逻辑
现在我们已经准备好为前端实现游戏逻辑了。首先，在 index.html 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- ----------------
------- ---------------------------------------
-------
------
-------- ----- -------------
---- ---------------
------ ----------- --------------- ------------------ ---- ----- --
------- ------------------------------
------
---- --------- --------------- -------
---
--------------------- ----- --------------------------
----
---
-------------------------- ----- ----------------------------
----
-- ----------------
-------- ---- ------------
---- -------------
------- -----------------------
------- -------------------------
------- -------------------------------
------
------
--------
----- ------ - -----
----------------- -- -- ----------- ---- -- ------- ---------
------------------- -- ---- -- -- -
-------------------------------------------------- - -------
--------------------------------------------- - --------
------------------------------------------- - -----
---
------------------- -- ------- ------ -- -- -
------------------------------------------------------ - -------
-- ------- --- ------ -
--------------------------------------------- - ----- - ------
- ---- -- ------- --- ---------- -
--------------------------------------------- - ---- ------
- ---- -
--------------------------------------------- - ---- -------
-
---
---------------------------------------------------------------- -- -- -
----- ---- - --------------------------------------------
------------------- ------
---
----------------------------------- ------------------------- -- -
-------------------------------- -- -- -
--------------------- - ------- --------- ---
---------------------------------------------------- - ----------
---
---
---------
-------
-------这个文件包含了一个简单的表单，供用户输入房间名。当用户点击 Join 按钮时，我们将使用 Socket.io 发送一个 join 事件，并向服务器传递房间名称。
当玩家加入一个房间时，我们会隐藏表单并显示游戏界面。然后，我们设置一个监听器来处理用户的游戏选择，并使用 Socket.io 发送一个 choice 事件。
服务器将在收到 choice 事件时自动处理每个玩家做出的选择，并向两个玩家发送 result 事件来更新游戏状态。
总结
在这篇文章中，我们探讨了如何使用 NodeJS 和 Socket.io 创建一个在线石头剪子布游戏。我们介绍了如何创建游戏房间、处理游戏逻辑和实现前端界面。希望这篇文章对你有所帮助，让你了解了如何使用 NodeJS 和 Socket.io 实现实时通信和简单游戏逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f822c6f6b2d6eab304483f