Как построить многопользовательский симулятор игры на столешницу с Vue, Phaser, Node, Express и розеткой. Доверие

Автор оригинала: M. S. Farzan.

Собрание всех кусочков полного стека JavaScript приложение может быть сложным усилением.

В этом руководстве мы собираемся построить многопользовательский симулятор игры на столешницу, используя Vue , Фазер , Узел / Экспресс и Разъем. Ио Чтобы узнать несколько концепций, которые будут полезны в любом приложении Full Stack.

Вы можете следовать вместе с этим видеоуронением (1 час 16 минут часы):

Все файлы проекта для этого руководства доступны на Github Отказ

Обзор проекта

Наш проект будет оснащен экземпляром игры Phaser, который позволит нам создавать токены и карты на экране и перемещать их на цифровую игровую доску.

Экземпляр Phaser будет завернутый в компонент Vue, который будет обрабатывать такие вещи, как многопользовательский чат и команды.   Вместе Phaser и Vue состоят из нашего переднего конца (упоминается от здесь, как «клиент»), и мы будем использовать сокет. IO, чтобы общаться с другими игроками и связывать вместе передние и задние концы нашего приложения.

Задний конец (упоминается от здесь на «сервере»), будет простой экспресс-сервер, который получает сокет. IO события с клиента и действуют соответственно.   Все приложение будет работать на узле в качестве времени выполнения.

Вам не нужно быть экспертом в любой из вышеперечисленных структур для завершения этого проекта, но было бы хорошей идеей иметь прочную основу в основном JavaScript и HTML/CSS, прежде чем пытаться решить специфику. Вы также можете следить с моим серией в обучении JavaScript, создавая цифровые настольные игры и веб-приложения.

Вы также захотите убедиться, что у вас есть узел и Гит установлен вместе с вашим любимым редактором кода и интерфейсом командной строки (вы можете следить за моим учебником на настройке IDE здесь Если вам нужна помощь).

Давайте начнем!

Часть 1: Основы клиента

Мы начнем строить нашего клиента, установив Vue Cli , что поможет нам с некоторыми инструментами и позволить нам внести изменения в наши файлы, без необходимости перезагружать наш веб-браузер.

В командной строке Введите следующее, чтобы установить Vue CLI глобально:

npm install -g @vue/cli

Перейдите в нужный каталог и создайте новую папку для нашего проекта:

mkdir tabletop-project
cd tabletop-project

Теперь мы можем использовать Vue CLI для шаблона переднего проекта для нас:

vue create client

Вы можете просто нажмите «Enter» в последующие подсказки, если у вас нет конкретных предпочтений.

Vue CLI помогает для нами проекта переднего конца для нас, который мы можем просмотреть в нашем редакторе кода:

Давайте перейдите к нашей новой папке клиента в нашем CLI и запустите приложение шаблона:

cd client
npm run serve

После небольшой работы Vue CLI должен начать отображение нашего приложения в веб-браузере по умолчанию http://localhost: 8080:

Прохладный!   У нас есть основная структура нашего клиента. Давайте сломаемся, создав два новых компонента в папке/Компоненты, называемую game.vue и chat.vue (вы можете пойти дальше и удалить helloworld.vue и что-нибудь в папке активов, если вы одержимы, как я).

Замените код в App.vue со следующим:

Как видите, VUE компонент обычно имеет три раздела: шаблон, скрипт и стиль, который содержит любой HTML, JavaScript и CSS для этого компонента соответственно. Мы только что импортировали нашу игру и чаты здесь и добавили небольшой укладчик, чтобы дать ему киберпанк, когда он все работает и работает.

Это на самом деле все, что нам нужно сделать, чтобы настроить наш компонент App.Vue, который будет добраться всем остальным на нашем клиенте. Прежде чем мы сможем сделать что-нибудь с этим, нам нужно будет работать наш сервер!

Часть 2: Основы сервера

В нашем корневом каталоге (настольный проект, выше/клиент) инициализируйте новый проект в новом интерфейсе командной строки, набрав:

npm init

Хотелось, что с нашим клиентом вы можете продолжить и нажать «Enter» в подсказках, если нет специфика, которые вы хотели бы обозначить в это время.

Нам нужно будет установить Express и разъем. Доверие вместе с Номемон Чтобы посмотреть наши серверные файлы для нас и перезагрузите по мере необходимости:

