Making the VR Game Dynamic using MERN

In this chapter, we will extend the MongoDB, Express.js, React.js, and Node.js (MERN) skeleton application to build the MERN VR Game application, and use it to convert the static React 360 game developed in the previous chapter into a dynamic game. We will achieve this by replacing the sample game data with game details fetched directly from the database. We will use the MERN stack technologies to implement a game model and Create, Read, Update, and Delete (CRUD) application programming interfaces (APIs) in the backend, which will allow storage and retrieval of games, and frontend views, which will allow users to make their own games besides playing any of the games on the platform in their browser. We will update and integrate the game developed with React 360 into the game platform developed with MERN technologies. After completing these...

Introducing the dynamic MERN VR Game application

Throughout this chapter, we will develop the MERN VR Game application with MERN-stack technologies. On this platform, registered users will be able to make and modify their own games by providing an equirectangular image for the game world, and the VR object resources, including transform property values for each object to be placed in the game world. Any visitor to the application will be able to browse through all the games added by the makers and play any game, to find and collect the 3D objects in the game world that are relevant to the clue or description of each game. When a registered user signs into the application, they will see a home page with all the games listed and an option to make their own game, as pictured in the following screenshot:

The code for the complete MERN VR Game application is available on GitHub at...

Defining a Game model

In order to store details of each game in the platform, we will implement a Mongoose model to define a Game model, and the implementation will be similar to other Mongoose model implementations covered in previous chapters, such as the Course model defined in Chapter 6, Building a Web-Based Classroom Application. In Chapter 13, Developing a Web-Based VR Game, the Game data structure section laid out the details needed for each game in order to implement the scavenger-hunt features defined for the gameplay.

We will design the game schema based on these specific details about the game, its VR objects, and also a reference to the game maker. In the following sections, we will discuss the specifics of the game schema, the sub-schema for storing individual VR objects that will be a part of the game, and the validation check to ensure a minimum number of VR...

Implementing game CRUD APIs

In order to build a game platform that allows VR games to be made, managed, and accessed, we need to extend the backend to accept requests that enable game data manipulation in the database. To make these features possible, the backend in the MERN VR Game application will expose a set of CRUD APIs for creating, editing, reading, listing, and deleting games from the database, which can be used in the frontend of the application with fetch calls, including in the React 360 game implementation. In the following sections, we will implement these CRUD API endpoints in the backend, along with the corresponding fetch methods that will be deployed in the frontend to use these APIs.

Creating a new game

A...

Adding a form for creating and editing games

Users registered on the MERN VR Game application will be able to make new games and modify these games from views on the application. To implement these views, we will add React components that allow users to compose and modify the game details and VR object details for each game. As the form for creating new and editing existing games will have similar form fields for composing game details and VR object details, we will make reusable components that can be used both for creating and editing purposes. In the following sections, we will discuss the form views for creating a new game and editing an existing game, and the implementation of the common form components in these views.

Making a new game

...

Adding the game list views

Visitors to MERN VR Game will access the games on the application from lists rendered on the home page and individual user profiles. The home page will list all the games on the application, and the games by a specific maker will be listed on their user profile page. These list views will iterate through game data fetched using the backend APIs for listing games, and render details of each game in a reusable React component.

In the following sections, we will discuss the implementation for rendering all games and games only by a specific maker, using a reusable component for rendering each game on the list.

Rendering lists of games

We will render all the games available on the platform on the home...

Playing the VR game

Users on the MERN VR Game application will be able to open and play any of the VR games from within the application. To enable this, we will add an API on the server that renders the index.html file, which was generated with React 360, as discussed in the previous chapter, Chapter 13, Developing a Web-Based VR Game. This API on the backend will receive a GET request at the following path:

/game/play?id=<game ID>

This path takes a game ID value as a query parameter. The game ID in this URL will be used in the React 360 code, as elaborated on later in the chapter, to fetch the game's details using the load game API. In the following section, we will look at the implementation of the backend API that will handle this GET request to start playing a game when the user clicks on the PLAY GAME button.

...

Updating the game code in React 360

With the game backend all set up in the MERN application, we can update the React 360 project code we developed in Chapter 13, Developing a Web-Based VR Game, to make it render games directly from the game collection in the database.

We will use the game ID in the link that opens the React 360 application to fetch game details, using the load game API from within the React 360 code. Then, we will set this retrieved game data to the state so that the game loads details from the database instead of the static sample data we used in Chapter 13, Developing a Web-Based VR Game. Once the code is updated, we can bundle it again and place the compiled files in the MERN application before trying out the integration, as discussed in the following sections.

...

Summary

In this chapter, we integrated the capabilities of the MERN stack technologies with React 360 to develop a dynamic VR game application for the web.

We extended the MERN skeleton application to build a working backend that stores VR game details and allows us to make API calls to manipulate these details. We added React views that let users modify games and browse through the games, with the option to launch and play the VR game at a specified route rendered directly by the server.

Finally, we updated the React 360 project code to pass data between the MERN application and the VR game view, by retrieving query parameters from the incoming URL, and using fetch to retrieve data with the game API.

This integration of the React 360 code with the MERN stack application produced a fully functioning and dynamic web-based VR game application, demonstrating how MERN stack technologies...