The Quest for Creating a Multiplayer Browser Game in 2024
The journey of developing a multiplayer browser game begins with a realization of feeling stagnant in a programming-related job. To overcome this stagnation, the developer decides to venture into the “software job hunt” of 2024, seeking to create something meaningful and illustrative of their skillset. The goal is to develop a one-on-one turn-based tactical game played on a hexagonal grid, featuring tanks maneuvering to shoot each other.
By embracing this creative challenge, the developer aims to add a non-consequential project to their resume while also generating proof of basic computer literacy. The game is designed to feature a shrinking map and a limited field of vision, introducing essential strategy elements as players navigate and attempt to outmaneuver their opponent's tanks.
For the visual aesthetics, the developer chooses pixelated isometric graphics, utilizing prior work on a simple 3D renderer and low-poly models to generate game sprites. The game functions using JavaScript on the client side, with TypeScript being employed to avoid reference errors. The server side utilizes Google’s Gopher language, coupled with the gorilla/websocket library to handle real-time communications between players.
The development process begins with making the game canvas responsive, ensuring the game remains clear on devices with varied pixel ratios. The architecture starts with creating a GameState object, which holds information about all game objects, while a display driver handles the rendering.
Once the canvas is set up, interactivity such as map dragging is added, setting the foundation for user engagement. Moving tanks and shooting mechanics are then integrated; players can move their tanks by clicking and dragging to a new hex or shooting with a longer press and release. Key features like a "fog of war," which limits players' visibility, and markers indicating possible moves are also incorporated to enhance tactical decision-making.
The UI system requires careful consideration, as buttons have to be drawn onto the canvas while ensuring they are functional without relying on traditional HTML elements. The developer encounters challenges with pointer events, distinguishing between UI interactions and gameplay actions, which requires innovative solutions to ensure both systems can function side by side.
With the client side largely functional, the focus shifts to server-side coding. Establishing a file server and websocket endpoint allows for interaction between the client and server. Using JSON facilitates message exchanges, while ensuring that player actions are resolved correctly, accounting for collisions and ensuring that game states accurately reflect the real-time actions from both players.
Multiplayer logic introduces substantial complexity, necessitating a range of validation checks for each player move. Handling cases like tank visibility, path overlaps, and actions involving obstacles becomes a meticulous task that highlights the importance of robust error-checking within the game.
With the core gameplay established, animations become the next focal point. The developer explores various levels of complexity for tank movement, experimenting with constant speed or more fluid motion, including acceleration and smoothing path curves. Additional visual elements, such as explosions and smoke, are implemented, enhancing the game experience with eye-catching effects.
Sound design, though not initially a priority, begins with incorporating audio effects for explosions and tank sounds. The utilization of JavaScript’s AudioContext API adds depth, further immersing players during gameplay.
As the project nears completion, matchmaking features are included, allowing players to join private rooms or engage in open matches. The developer wrestles with compatibility issues, particularly for mobile players, where traditional input methods via canvas are updated to accommodate user experience better.
As significant milestones are hit—player animations working seamlessly, the server handling real multiplayer logic, and the inclusion of UI elements—the game begins to take its final form. However, several challenges remain, notably addressing mobile compatibility issues resulting from aggressive iOS throttling of websocket connections, requiring thoughtful workarounds.
With persistence, the developer concludes the quest of creating a multiplayer browser game. The game is made publicly available at tankops.xyz, along with the source code for others to explore. Although there are unresolved issues and potential limitations, the comprehensive development journey showcases the complexity and satisfaction found within game creation, skill improvement, and the thrill of building something new in a dynamic field.
Through this endeavor, not only has the developer gained valuable experience, but they have also produced a functional and engaging product, aiming to attract interest from players while simultaneously enriching their own programming journey.
Part 1/9:
The Quest for Creating a Multiplayer Browser Game in 2024
The journey of developing a multiplayer browser game begins with a realization of feeling stagnant in a programming-related job. To overcome this stagnation, the developer decides to venture into the “software job hunt” of 2024, seeking to create something meaningful and illustrative of their skillset. The goal is to develop a one-on-one turn-based tactical game played on a hexagonal grid, featuring tanks maneuvering to shoot each other.
Part 2/9:
By embracing this creative challenge, the developer aims to add a non-consequential project to their resume while also generating proof of basic computer literacy. The game is designed to feature a shrinking map and a limited field of vision, introducing essential strategy elements as players navigate and attempt to outmaneuver their opponent's tanks.
Game Graphics and Development Tools
Part 3/9:
For the visual aesthetics, the developer chooses pixelated isometric graphics, utilizing prior work on a simple 3D renderer and low-poly models to generate game sprites. The game functions using JavaScript on the client side, with TypeScript being employed to avoid reference errors. The server side utilizes Google’s Gopher language, coupled with the gorilla/websocket library to handle real-time communications between players.
The development process begins with making the game canvas responsive, ensuring the game remains clear on devices with varied pixel ratios. The architecture starts with creating a GameState object, which holds information about all game objects, while a display driver handles the rendering.
Implementing Gameplay Mechanics
Part 4/9:
Once the canvas is set up, interactivity such as map dragging is added, setting the foundation for user engagement. Moving tanks and shooting mechanics are then integrated; players can move their tanks by clicking and dragging to a new hex or shooting with a longer press and release. Key features like a "fog of war," which limits players' visibility, and markers indicating possible moves are also incorporated to enhance tactical decision-making.
Part 5/9:
The UI system requires careful consideration, as buttons have to be drawn onto the canvas while ensuring they are functional without relying on traditional HTML elements. The developer encounters challenges with pointer events, distinguishing between UI interactions and gameplay actions, which requires innovative solutions to ensure both systems can function side by side.
Server Logic and Multiplayer Integration
Part 6/9:
With the client side largely functional, the focus shifts to server-side coding. Establishing a file server and websocket endpoint allows for interaction between the client and server. Using JSON facilitates message exchanges, while ensuring that player actions are resolved correctly, accounting for collisions and ensuring that game states accurately reflect the real-time actions from both players.
Multiplayer logic introduces substantial complexity, necessitating a range of validation checks for each player move. Handling cases like tank visibility, path overlaps, and actions involving obstacles becomes a meticulous task that highlights the importance of robust error-checking within the game.
Adding Animations and Sound Effects
Part 7/9:
With the core gameplay established, animations become the next focal point. The developer explores various levels of complexity for tank movement, experimenting with constant speed or more fluid motion, including acceleration and smoothing path curves. Additional visual elements, such as explosions and smoke, are implemented, enhancing the game experience with eye-catching effects.
Sound design, though not initially a priority, begins with incorporating audio effects for explosions and tank sounds. The utilization of JavaScript’s AudioContext API adds depth, further immersing players during gameplay.
Final Touches and Deployment
Part 8/9:
As the project nears completion, matchmaking features are included, allowing players to join private rooms or engage in open matches. The developer wrestles with compatibility issues, particularly for mobile players, where traditional input methods via canvas are updated to accommodate user experience better.
As significant milestones are hit—player animations working seamlessly, the server handling real multiplayer logic, and the inclusion of UI elements—the game begins to take its final form. However, several challenges remain, notably addressing mobile compatibility issues resulting from aggressive iOS throttling of websocket connections, requiring thoughtful workarounds.
Conclusion
Part 9/9:
With persistence, the developer concludes the quest of creating a multiplayer browser game. The game is made publicly available at tankops.xyz, along with the source code for others to explore. Although there are unresolved issues and potential limitations, the comprehensive development journey showcases the complexity and satisfaction found within game creation, skill improvement, and the thrill of building something new in a dynamic field.
Through this endeavor, not only has the developer gained valuable experience, but they have also produced a functional and engaging product, aiming to attract interest from players while simultaneously enriching their own programming journey.