前端Socket互动小游戏开发体验分享

精选原创

wx66cbdb0f40272 2024-10-14 15:47:46 ©著作权

©著作权归作者所有：来自51CTO博客作者wx66cbdb0f40272的原创作品，请联系作者获取转载授权，否则将追究法律责任

随着实时网络通信技术的不断发展，基于WebSocket的前端互动小游戏成为了一种非常流行的选择。WebSocket允许客户端和服务器之间进行双向通信，为游戏互动带来了更快的响应时间和更流畅的体验。本文将通过一个简单的互动小游戏来探讨前端如何利用WebSocket技术实现多人实时互动的效果。

WebSocket 简介

在传统的HTTP协议中，客户端必须发起请求，服务器才会返回响应。这种模式不适用于需要实时数据传输的应用场景，比如在线游戏、聊天应用等。WebSocket 通过持久化连接实现双向通信，一旦建立连接，服务器和客户端都可以随时互相发送消息，不再需要每次发送数据都重新建立连接。

实现Socket互动小游戏

本示例将实现一个简单的多人互动游戏：每个玩家控制一个方块在页面上移动，所有连接的玩家可以实时看到其他玩家的方块移动情况。核心功能就是通过 WebSocket 实现实时的玩家位置同步。

项目结构

- public/
  - index.html
  - main.js
- server/
  - server.js

前端部分

在前端，我们将使用Socket.io客户端来与服务器进行通信。首先，在 index.html 中设置简单的游戏界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket Game</title>
    <style>
        #gameArea {
            width: 600px;
            height: 400px;
            background-color: #f0f0f0;
            position: relative;
        }
        .player {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>Socket.IO Game</h1>
    <div id="gameArea"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="main.js"></script>
</body>
</html>

游戏区域是一个600x400的方形区域，每个玩家将控制一个 player div 代表方块在游戏区域中移动。接下来，在 main.js 中实现玩家控制与服务器的交互。

const socket = io(); // 建立与服务器的 WebSocket 连接

const gameArea = document.getElementById('gameArea');
const playerElement = document.createElement('div');
playerElement.classList.add('player');
gameArea.appendChild(playerElement);

let playerId = null;
let players = {};

// 监听玩家自己的ID
socket.on('init', (id) => {
    playerId = id;
    players[id] = { x: 100, y: 100 }; // 初始化玩家位置
    updatePlayerPosition(playerId);
});

// 监听其他玩家加入
socket.on('playerJoined', (newPlayer) => {
    const newPlayerElement = document.createElement('div');
    newPlayerElement.classList.add('player');
    newPlayerElement.style.backgroundColor = 'red';
    gameArea.appendChild(newPlayerElement);
    players[newPlayer.id] = newPlayer;
    updatePlayerPosition(newPlayer.id);
});

// 监听玩家移动
socket.on('playerMoved', (playerData) => {
    players[playerData.id] = playerData;
    updatePlayerPosition(playerData.id);
});

function updatePlayerPosition(id) {
    const player = players[id];
    const playerElement = gameArea.querySelector(`.player[data-id="${id}"]`) || playerElement;
    playerElement.style.left = `${player.x}px`;
    playerElement.style.top = `${player.y}px`;
}

// 键盘控制移动
window.addEventListener('keydown', (e) => {
    const step = 10;
    if (e.key === 'ArrowUp') players[playerId].y -= step;
    if (e.key === 'ArrowDown') players[playerId].y += step;
    if (e.key === 'ArrowLeft') players[playerId].x -= step;
    if (e.key === 'ArrowRight') players[playerId].x += step;

    updatePlayerPosition(playerId);
    socket.emit('move', players[playerId]); // 通知服务器玩家移动
});

服务器部分

在服务器端，使用Node.js和Socket.io来管理多个客户端的连接与数据同步。每个玩家连接时都会被分配一个唯一的ID，服务器会接收玩家的移动信息并将其广播给其他玩家。

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));

let players = {};

io.on('connection', (socket) => {
    console.log('A player connected:', socket.id);

    // 初始化玩家
    socket.emit('init', socket.id);
    players[socket.id] = { id: socket.id, x: 100, y: 100 };

    // 广播其他玩家的加入
    socket.broadcast.emit('playerJoined', players[socket.id]);

    // 监听玩家移动
    socket.on('move', (data) => {
        players[socket.id] = data;
        socket.broadcast.emit('playerMoved', data);
    });

    // 处理玩家断开
    socket.on('disconnect', () => {
        delete players[socket.id];
        console.log('Player disconnected:', socket.id);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

核心功能说明

前端控制玩家移动：前端通过监听 keydown 事件来捕获玩家的键盘输入，并将方块的移动位置实时更新。同时将移动数据通过 socket.emit 发给服务器。
服务器广播玩家位置：服务器接收到移动数据后，使用 socket.broadcast.emit 将玩家的移动情况广播给其他玩家，保证所有玩家的界面实时同步。
多人同步：当新玩家加入时，服务器通过 socket.emit('playerJoined') 通知其他玩家，并将新玩家的信息添加到游戏区域。每次玩家移动时，其他玩家的界面都会同步更新。