Розробка гри стратегії на тематику “інженерія програмного забезпечення” з використанням фреймворків Skeleton та Alpine

Abstract

Кваліфікаційна робота бакалавра присвячена розробці веб-застосунку для настільної багатокористувацької гри з інтерактивним ігровим полем. Представлено процес проєктування та реалізації клієнт-серверного веб-застосунку для гри в реальному часі. Основна увага приділена розробці зручного інтерфейсу користувача, реалізації логіки гри, а також забезпеченню синхронізації дій між гравцями.Серверна частина реалізована з використанням платформи Node.js та веб-фреймворку Express.js. Для забезпечення двосторонньої взаємодії в реальному часі між клієнтами та сервером застосовано бібліотеку Socket.IO. Клієнтська частина розроблена з використанням легкого JavaScript-фреймворку Alpine.js, який забезпечує реактивність інтерфейсу та зручну роботу з DOM-елементами. Для створення сучасного та адаптивного дизайну використано CSS-фреймворк Skeleton, що дозволило реалізувати чітку сіткову систему та стилізувати компоненти інтерфейсу.Ігрове поле створене на основі SVG-графіки, що дає змогу динамічно змінювати його відповідно до дій користувачів. Для реалізації візуальних ефектів, таких як анімація руху фішок та кидок кубиків, використано CSS-анімації. Alpine.js дозволив реалізувати інтерактивні елементи керування та динамічне оновлення стану гри без перезавантаження сторінки.Проведено тестування функціональності застосунку та верифікацію його коректної роботи в умовах багатокористувацької взаємодії.

The bachelor's qualification work is devoted to the development of a web application for a multiplayer board game with an interactive playing field. The process of designing and implementing a client-server web application for a real-time game is presented. The main attention is paid to the development of a convenient user interface, the implementation of the game logic, as well as ensuring synchronization of actions between players. The server part is implemented using the Node.js platform and the Express.js web framework. To ensure two-way interaction in real time between clients and the server, the Socket.IO library is used. The client part is developed using the lightweight JavaScript framework Alpine.js, which provides interface reactivity and convenient work with DOM elements. To create a modern and adaptive design, the Skeleton CSS framework was used, which allowed to implement a clear grid system and stylize interface components. The playing field is created based on SVG graphics, which allows it to change dynamically according to user actions. CSS animations were used to implement visual effects, such as animation of chip movement and dice rolling. Alpine.js allowed to implement interactive controls and dynamic updating of the game state without reloading the page. The application functionality was tested and its correct operation was verified in multi-user interaction.