Battleship Game

Overview

an online, live multiplayer battleship game. I originally started this by following Ania Kubów tutorial, where she covered the game logic. the plan was that another dev would build the multiplayer logic. but the project got cancelled before that happened. so after finishing the frontend, I realized I was on my own and had to write the entire multiplayer logic. to make things harder, Ania skipped over some of the actual game rules, so I added those in myself too. the game works and it’s surprisingly fun. but let’s be real, the codebase is pure chaos. ships are placed on a 10x10 grid, tracked via classes directly in the DOM. which means yes, users could literally inspect the page and see enemy ship placements. to patch that, I did what any resourceful dev would do: disabled devtools on production. not proud, but hey, as long as it works. right?

Insights

built with Node.js and Socket.IO for real-time communication. there's no frontend framework, just raw JavaScript, HTML, and a lot of DOM manipulation. the game loop logic lives server-side, with socket events managing turn syncing, move validation, and win conditions. there’s no database or sessions. just temporary in-memory state tied to socket connections. while the structure is... unstructured. the app is not even responsive so using desktop device is recommended. building this taught me a ton about WebSockets, multiplayer game flows, and how fast things can spiral when you don’t separate concerns. would I rebuild it now with a clean architecture? absolutely. but I keep it as it is to see a past version of myself.

Build Notes

• the entire game logic is stuffed into a single `index.js` file with 500+ lines of code. refactoring wasn’t even on my radar back then.
• handling the logic behind the player turns and sharing the ship placement data between the clients had me questioning every line of code and life choices.
• ship placements were done by toggling classes on grid divs. looked fine until I realized anyone could inspect elements to cheat.
• despite the mess, the game works. it’s fast, fun, and full of lessons.

TL;DR

• Node.js backend with Socket.IO for multiplayer logic.
• vanilla JS frontend with 100-tile interactive grids.
• Webpack for bundling.