Node.js 入门系列（六）：网页版石头剪刀布小游戏

2023-09-05 14:11:27

让你的石头剪刀布游戏突破界限：使用 Node.js 和 Socket.IO 构建一个在线版本

在快节奏的数字时代，经典游戏正经历着数字化变革，变得比以往任何时候都更具吸引力。石头剪刀布也不例外，这个简单而激动人心的游戏正以其在线版本席卷网络。本文将指导你如何使用 Node.js 和 Socket.IO 构建一个网页版的石头剪刀布游戏，让你可以与朋友和家人在虚拟世界中一较高下。

建立服务器：游戏的基石

服务器是游戏的核心，负责处理玩家输入、计算结果并向客户端发送数据。使用 Node.js 和 Express.js，我们可以轻松地搭建一个服务器，如下代码所示：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

这将创建一个服务器，它将在端口 3000 上监听请求，并在收到请求时提供游戏的主页（index.html）。

构建客户端：游戏的界面

客户端负责处理用户交互，并通过向服务器发送玩家的选择来推动游戏进程。使用 HTML、CSS 和 JavaScript，我们可以创建一个用户友好的界面：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
</head>
<body>
  <h1>石头剪刀布</h1>
  <button id="rock">石头</button>
  <button id="paper">剪刀</button>
  <button id="scissors">布</button>

  <div id="result"></div>

  <script>
    const socket = io();

    const buttons = document.querySelectorAll('button');
    buttons.forEach((button) => {
      button.addEventListener('click', () => {
        const choice = button.id;
        socket.emit('choice', choice);
      });
    });

    socket.on('result', (data) => {
      const result = document.getElementById('result');
      result.innerHTML = data;
    });
  </script>
</body>
</html>

这个界面包含三个按钮，分别代表石头、剪刀和布。当玩家点击一个按钮时，客户端通过 Socket.IO 向服务器发送玩家的选择。

实现游戏逻辑：胜负的关键

服务器收到玩家的选择后，将计算结果并将其返回给客户端。以下是实现游戏逻辑的代码：

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

io.on('connection', (socket) => {
  socket.on('choice', (choice) => {
    const computerChoice = Math.floor(Math.random() * 3); // 电脑的随机选择
    const results = ['平局', '你赢了', '你输了'];
    const result = results[computerChoice - choice + 1]; // 计算结果

    socket.emit('result', result);
  });
});