正文

揭秘HTML5 WebSocket实现“你画我猜”游戏的实战代码攻略

/0 浏览量
0320

引言

HTML5 WebSocket 提供了一种在客户端和服务器之间建立一个持久的连接的机制，这使得实时交互成为可能。在本篇文章中，我们将探讨如何使用 HTML5 WebSocket 实现一个“你画我猜”游戏。通过本文的讲解，你将了解到如何搭建游戏服务器，以及如何在前端实现画布和用户输入。

前提条件

在开始之前，请确保你的开发环境已经配置了 Node.js 和 npm。同时，了解基本的 HTML5、CSS3 和 JavaScript 是必要的。

1. 创建游戏服务器

首先，我们需要创建一个游戏服务器。我们将使用 Node.js 和 ws 库来建立一个 WebSocket 服务器。

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('Connected to the game server');
});

保存这段代码为 server.js 并运行它。现在，你的 WebSocket 服务器已经启动，并且可以接收客户端的连接。

2. 客户端实现

接下来，我们需要在前端实现一个画布，用户可以在上面画画，并且能够发送他们的画作到服务器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drawing Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('Connected to the game server');
    };

    ws.onmessage = function(event) {
      const data = JSON.parse(event.data);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(data.image, 0, 0);
    };

    let drawing = false;
    let lastX = 0;
    let lastY = 0;

    canvas.addEventListener('mousedown', function(e) {
      drawing = true;
      lastX = e.clientX - canvas.offsetLeft;
      lastY = e.clientY - canvas.offsetTop;
    });

    canvas.addEventListener('mousemove', function(e) {
      if (drawing) {
        const x = e.clientX - canvas.offsetLeft;
        const y = e.clientY - canvas.offsetTop;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.stroke();
        lastX = x;
        lastY = y;

        const image = canvas.toDataURL('image/png');
        ws.send(JSON.stringify({ image: image }));
      }
    });

    canvas.addEventListener('mouseup', function() {
      drawing = false;
    });

    canvas.addEventListener('mouseout', function() {
      drawing = false;
    });
  </script>
</body>
</html>

保存这段代码为 index.html 并在浏览器中打开它。你应该看到一个画布，可以通过鼠标在画布上画画。

3. 服务器处理

在服务器端，我们需要处理客户端发送的画作，并将它们广播给所有连接的客户端。

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

let connectedClients = new Map();

wss.on('connection', function connection(ws) {
  connectedClients.set(ws, true);

  ws.on('message', function incoming(message) {
    const data = JSON.parse(message);
    connectedClients.forEach(function each(client) {
      if (client !== ws) {
        client.send(JSON.stringify({ image: data.image }));
      }
    });
  });

  ws.on('close', function close() {
    connectedClients.delete(ws);
  });
});

现在，当你在一个客户端上画画时，所有连接的客户端都应该能够看到你的画作。

总结

通过上述步骤，你已经成功地使用 HTML5 WebSocket 实现了一个“你画我猜”游戏。这个例子展示了如何建立一个简单的WebSocket服务器，以及如何在前端处理用户的画布输入。你可以根据这个基础实现，添加更多的功能和改进用户体验。

-- 展开阅读全文 --