Ludo - Low Level Design

After completing high level design for the Ludo game in previous post Ludo System Design, we started implementing the game using Javascript as our main language. We will discuss in this post how the BOT selects which piece to play during its turn. Along with that, we faced few tricky situations during the implementation whose solution is simple but the thought process to come up with the solution was really interesting.

Code for this webapp is hosted at Ludo WebApp Github.

Credits: It is designed and developed in collaboration with Apoorva Ranade

Main Components

To implement the game, these are the main components that are interacting with each other to make things lively on the website.

1. Game board - Main stage where the duel happens between Human & Computer.
2. Dice - One can interact with Dice to display a number. The number in itself can’t decide who will win, but how the numbers are used can make a lot of difference.
3. Pieces - When the Dice rolls a number, the pieces are the one that gets moved here and there. They all want to move to a safe place or stay together to survive and ultimately reach the final destination.
4. Info box - Commentator of the duel, which talks about the events as they happen. It may bring the good news to you or it may break you heart. In the moments of despair, just remember that it is not the event but how you react to it that decides your future.
5. Players - User and Nemesis are the two players who will compete with each other and try to move their pieces to their final destination.

Interaction Between Components

High level user interaction is described in Sequence Diagram in previous post. Based on that design, here are the actual events and interactions that can be seen on the website:

1. Select piece color on landing page: Navigates user to the Gameboard page
2. Roll the Die: Dice is rolled and User can now select a piece if a move is possible. Otherwise, nemesis will play his turn. If the rolled number is 6 then user gets another chance to roll the die after selecting the piece.
3. Piece Selection: On user’s turn after rolling the die, if a move is possible then User is prompted to select the desired piece to move on the board.
4. Restarting the game: At any point in time, User can choose to restart the game by clicking Restart Game button
5. Homepage: To select a different piece color, user can click on Home button to go to the landing page and then select a new color.

Note: After each interaction, Info Box is updated with relevant messages

Nemesis AI

We have defined a set rules to decide the next piece to play during nemesis’s turn. Here are the rules in the same order as they are executed

1. Can piece be unlocked: Check if any pieces are in the homebox. If Yes and the rolled number is 1 or 6 then the piece is unlocked
2. Can piece kill: Check if nemesis can attack any of the player’s piece, go for attack if possible else check for next condition
3. Can piece be moved from unsafe to safe position: Check if there is any piece that is within 6 steps ahead of any of the player’s pieces. If yes, and by moving that piece it becomes out of danger, then move the piece else move to next step
4. Can piece be moved from safe to safe position: If there are no unsafe pieces that can be saved, then check if there are any pieces that are safe after moving them. If yes then move the piece else move to next step
5. Move highest unsafe piece to unsafe: If this condition is being checked, that means there are no pieces that will be safe after moving them. Hence it is best to select a piece that is unsafe and is closer to winning path even if it becomes unsafe after moving. If we find a piece that satisfy this condition then we play that otherwise we move to the next condition
6. Move winning path piece: Winning path is the last 5 steps that are specific to each player. If there are no other possibilities and there are pieces located on the winning path that can be moved, then move those pieces otherwise move to next step
7. Move lowest safe piece to unsafe: As a last resort, when there are no other options left, move the piece that is nearest to homebox. This is to avoid playing a piece that will take less time to move to the final destination.
8. Pass the turn: If no move possible, then pass the turn to the player.

Interesting problems

During the development of this game, we encountered few interesting problems that took us some time to understand. They are a topic on their own so adding them here as placeholder for now to add later:

1. How to play nemesis’ turn automatically after user: Once user plays their turn, nemesis can play its turn within seconds which is not a good user experience. To add a delay, we needed some mechanism to change the game state after some time. We have explored 3 different strategy to do that which will be discussed in its own article
2. Homebox color disappearing after a hot reload during development: When we start the react server during development, hot reload feature is enabled by default. It means, any code change will be visible as soon as the file is saved. This feature along with React and javascript features caused the colors in the homebox to disappear after every hot reload. It will be discussed in detail in its own article