Lessons I Learned While Making a Snakes and Ladder Game

Introduction:

Snakes and Ladder is a game from India. It is played on a board. The goal of the game is to achieve the position of 100, and the player who achieves this position first is the winner. Along the way, you encounter snakes. These snakes stretch from one number to another. And if you land on the head of these snakes, you end up at the tail of the snake, which results in the loss of progress.

The position of the players is incremented by rolling a six-sided dice. Depending on what number they rolled, the position of the player is incremented by that number. Except for the number 6. If you roll 6, you get another chance to roll, but you do not get to increment your position with 6.

This is the second game I’ve made after Rock Paper Scissors, and in this article, you will get to learn about what lessons I’ve walked away from this project.

On a side note, I consider Snakes and Ladder to be one of those games that are designed to torture their players. But this game has nothing on Monopoly. Because this game is finished after a few minutes of playing. Whereas the torture in Monopoly can last for a long time.

Number 5: The trouble with graphics.

I got away easy with the Rock-Paper-Scissors game. I didn’t have to worry about the graphics much in that game. But here, things were different when I started.

It was suggested to me that I should make a board, and display that on the web page. The person suggesting this went as far as to say that it wouldn’t matter if I designed the board wrongly. But it mattered to me, and I knew that a bad board design would sour the playing experience for many people.

As a result, I decided that it was not worth it. I will just communicate through the text, and will not bother with designing a board. Besides, I’m not creating this game to publish it on some Play Store anyway, so I don’t see what is the harm in using the text. As a blind person working on this project all by myself, my options are limited.

Having said that, I like the web stuff. It is accessible out of the box. You just need to label the buttons and other elements carefully, and everything works so well with a screen reader. if I made this game using something like Pygame, I would have to find another library to provide screen reader output, learn to use that library, and bang my head against the wall when these two libraries refuse to play nicely with each other.

I would like to use this web interface in the future as well, even if I create games with audio, sound effects, and of course, text output. Though the distribution might prove to be a challenge. Something tells me an HTML file is not going to be good for handling all those things. Maybe an executable file? Anyway, I will think about it when I get there.

Number 4: Breaking down a problem into smaller pieces does work.

This is one of those generic pieces of advice that you will encounter sooner or later if you stick with programming long enough. Having said that, it is easier to say that. when you don’t have much expertise with the problem in question, you can hardly begin to break it down, now can you?

Luckily, I had prior experience with this game, so it worked out for me just fine. Of course, creating a design document where I specified all the goals of the project also helped. I understand that on a professional level, this approach may not work. But since this was a personal project, the only thing in the name of a design document is a text file, where I wrote everything down for later reference.

Number 3: Still, some problems are hard to solve.

For me, the biggest challenge was to hide and show certain elements when certain events occurred. For example, when the button to start the game is clicked, the list explaining the rules should disappear. The button should also be replaced with a new one to roll the dice. Once the game is completed, both of the previous elements should appear once more.

Chat GPT was useful here once again. I specifically told it to explain this concept to me using simple HTML and JavaScript, and it provided nice and clean explanations that I was able to understand. Honestly, that bot has become my go-to resource for these things, because I can avoid digging the web and reading the low-quality articles written by authors who are barely paid anything for the said articles, and the poor quality of the work is so obvious.

Another challenge was to implement the reroll functionality when a player rolls a 6. I did think of a loop, but surprisingly, I didn’t have to use one. I did not have to use a loop at all during the entirety of the game, so that was a whole new experience for me.

Naturally, I also screwed up on certain points. For example, I forgot to create an event handler for the button to roll the dice. It was quite embarrassing, to be honest. I’m glad no one saw that moment as it happened.

I also encountered a functional bug. The game was working as intended, and no errors were being shown on the console. So, I thought everything was fine.

Lo and behold, one of the players crossed 100, and the game did not stop it from rolling the number beyond that. I had to revamp the functionality of the game to handle this edge case, which also ended up breaking a few other things.

Number 2: Reaffirmed the belief that complex behavior requires more code.

Snakes and Ladder is more complex than Rock-Paper Scissors. While the game is quite simple, there are a lot of things happening in this game. Naturally, this requires somewhat complicated code to handle behind the scenes.

However since I already had prior experience with this fact, it did not surprise me much this time.

Number 1: VS Code is awesome.

This editor, I can’t even tell you. it is a joy to work with. It works with a screen reader, and though there are some pain points, it works wonderfully. The best part is, that it doesn’t work with JS and HTML alone. if you install the necessary extensions, Visual Studio Code will work with your language of choice as well.

I used it for Java development as well, but after that traitorous Eclipse refused to work for me properly. Of course, bonus points for not lacking like the IDEs do. I’m well aware that some manager in a company curls his mustache, and tells me after looking down his nose at me, “We don’t do things like that here.” but this is my setup, and I am quite happy with it.

Because with this editor, you just need to know the keyboard commands. Once you know that, everything works smoothly since it works so well with the screen readers.

So, these are the lessons I took from this project. You can play the game here, and tell me how was your experience with it.

My only complaint is that I want something nicer than JS. I will see whether that is possible or not, maybe try out Web Assembly? But for that, I better brush up on my neglected Rust skills, because that is the language I intend to use with Web Assembly.

Anyway, see you in the next article.

-Tanish.