Written by Vasi
January 29
Let’s take a look at the Tic Tac Toe game I created using Svelte, MDX, and Astro.
I will not go too much into detail about Astro in this post, but because of its amazing integrations, I can create pages in MDX, create my Svelte components in the project, and then simply add them to the MDX file. It’s amazing how easily this tech combines!
Give the game a try here! If you have a friend nearby, you can play with them, or you can play with the AI 😨😨. There is also a difficulty setting (we can talk more about this “AI” later).
I started learning about Svelte when the latest version was 4. This game was built with Svelte 5, and I had to go back to the documentation and learn again as the framework had some significant changes in version 5. I enjoyed using runes, the new way of declaring a reactive state. There have been a lot more changes to the framework, but I will leave it for another time as I still explore the new functionality.
I learn best by doing, and building a game like Tic Tac Toe provides a manageable project scope while allowing me to explore core Svelte concepts. I was already familiar with the component model and state management, but I got the chance to explore the new way of reactivity in Svelte using runes. What I liked most about Svelte 4 did not change in Svelte 5: the fact that you can do more with less code.
It was fun to build and to learn at the same time. Currently, you can play the game with someone else by taking turns, or you can play with the “AI”. Even though this is a rather small project, there are always things to improve. Currently, the AI only plays as Player O, so this will probably be my next feature to improve this little game.
As we are currently living in the AI boom era and the word “AI” is overused for almost anything, I thought it would be funny to also include it into this little project.
If you tried the game, you probably saw that when you click to turn AI on, a difficulty slider is shown with 2 choices: “Easy” and “Hard”.
The Easy difficulty is by no means intelligent, as it will just pick a random cell on the board that is empty. This was my first pass at making the game more interactive. To be honest, even this randomness can prove challenging in such a small scope. My girlfriend had some tough time with the easy difficulty 😃 (I hope she does not read this, otherwise someone is sleeping on the couch, and it’s definitely not going to be her😟).
The Hard difficulty, on the other hand, has an intelligent algorithm behind it that maybe can categorize it as AI (just maybe). As I was trying to think of a better way to add a worthy opponent, I remembered my advanced algorithms class from university where we discussed game theory and I learned about the Minmax algorithm. After a quick refresh of my memory about the algorithm, this was the best choice.
The minmax is a recursive algorithm to find the optimal move for a player in a game by assuming the opponent will also play optimally. It has its own drawbacks, but for a small game like this, it works quite well and is also not too complicated to implement. When it’s the algorithm’s turn, it calculates all possible moves and counter moves. First, it assigns a positive value to an outcome where the algorithm wins and a negative value where the human wins. Then, it moves backward from that end outcome and chooses the maximum value for the algorithm’s move and the minimum value for the human’s move. When reaching the current state of the game, it picks the maximum value, as this is the one that can lead the algorithm to win.
So after I adapted the algorithm to my use case and my representation of the game state, I gave it a try, and I think it’s a worthy opponent 💪.
Fun fact, if you played the game above, you noticed that there is a small wait time when the “AI” makes the move. It’s not that the computations take that long; it’s just to make the game feel more natural.