Двойной Тетрис (помните Star)

Двойной Тетрис — это двухигроковая игра в стиле Tetris, созданная на основе классической версии игры с добавлением режима двойной игры, что придаёт игре новые игровые моменты и удовольствие.

Технологический выбор

Клиентская часть: RequireJS + jQuery + Socket.IO + PixiJS
Серверная часть: SpringBoot + Netty-SocketIO

Скриншоты

Описание функциональности- Игра основана на классическом варианте Tetris, но добавлен режим двойной игры, поддерживающий локальную сеть (в данный момент поддерживается только два соединения клиента).

• Первый клиент, который подключается, является P1 и использует зелёные фигуры, отображаемые слева экрана; второй клиент, подключающийся позже, является P2 и использует красные фигуры, отображаемые справа экрана.
• Клиентская часть адаптирована под различные разрешения экрана, чтобы поддерживать работу на устройствах с различными размерами экрана.
• Поддерживаются как клавиатурные команды (для ПК), так и жесты управления через сенсорный экран (для мобильных устройств).
• Для ПК: W/A/S/D (или стрелки ↑ ← ↓ →) используются для поворота/левого перемещения/нижнего перемещения/правого перемещения, а пробел используется для быстрого спуска.
• Для мобильных устройств: жесты движения влево/вправо/вниз соответственно используются для левого перемещения/правого перемещения/нижнего перемещения, а движение вверх — для поворота. Прямое нажатие для быстрого спуска пока не реализовано.---

Инструкция по запуску

• Настройте серверную часть: resources/application.properties, заменив server.host на IP вашего компьютера (не используйте localhost или 127.0.0.1).
• Запустите серверную часть: cn.ryanpenn.game.tetris.Application.main
• Код клиента находится в директории: webapp/tetris-client
• Настройте клиента: в js/main.js установите IP адрес и порт, совпадающие с сервером (не используйте localhost или 127.0.0.1).
• Чтобы запустить несколько клиентских приложений, рекомендуется использовать BrowserSync, что позволит удобно просматривать эффекты на мобильных устройствах.
  • Откройте командную строку и перейдите в директорию tetris-client.
  • Выполните команду browser-sync start --server --files "js/*.js"
  • В браузере откройте http://IP_вашего_компьютера:3000/tetris-client.html (сервер должен вывести сообщение: P1 connected).
  • Откройте ту же страницу на другом компьютере или мобильном устройстве, и игра начнётся автоматически.
  • Если вам нужно проверить, как будет выглядеть игра в WeChat, вы можете использовать генератор QR-кода Chaoma, чтобы создать QR-код и затем сканировать его через WeChat.

Технические особенности

• Коммуникация между клиентской и серверной частями осуществляется через WebSocket, используя Netty-SocketIO (на стороне сервера) и Socket.IO.JS (на стороне клиента).---- Серверная часть основана на Java приложении с использованием Maven, зависит от Spring Boot и может запускаться непосредственно, без размещения в web-контейнере.
• Клиентская часть использует require.js для модульной системы и jQuery для упрощения кода (хотя его использование довольно ограничено...).
• Клиентская часть также использует игровой движок Pixi.js. Поскольку я недостаточно знаком с этим движком, то использую лишь некоторые его возможности, а графический интерфейс создается с помощью этого движка.## Версии
• Серверная часть
  • spring boot 1.5.10.RELEASE
  • netty-socketio-1.7.13
  • netty-all 4.1.22.Final
• Клиентская часть
  • socket.io.min.js 1.7.4
  • require.min.js 2.3.5
  • jquery.min.js 3.3.1
  • pixi.min.js 4.7.0

Дополнительные материалы

• Документация Socket.IO на русском
• CDN Socket.IO
• Документация Pixi на русском
• Официальные примеры Pixi
• Примеры Spring Boot без использования Web
• Пример простого чата с использованием Netty-SocketIO

Полезные инструменты

• IntelliJ IDEA
• Browsersync для отладки клиентской части
• Генератор QR-кодов

Примечания

• Проект создан на основе проекта игровой версии Tetris, принципы реализации игры можно найти там.
• Проект ещё находится в процессе доработки, поэтому ошибки могут присутствовать, но мы надеемся, что он будет полезен как пример. Приглашаем вас звездить и форкать этот проект.