Создание браузерных мультиплеерных игр: технологии и практики

// Создаем WebSocket-соединение
const socket = new WebSocket('ws://game-server.example.com/socket');

// Обработчики событий
socket.onopen = () => {
console.log('Соединение установлено');
// Отправляем данные о входе игрока
socket.send(JSON.stringify({
type: 'player_join',
playerId: playerId,
name: playerName
}));
};

socket.onmessage = (event) => {
const data = JSON.parse(event.data);
// Обрабатываем сообщение от сервера
switch(data.type) {
case 'game_state':
updateGameState(data.state);
break;
case 'player_moved':
updatePlayerPosition(data.playerId, data.position);
break;
// Другие типы сообщений
}
};

socket.onclose = () => {
console.log('Соединение закрыто');
// Логика переподключения
};

const WebSocket = require('ws');

// Создаем WebSocket-сервер
const wss = new WebSocket.Server({ port: 8080 });

// Храним соединения игроков
const players = new Map();

wss.on('connection', (ws) => {
let playerId;

ws.on('message', (message) => {
const data = JSON.parse(message);

if (data.type === 'player_join') {
// Сохраняем идентификатор игрока
playerId = data.playerId;
players.set(playerId, {
socket: ws,
name: data.name,
position: { x: 0, y: 0 }
});

// Оповещаем всех о новом игроке
broadcastGameState();
} else if (data.type === 'player_move') {
// Обновляем позицию игрока
const player = players.get(playerId);
if (player) {
player.position = data.position;

// Оповещаем всех о движении
broadcastToAll({
type: 'player_moved',
playerId: playerId,
position: data.position
});
}
}
});

ws.on('close', () => {
// Удаляем игрока при отключении
if (playerId) {
players.delete(playerId);
broadcastGameState();
}
});
});

// Отправка сообщения всем подключенным игрокам
function broadcastToAll(data) {
const message = JSON.stringify(data);
players.forEach(player => {
if (player.socket.readyState === WebSocket.OPEN) {
player.socket.send(message);
}
});
}

// Отправка полного состояния игры
function broadcastGameState() {
const gameState = {
players: Array.from(players.entries()).map(([id, player]) => ({
id,
name: player.name,
position: player.position
}))
};

broadcastToAll({
type: 'game_state',
state: gameState
});
}

// Конфигурация игры
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};

// Инициализация игры
const game = new Phaser.Game(config);
let player;
let cursors;
let socket;

function preload() {
// Загрузка ресурсов
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}

function create() {
// Создание игрового мира
this.add.image(400, 300, 'sky');

const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();

// Создание игрока
player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);

// Анимации игрока
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});

this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});

this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});

// Коллизии
this.physics.add.collider(player, platforms);

// Управление
cursors = this.input.keyboard.createCursorKeys();

// Подключение к серверу
connectToServer();
}

function update() {
// Обновление игрового состояния
if (cursors.left.isDown) {
player.setVelocityX(-160);
player.anims.play('left', true);

// Отправка данных о движении
sendPlayerMovement('left', player.x, player.y);
}
else if (cursors.right.isDown) {
player.setVelocityX(160);
player.anims.play('right', true);

// Отправка данных о движении
sendPlayerMovement('right', player.x, player.y);
}
else {
player.setVelocityX(0);
player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down) {
player.setVelocityY(-330);

// Отправка данных о прыжке
sendPlayerMovement('jump', player.x, player.y);
}
}

// Функции для работы с сетью
function connectToServer() {
socket = new WebSocket('ws://game-server.example.com/socket');

socket.onopen = () => {
console.log('Подключено к серверу');
// Отправляем информацию о присоединении
socket.send(JSON.stringify({
type: 'player_join',
id: generatePlayerId()
}));
};

socket.onmessage = (event) => {
const data = JSON.parse(event.data);
handleServerMessage(data);
};
}

function sendPlayerMovement(action, x, y) {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({
type: 'player_move',
action: action,
position: { x, y }
}));
}
}

function handleServerMessage(data) {
// Обработка сообщений от сервера
// Например, обновление позиций других игроков
if (data.type === 'player_moved') {
updateOtherPlayerPosition(data.playerId, data.position, data.action);
}
}

