Hi there, it’s been a while since I published a project using p5.js.
This one was an interesting challenge design wise, but also had a lot of challenging parts in the development. I learned a lot along the way and I thought I might share a bit with you here :
- Overall architecture and consistency : This project, while being short to play (5-10mn), is by far the most complex I’ve worked on in terms of development, and I stumbled quite a lot while building its overall architecture. Along the way, I had to adopt coding conventions and repeatedly iterate on different parts before achieving a consistent whole. There’s still plenty I could refine. If I were to do it again, I’d probably consider using TypeScript, mainly to avoid going back and forth between function to double check parameters types and so on.
- AI move calculation : I used Web Workers for the first time to run algorithms while keeping animations smooth. It’s super handy, I definitely recommend playing around with it if you haven’t yet.
- AI algorithm optimization : I ran into a lot of logic puzzles to make the AI opponents feel challenging while still running efficiently in browsers. One effective solution was to enforce a specific order in which the AI selects and tests moves, which avoids generating a large number of duplicate game states to compare.
- Animation queue : This turned out to be more challenging than I expected. Some animations are asynchronous, while others need to wait until previous ones resolve. Designing a consistent system for this required careful thought, and it’s still not as handy as I’d like.
- Terrain generation : I wanted everything to be generated dynamically to make map design iterations easier, so I relied on a shader. A single shader handles the background, terrain, and lighting effects. The trickiest part was tracking down NaN values that occasionally appeared, causing black pixels on older devices.
- UI design UI design : This was the part I expected to be the hardest. I wanted the game to be strategic while still easy to grasp. Design-wise, I think I stripped the gameplay down to the minimum very efficiently, but given our short attention spans in browsers, I still had to put a lot of effort into making the game understandable at first glance. I was lucky to have a good number of playtesters who helped me spot small edge cases that were confusing. One great solution I found was using day/night lighting to reinforce changes in game states. I also realized the game could already be played in five distinct ways, based on the options available when starting a new game, so I created five dedicated interfaces with subtle changes to support each mode.
As always, p5 was a big help when it comes to display elements on the screen, managing curve vertex, 3d models and different canvas.
I would be happy to discuss the game or any developpement aspect with you here. If you have any feedbacks, it would be very appreciated ! 
The game can be played here :