Gameplay
The idea of the puzzle is to place lines on a board (Paths that go through cells), following some rules.
A game configuration consists of:
- A NxM board (Usually square)
Constraints over some board cells, which are limitations on how the lines should pass through that cell. E.g. A cell may require a line to go through its top to its right. It can also be a dead end.
A definition of how many lines of each size must be placed. E.g. two lines of size 3, and one line of size 5
The score depends on the time taken to complete the board.
Highscore mode
In this mode, there are 2 major changes:
- There are no line definitions: The player is free to place any lines as long as they follow the constraints.
- The score depends on the length of the placed lines (Some long lines are better than many short lines). Time is not considered, and this mode can be played multiple times.
Inspiration
Heavily inspired in the LinkedIn daily games format: simple games, simple rules, a game every day, and some stats to compare youself with the rest of the subreddit.
What it does
Creates a post with an autogenerated set of games every day.
4 games per day (3 "complete the board" sizes + 1 "highscore" mode).
On game completion, scores are stored, and the player sees some stadistics, like their rank, percentiles, averages...
The game can be played in https://www.reddit.com/r/lines_puzzle_dev/.
As a quick summary, the X*Y board has "constraints" in some cells requiring you to have a line going, for example, from top to right. Then, there's a list of lines you must place (E.g. two lines of length 3, and one of length 6). The game is completed when the board is filled following those rules.
At the end, a ranking and some statistics are shown.
How we built it
Frontend made with Phaser, game configurations stored as compressed post data, and scores stored in Redis.
Initial scaffolding and game concept was made with the help of Copilot in Agent mode. After that, it was made and refactored by hand, as AI couldn't do most algorithmical challenges nor keep clean code.
The game currently has no art; everything is made by hand with Phaser, and some custom components recreating the React workflow for ease of use and standardization.
Challenges we ran into
The gameplay of a new game required some testing to ensure that it's both a challenge, but also not too hard. The final result ended up being nearly identical to the first prototype. Some contacts that tested it were quite positive about it.
Then, the major challenge was related with the game autogeneration. An impossible game configuration would lead to frustration, so the algorithm generates a board filled with lines already (With some controlled randomness to avoid either too many short lines, or lines too long), and then chooses a % of cells at random, and defines them as "constraints". Multiple randomized tests proved that difficulty is quite stable.
Finally, Phaser UI had some challenges in itself, as there's no native HTML/CSS-like composition AFAIK. I ended up doing some custom components that work in a composable way. But automatic layout-ing is still a to-do (not worth the time yet).
Accomplishments that we're proud of
I'm very satisfied with how the game mechanics work. This is a game "I would play daily": quick but challenging.
Also, having invested little time in the visuals, I think they work pretty well for this first version. The app feels quite snappy and easy to understand (Even if the colors and styles will require a revisit).
What's next for Lines daily puzzle
I keep a to-do list, with some relevant milestones:
- A custom app post splash, showing if you completed the games or not, to avoid having to enter into a game you already completed
- Improve visuals and layouts
I have also ideas of "special" games, like "Fill the board with a single continuous line". The architecture is open to custom levels or generation algorithms.
Built With
- devvit
- phaser.js
- redis
- typescript
Log in or sign up for Devpost to join the conversation.