function generatePlayerId() {
return 'player_' + Math.random().toString(36).substr(2, 9);
}

function updateOtherPlayerPosition(playerId, position, action) {
// Логика обновления позиций других игроков
// ...
}

class Player {
constructor(id, x, y) {
this.id = id;
this.x = x;
this.y = y;
this.velocityX = 0;
this.velocityY = 0;
this.inputs = []; // Хранение истории ввода
this.serverState = { x, y, sequence: 0 }; // Последнее подтвержденное состояние
}

// Применяем ввод и предсказываем движение
applyInput(input) {
// Сохраняем ввод для проверки с сервером позже
this.inputs.push(input);

// Применяем ввод к локальному состоянию
this.velocityX = 0;
this.velocityY = 0;

if (input.left) this.velocityX -= 5;
if (input.right) this.velocityX += 5;
if (input.up) this.velocityY -= 5;
if (input.down) this.velocityY += 5;

// Обновляем позицию
this.x += this.velocityX;
this.y += this.velocityY;

// Отправляем ввод на сервер
this.sendInputToServer(input);

return { x: this.x, y: this.y };
}

// Отправка ввода на сервер
sendInputToServer(input) {
socket.send(JSON.stringify({
type: 'player_input',
input: input
}));
}

// Обработка обновления от сервера
handleServerUpdate(serverState) {
this.serverState = serverState;

// Находим ввод, соответствующий последнему подтвержденному состоянию
const confirmedInput = this.inputs.find(input => 
input.sequence === serverState.sequence);

if (confirmedInput) {
// Удаляем подтвержденные вводы
this.inputs = this.inputs.filter(input => 
input.sequence > serverState.sequence);

// Проверяем расхождение между предсказанием и сервером
const discrepancy = {
x: Math.abs(this.x – serverState.x),
y: Math.abs(this.y – serverState.y)
};

// Если расхождение значительное, корректируем позицию
if (discrepancy.x > 5 || discrepancy.y > 5) {
console.log('Корректировка позиции', discrepancy);

// Сбрасываем позицию к серверной
this.x = serverState.x;
this.y = serverState.y;

// Повторно применяем все непроверенные вводы
this.inputs.forEach(input => {
this.velocityX = 0;
this.velocityY = 0;

if (input.left) this.velocityX -= 5;
if (input.right) this.velocityX += 5;
if (input.up) this.velocityY -= 5;
if (input.down) this.velocityY += 5;

this.x += this.velocityX;
this.y += this.velocityY;
});
}
}
}
}

// Серверная часть (Node.js)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// Состояние игры
const players = new Map();
let sequence = 0;

wss.on('connection', (ws) => {
const playerId = generatePlayerId();

// Создаем нового игрока
const player = {
id: playerId,
x: 100,
y: 100,
socket: ws
};

players.set(playerId, player);

// Отправляем начальное состояние
ws.send(JSON.stringify({
type: 'game_state',
playerId: playerId,
players: Array.from(players.entries()).map(([id, p]) => ({
id: id,
x: p.x,
y: p.y
}))
}));

// Обрабатываем сообщения от клиента
ws.on('message', (message) => {
const data = JSON.parse(message);

if (data.type === 'player_input') {
const player = players.get(playerId);

// Применяем ввод к серверному состоянию
if (data.input.left) player.x -= 5;
if (data.input.right) player.x += 5;
if (data.input.up) player.y -= 5;
if (data.input.down) player.y += 5;

// Отправляем подтверждение обработки ввода
ws.send(JSON.stringify({
type: 'input_confirmation',
sequence: data.input.sequence,
x: player.x,
y: player.y
}));

// Отправляем обновление всем игрокам
broadcastGameState();
}
});

ws.on('close', () => {
players.delete(playerId);
broadcastGameState();
});
});

function broadcastGameState() {
const gameState = {
type: 'game_update',
sequence: sequence++,
players: Array.from(players.entries()).map(([id, player]) => ({
id: id,
x: player.x,
y: player.y
}))
};

const message = JSON.stringify(gameState);

players.forEach(player => {
if (player.socket.readyState === WebSocket.OPEN) {
player.socket.send(message);
}
});
}

