The beauty of game design lies in the fact that inspiration can come from anywhere, even the most ordinary of experiences.

The Idea

Game ideas can emerge unexpectedly, and for Snadder, inspiration struck while watching a captivating TED Talk titled "Can you cheat death by solving this riddle?" delivered by Shravan S K. The talk featured two friends embarking on a life-or-death struggle by solving a snake and ladder conundrum.

Snake and Ladder puzzle created by Death to the two best friends

Unlike traditional snake and ladder, where luck determines your fate through dice rolls, Death presented a distinct set of rules for the two friends:

The dice will roll any number you want between 1 and 6
A move consists of rolling a die and moving forward the number of rooms indicated
If you finish a move in a room that contains the bottom of a ladder, you MUST climb to the top of the ladder.
If you finish a move on a space that contains the head of a snake, you MUST move to the snake’s tail
You and your friend must each reach the exit in 5 or fewer rolls. Your turn alternate.
When a snake or ladder is used by any player (other than Death), it immediately disappears. The rooms it occupied then function as normal rooms (unless they contain other snakes or ladders).

Armed with these rules, we delved into solving the puzzle. Sharing the exact solution here would be unjust to the enthusiastic readers, but you can watch the TED Talk video for the solution. However, to illustrate the puzzle, we present a simple solution below, considering only a single player:

A sinlge player solution to the snake and ladder puzzle created by Death

This puzzle thoroughly challenged us, forcing us to rack our brains. And then a compelling thought arose: "What if this was an actual game?"

The Prototype

Upon discovering the potential for a game based on the puzzle, the focus shifted towards breaking it down into two essential components: the puzzle solver and the map generator. The puzzle solver needed to be capable of solving the puzzle regardless of the number of players involved, and incorporate the disappearance of snakes and ladders after use. Since each movement, including the traversal of ladders and snakes, had a uniform cost of 1, the entire map could be seen as a tree structure. To locate all solutions, including the desired optimal ones, the solver was created using the Breadth First Algorithm.

Moving on to the map generator, the goal was to create intriguing maps with well-distributed snakes and ladders, allowing for multiple viable solutions to the puzzle. Initially, the generator involved numerous conditions that determined various characteristics of the map, such as the number of consecutive snakes, the spacing between elements, the quantity of ladders, and so on. However, we soon realized that incorporating perlin noise added an extra layer of complexity to the maps, enhancing their interest and combining it with the previously established conditions resulted in the generation of captivating maps for players to enjoy.

Equipped with these essential tools, along with the additional restriction on the number of dice faces, the initial game prototype was developed using the pygame library, utilizing simple geometric shapes as seen below:

Proof of Concept Puzzle of Snadder created using pygame

The pygame user interface (UI) we designed, on the other hand, was confined to presenting the produced map without any interactive features. As a result, the most feasible option was to print the puzzle on paper and distribute it to the team members, proving successful as the interactive nature of the puzzle made it an engaging brain-teaser.

The next step involved making the puzzle interactive and observing its impact. Considering that web-based games were more accessible to create than standalone apps, we swiftly developed a basic website within a day, encompassing almost all the envisioned features for the game. Notably, the website effectively conveyed the number of dice available by displaying multiple instances of the dice itself, rather than relying on numerical indicators. This web-based iteration of Snadder, utilizing p5.js, boasted a visually appealing UI as follows:

Prototype Website of Snadder created using p5.js

Compared to the previous game UI created using pygame, the web-based version proved to be an instant hit among team members, serving as a compelling proof of concept for the game. Furthermore, during this period, we conducted user testing internally with the website and externally at the LOCUS event, where students exhibited keen interest in the concept.

The Development

Taking into account the valuable feedback received from both users and internal team members at Bhoos, the decision was made to transition the game into a web-based format using React and TypeScript, which aligns with our preferred choice for most projects. The concept for the game drew inspiration primarily from the renowned game Wordle, where a new puzzle is presented each day. In the case of Snadder, however, players were given the option to revisit missed days, adding a touch of the "Candy Crush" vibe. The user interface (UI) maintained a clean and straightforward design, with a strong emphasis placed on ensuring smooth interactions and animations to enhance the user experience upon first opening Snadder.

Prototype Website of Snadder created using React and Typescript

Following the creation of the initial mobile UI, an iterative design process commenced, accompanied by the incorporation of various features including theme modes, sounds, a calendar, statistics, and a tutorial. Each iteration spanned approximately a week, during which user testing feedback was carefully analyzed and integrated into the subsequent iteration. This iterative approach ensured constant improvements and enhancements to Snadder based on user preferences and needs.

Throughout this iterative process, the current UI design for Snadder was refined and finalized. The primary focus was to provide users with a seamless and guided experience during their initial game session. Additionally, the UI allowed users to share their scores (in the form of stars received) for the current map. Furthermore, the design facilitated easy navigation, enabling users to revisit maps they might have missed in previous days.

Website iterations from left (old version) to right (latest version)

Throughout the development process, each incremental change brought about further refinements to the game, eventually leading us to the current UI. Even after the website's launch on April 1st, 2023, continuous improvements to the UI were made based on insights derived from Google Analytics. One crucial finding was that only half of the users who accessed the app were able to make their first move. This discrepancy stemmed from various factors, such as compatibility issues with older browsers and a lack of a clear storyboard guiding users through their initial actions.

To address this issue, we implemented tooltips and introduced prominent play buttons specifically designed for new users who were opening Snadder for the first time. These additions aimed to provide clear instructions and enhance the user's understanding of how to proceed, ultimately improving the onboarding experience. By leveraging data-driven insights, we were able to identify pain points and take proactive measures to optimize the UI for a seamless and user-friendly gameplay.

Implementation of UI changes driven by user flow data

Thanks to the implementation of the new user flow enhancements and bug fixes, the conversion rate has experienced a noteworthy improvement. As a result, Snadder remains in a state of constant evolution, continuously expanding the collection of available puzzles from previous days. While changes are now introduced on a monthly basis, reflecting the game's journey towards stability, rest assured that if you haven't played yet, you can still look forward to engaging and challenging puzzles that will put your brain to the test.

snadder