A collection of connection-based puzzle games built with Vue 3.
ConnectionGames is a small suite of puzzle games focused on recreating the correct connections between objects on a board. I built this project for fun to implement some logic games I like, to showcase my frontend skills and to try out Vue 3.
Check out the live version.
Every game mode features 3 difficulty levels, scaling the logic and grid complexity to challenge players of all skill levels.
- Bridges: A web version of the classic Hashiwokakero puzzle. Connect all the islands together with horizontal and vertical bridges. You have to follow the allowed bridge counts for each island, and paths cannot cross.
- Squares: Move and rotate blocks until every piece on the grid is correctly connected to its neighbors.
- Pipes: A variation the classic plumbing puzzle. In addition of rotating individual pieces, you must shift entire rows and columns to connect all endpoints back to the main source.
- Mobile & Touch-Friendly: Optimized for touch interactions, allowing for a seamless gameplay experience on mobile devices and tablets.
- Responsive Design: Built to scale perfectly across all screen sizes, from desktop monitors to smartphones.
- Multiple Languages: The game is fully playable in both English and Polish.
- UI Polish: Features a smooth animated background and satisfying confetti visual effects when you clear a level.
- CSS / JavaScript
- TypeScript 5.9.0
- Vite 7.1.11
- Vue 3.5.22
- Pinia 3.0.3
- canvas-confetti 1.9.3
- FontAwesome 6.7.2
- GoogleFonts
The main menu serves as the entry point, presenting the three core game modes. Clicking any mode navigates the user to the respective level selection screen. A language toggle (English/Polish) is conveniently located in the top right corner for accessibility.
Here, players can choose their preferred difficulty and select a specific puzzle. The UI clearly visually distinguishes between completed, unlocked, and locked levels. Progression is flexible—players can jump straight into harder difficulties without having to complete all the easy levels first. A persistent "back" button ensures smooth navigation.
The core gameplay interface provides a clean, distraction-free experience. The header displays the current context (game mode and difficulty) alongside a level selector. It also features quick-action buttons for restarting the current puzzle or maximizing the board to fill the screen space.
An implementation of the classic Hashiwokakero puzzle. The board consists of islands with numeric values indicating their required number of bridge connections. The goal is to connect all islands into a single, continuous network by placing 1 or 2 bridges between them, ensuring that no paths intersect.
Players must restore a grid of interconnected square pieces so that all connections match up perfectly. The challenge lies in the different block constraints, indicated by color and icons:
- Red (4 dots): Static; cannot be moved or rotated.
- Blue (center dot): Can only be rotated.
- Green (arrows in all directions): Can be moved freely across the grid.
- Orange (arrows + center dot): Can be moved freely and rotated.
- Purple (single-axis arrow): Can only move along one specific axis.
- Brown (single-axis + center dot): Can move along one axis and be rotated.
A dynamic variation of the classic pipe puzzle. Players must establish a continuous flow from the source to all endpoints. To solve the board, users must not only rotate individual pipe segments but also strategically shift entire rows and columns.