function generatePlayerId() {
return 'player_' + Math.random().toString(36).substr(2, 9);
}

class RemotePlayer {
constructor(id) {
this.id = id;
this.x = 0;
this.y = 0;
this.targetX = 0;
this.targetY = 0;
this.lastUpdateTime = 0;
this.interpolationDuration = 100; // мс
}

// Обновление целевой позиции
updateTargetPosition(x, y) {
this.targetX = x;
this.targetY = y;
this.lastUpdateTime = Date.now();
}

// Обновление интерполированной позиции
update() {
const currentTime = Date.now();
const elapsed = currentTime – this.lastUpdateTime;

if (elapsed <= this.interpolationDuration) {
const progress = elapsed / this.interpolationDuration;

// Линейная интерполяция
this.x = this.x + (this.targetX – this.x) * progress;
this.y = this.y + (this.targetY – this.y) * progress;
} else {
this.x = this.targetX;
this.y = this.targetY;
}
}

render(ctx) {
// Отрисовка игрока
ctx.fillRect(this.x – 10, this.y – 10, 20, 20);
}
}

# Структура проекта
/game-project
/client
index.html
styles.css
/js
game.js
network.js
/assets
...
/server
server.js
package.json
package.json

// package.json в корне проекта
{
"name": "multiplayer-game",
"version": "1.0.0",
"scripts": {
"build:client": "webpack --config webpack.config.js",
"start:server": "node server/server.js",
"dev": "concurrently \"npm run build:client -- --watch\" \"npm run start:server\""
},
"dependencies": {
// зависимости
},
"devDependencies": {
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
// другие dev-зависимости
}
}

// server/server.js
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const path = require('path');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// Определяем порт из переменных окружения или используем 3000
const PORT = process.env.PORT || 3000;

// Обработка подключений WebSocket
wss.on('connection', (ws) => {
console.log('Игрок подключился');

// Логика обработки сообщений

ws.on('close', () => {
console.log('Игрок отключился');
// Обработка отключения
});
});

// Запуск сервера
server.listen(PORT, () => {
console.log(`Сервер запущен на порту ${PORT}`);
});

web: node server/server.js

// client/js/network.js
class NetworkManager {
constructor() {
// Определяем URL сервера в зависимости от окружения
this.serverUrl = process.env.NODE_ENV === 'production'
? 'wss://your-game-server.herokuapp.com'
: 'ws://localhost:3000';

this.socket = null;
this.isConnected = false;
this.connectionCallbacks = [];
this.messageCallbacks = {};
}

// Подключение к серверу
connect() {
this.socket = new WebSocket(this.serverUrl);

this.socket.onopen = () => {
console.log('Подключено к серверу');
this.isConnected = true;
this.connectionCallbacks.forEach(callback => callback(true));
};

this.socket.onmessage = (event) => {
const data = JSON.parse(event.data);

// Вызываем соответствующие обработчики
if (data.type && this.messageCallbacks[data.type]) {
this.messageCallbacks[data.type].forEach(callback => callback(data));
}
};

this.socket.onclose = () => {
console.log('Соединение с сервером закрыто');
this.isConnected = false;
this.connectionCallbacks.forEach(callback => callback(false));

// Пытаемся переподключиться через 5 секунд
setTimeout(() => this.connect(), 5000);
};

this.socket.onerror = (error) => {
console.error('Ошибка WebSocket:', error);
};
}

// Отправка сообщения на сервер
send(data) {
if (this.isConnected) {
this.socket.send(JSON.stringify(data));
}
}

// Регистрация обработчика подключения/отключения
onConnectionChange(callback) {
this.connectionCallbacks.push(callback);

// Возвращаем текущее состояние, если уже известно
if (this.socket) {
callback(this.isConnected);
}
}

// Регистрация обработчика сообщений определенного типа
on(messageType, callback) {
if (!this.messageCallbacks[messageType]) {
this.messageCallbacks[messageType] = [];
}

this.messageCallbacks[messageType].push(callback);
}
}

// Экспортируем синглтон для использования во всем приложении
export const networkManager = new NetworkManager();

// Добавляем в server.js
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});