DEV Community

Cover image for Developing a 3D game which runs on your browser
Rishav Mazumdar
Rishav Mazumdar

Posted on

1

Developing a 3D game which runs on your browser

So it all begins with a person who is inspired to develop games, but is experienced in web development and has no prior experience with C#. Yes, that person is me πŸ˜…. I an a web developer who had previously created a few basic 2D games like PONG, Snake etc using javascript and PyGame but never explored the 3D version of game development, until this year when I discovered this awesome Javascript library Three.js.

I have created a 3D TPP game which sets your character in a sandbox world where you can move around, eliminate bots, or get eliminated by them.
Along with this, I have also used the previous knowledge I had about backend and developed a multiplayer mode where all the joined users are synchronized to enable a smooth gameplay.

Some useful linksπŸ‘€

Github Repository

Deployment

Hmm, that seems enough of an introduction... Let's elaborate further

Singleplayer Mode

A screenshot of singleplayer mode

Some exciting features added:

  • The terrain generation is random, and may reset every time the page is refreshed.
  • Position of bots is handled by spatial QuadTree, which reduces the load on processor by handling only the nearest bots movement (not all the bots on the map)
  • Added dense fog for a better battleground appearance
  • Moving water (cause why not?)
  • Some bots chase you, and may damage you if too near
  • Switch weapons(for Melee attack) and destroy bots
  • Shoot projectiles to destroy bots

Multiplayer Mode

A screenshot of multiplayer mode

Some exciting features added:

  • Usernames hover above the players
  • Syncing of user positions in real time using SocketIO
  • A real time chat feature for better experience

System Architecture

Frontend

A schematic view of frontend design

Followed OOP patterns to enable efficient handling of shared variables, repeating blocks of code and dependencies

Backend

A schematic view of backend structure

Used SocketIO for syncing of all the clients, and NodeJS as backend

Ending notesπŸ˜…:

  • The server for multiplayer mode is currently down, had some deployment issues due to heavy traffic, would figure out some solution in a while.
  • There might be some bugs, if found you may report it here

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay