When it comes to MongoDB, an often overlooked industry that it works amazingly well in is gaming. It works great in gaming because of its performance, but more importantly its ability to store whatever complex data the game throws at it.

Let’s say you wanted to create a drawing game like Pictionary. I know what you’re thinking: why would I ever want to create a Pictionary game with MongoDB integration? Well, what if you wanted to be able to play with friends remotely? In this scenario, you could store your brushstrokes in MongoDB and load those brushstrokes on your friend’s device. These brushstrokes can be pretty much anything. They could be images, vector data, or something else entirely.

A drawing game is just one of many possible games that would pair well with MongoDB.

In this tutorial, we’re going to create a drawing game using Phaser. The data will be stored and synced with MongoDB and be visible on everyone else’s device whether that is desktop or mobile.

Take the following animated image for example:

In the above example, I have my MacBook as well as my iOS device in the display. I’m drawing on my iOS device, on the right, and after the brushstrokes are considered complete, they are sent to MongoDB and the other clients, such as the MacBook. This is why the strokes are not instantly available as the strokes are in progress.

The Tutorial Requirements

There are a few requirements that must be met prior to starting this tutorial:

• A MongoDB Atlas free tier cluster or better must be available.
• A MongoDB Realm application configured to use the Atlas cluster.

The heavy lifting of this example will be with Phaser, MongoDB Atlas, and MongoDB Realm.

MongoDB Atlas has a forever FREE tier that can be configured in the MongoDB Cloud.

There’s no account requirement or downloads necessary when it comes to building Phaser games. These games are both web and mobile compatible.

Drawing with Phaser, HTML, and Simple JavaScript

When it comes to Phaser, you can do everything within a single HTML file. This file must be served rather than opened from the local filesystem, but nothing extravagant needs to be done with the project.

Let’s start by creating a project somewhere on your computer with an index.html file and a game.js file. We’re going to add some boilerplate code to our index.html prior to adding our game logic to the game.js file.

#mongodb