npm install --save express socket.io nodemon

Давайте открываем новый файл Package.json в этом корневом каталоге и добавьте команду «Пуск» в разделе «СКРАТИКИ»:

  "scripts": {
    "start": "nodemon server.js"
  },

Создайте новый файл под названием Server.js в этом каталоге и введите следующий код:

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

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);
    
    socket.on('send', function (text) {
        let newText = "<" + socket.id + "> " + text;
        io.emit('receive', newText);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

Превосходно!   Наш простой сервер теперь будет слушать http://localhost: 3000 и используйте сокет. IO для входа в консоль, когда пользователь подключается и отключается с их идентификатором сокета.

Когда сервер получает событие «Отправить» с клиента, он создаст новую текстовую строку, которая включает в себя идентификатор сокета клиента, который испускал событие, и выделяет свой собственный «получаемый» событие для всех клиентов с текстом, который он получил , интерполизирован с идентификатором сокета.

Мы можем проверить сервер, вернувшись в нашу командную строку и запустите его:

npm run start

Командная консоль теперь должна отображаться:

Прохладный! Давайте вернемся к компонентам чата нашего клиента, чтобы начать строить нашу функциональность передней части.

Часть 3: Чат

Откроем отдельный интерфейс командной строки и перейдите к каталогу/клиентскому языку. В этом каталоге установите клиентскую версию сокета. IO:

npm install --save socket.io-client

В/client/src/components/chat.vue добавьте следующий код:

Давайте рассмотрим вышеупомянутое снизу вверх, прежде чем двигаться вперед. Между тегами <Стиль> Мы добавили некоторые CSS для удара киберпункты нашего чата. Вы можете стиль это, однако, что вы хотели бы!

Между тегами

Этот компонент окажут наш экземпляр игры, когда он готов, и держит заполнитель до этого времени (обычно всего несколько секунд).   Это еще не будет работать, поскольку мы не создали экземпляра игры, с которой работать.

В интерфейсе командной строки в каталоге/клиентском языке введите следующие

npm install --save phaser

Phaser будет обрабатывать рендурирование всех наших игровых объектов, таких как токены и карты, а также делая их интерактивными с функциональностью перетаскивания.

В папке/Client/SRC добавьте новую папку под названием «Game», а подпапка в этой папке под названием «Сцены».

В рамках папки/Client/SRC/Game добавьте файл под названием Game.js, а также внутри/Client/SRC/Game/Scenes, добавьте файл под названием GameScene.js. Ваша структура файлов теперь должна выглядеть так:

Наш файл game.js будет обрабатывать начальную настройку для нашего экземпляра Phaser, импортируя нашу gamescene.js и запустить нашу игру в контейнер нашего Vuue компонента (он также масштабирует экземпляр в размере контейнера).   Вот что это должно выглядеть:

import Phaser from "phaser";
import GameScene from "./scenes/gamescene";


function launch(containerId) {
    return new Phaser.Game({
        type: Phaser.AUTO,
        parent: containerId,
        scene: [
            GameScene
        ],
        scale: {
            mode: Phaser.Scale.FIT,
            width: '100%',
            height: '100%'
        }
    });
}

export default launch;
export { launch }

Основная функциональность нашего симулятора будет в файле gamescene.js, где мы напишем:

import Phaser from 'phaser';
import io from 'socket.io-client';

export default class GameScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'GameScene'
        });
    }

    preload() {
        
    }

    create() {
        this.socket = io('http://localhost:3000');
        
        this.socket.on('struct create', (width, height) => {
            let token = this.add.rectangle(300, 300, width, height, 0x00ffff).setInteractive();
            this.input.setDraggable(token);
        });
        
        this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
            gameObject.x = dragX;
            gameObject.y = dragY;
        });
    }

    update() {

    }
}

Наша архитектура Phaser использует JavaScript Классы создать Сцены И имеет три основных функция: Preload, создание и обновление.

Функция Preload используется для подготовки активов, таких как спрайты для использования в сцене.

Функция обновления называется один раз за рамку, и мы не используем ее в нашем проекте.

Функция создания называется, когда создана сцена, и где здесь выполняется вся наша работа. Мы инициализируем переменную сокета и храните розетку. IO Connection по адресу http://localhost: 3000 внутри него, затем ссылается на событие «Struct Create», которое мы ожидаем получить с сервера.

Когда клиент получает событие «Struction Create», наш экземпляр Phaser должен создать прямоугольник на координатах (X, Y) (300, 300), используя параметры ширины и высоты, которые обозначены этим событием, и веселый CyberPunk Цвет, который мы выбрали. Phaser затем установит, что прямоугольник должен быть интерактивным и предупреждает систему ввода, которую она также должна быть перегружена.

Мы также написали немного логики, которая говорит Phaser, что он должен делать, когда прямоугольник перетаскивается; А именно, он должен следовать направлению указателя мыши.

Все, что нам нужно сделать сейчас - это вернуться в наш сервер.js и добавить логику для нашего события «Struct Create»:

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

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);
    
    socket.on('send', function (text) {
        let newText = "<" + socket.id + "> " + text;
        if (text === 'struct card') {
            io.emit('struct create', 130, 180)
        };
        if (text === 'struct token') {
            io.emit('struct create', 100, 100)
        };
        io.emit('receive', newText);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

Наш сервер сейчас действует как простой анализатор, когда он получает событие «Отправить» от клиента. Если клиент отправляет текст «Struct Card», сервер выделяет наше событие «Struct Create» с аргументами 130 х 180 пикселей для ширины и высоты карты.

Если клиент отправляет текст «Struction Token», сервер вместо этого выделяет наше событие «Struct Create» с аргументами 100 х 100 пикселей для ширины и высоты токена.

Попытайся! Сохраните все, убедитесь, что сервер работает, и открыть пару вкладок в веб-браузере, указанном на http://localhost: 8080. Когда вы общаетесь на одной вкладке, она должна появиться в другой с идентификатором вашего клиента и наоборот.

Если ваш чат - это команда «struct Card» или «структурный токен», карта перетаскивания или токен, соответственно, должна появиться у обоих клиентов.

Аккуратный!

Заворачивать

После этого учебника вы теперь должны иметь рабочий мультиплеерный игровой симулятор настольных игр с помощью Chat, Card и Token, и функциональность перетаскивания.

Вы можете продолжать опираться на это простое приложение для полного стека, усиливая стиль, добавив полосу прокрутки в чат, или позволяя игрокам выбрать имена пользователей и войти в конкретные экземпляры чата, используя Разъем. IO Rooms Отказ

Вы можете улучшить функциональные возможности игры на борту, работая несколько карт и токенов одновременно или знакомиться с Примеры Phaser добавить свои собственные функции.   Вы также можете следовать вместе с моим учебником на Как построить многопользовательскую карточную игру с Phaser 3, Express и розетка. Ио для вдохновения.

Конечно, нет никаких причин, которые вам нужно использовать команды чата для создания игровых объектов. Вы можете сделать все это из экземпляра Phaser, если вы хотите, но вам нужно, но вам нужно создать свои собственные кнопки или какую-то другую входную интерактивность (в моем опыте, Vue намного лучше при обработке текста, следовательно, наши команды чата) Отказ

Однако текущая функциональность может быть полезна в том случае, если вы хотите, чтобы вы могли сделать, скажем, Dice на экране, запустив команду чата.

Кроме того, если вы хотите развернуть свое новое приложение, вы можете сначала прочитать мою статью о трех вещах, чтобы рассмотреть вопрос, прежде чем развернуть первый приложение для полного стека, затем следуйте вместе с моим учебным пособием, чтобы узнать, как развернуть полное веб-приложение Stack с Heroku Отказ

Счастливое кодирование!

Если вам понравилось эту статью, пожалуйста, рассмотрите возможность Проверка моих игр и книги , Подписавшись на мой канал YouTube или Присоединение к Энтроманность Раздор Отказ

М. С. Фарзан, к.т.н. Написал и работал на громкие видеоигрные компании и редакционные сайты, такие как электронные искусства, идеальные мировые развлечения, Modus Games и MMORPG.com, и служил менеджером сообщества для таких игр, как Dungeons & Dragons Neverwintern и Массовый эффект: Андромеда Отказ Он творческий режиссер и руководящий игровой дизайнер Энтроманность: CyberPunk Fantasy RPG и автор Трилогия ночной патки Отказ Найти М. С. Фарзан в Твиттере @sominator .

Оригинал: "https://www.freecodecamp.org/news/how-to-build-a-multiplayer-tabletop-game-simulator/"