What is Text Adventure Game Engine with MERN Stack?

In this article, we will learn Text Adventure Game Engine with MERN Stack,This free Web Technology tutorial for complete beginners will help you learn Web Technology from scratch.

Text Adventure Game Engine with MERN Stack

News Media Platform with MERN Stack

How to Use MongoDB and Mongoose with Node.js ?

Creating a Text Adventure is a great opportunity for anyone who wants to understand full-stack development. In this article, we’ll make a Text Adventure from scratch using the MERN(MongoDB, Express.js, React, Node.js) stack. This project will help navigate backend development, and teach you the process of integrating frontend functionality with backend infrastructure. It will also showcase how to leverage MongoDB for storing options.

Output Preview: Let us have a look at how the final output will look like.

Prerequisites:

Approach to Create Text Adventure Game using MERN

Set up a MongoDB database to store text nodes with options.
Create a Node.js backend using Express to handle API routes for text nodes.
Develop a React frontend to display text nodes and options, fetching data from the backend API.
Use Axios to make HTTP requests from the frontend to the backend.
Design a simple UI with CSS to enhance the user experience.
Implement logic in React to navigate through text nodes based on user choices.
Deploy the MERN stack app to a hosting platform for accessibility.

Steps to Create Backend Server And Installing Module

Step 1: Create a new directory named backend.

mkdir backend
cd backend

Step 2: Create a server using the following command in your terminal.

npm init -y

Project Structure:

The updated dependencies in package.json file of backend will look like:

 "dependencies": {
      "cors": "^2.8.5",
      "express": "^4.18.2",
      "mongoose": "^8.2.0"
 }

Step 3: Create a file ‘index.js” and set up the server.

JavaScript

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

// Connect to MongoDB using Mongoose
mongoose.connect('mongodb+srv://shreya:asdf@cluster1.jjrojry.mongodb.net/game',
    { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('Connected to MongoDB'))
    .catch(err => console.error('Failed to connect to MongoDB', err));

// Define Mongoose schema for game options
const optionSchema = new mongoose.Schema({
    text: String,
    requiredState: {
        type: Object,
        default: null
    },
    setState: {
        type: Object,
        default: null
    },
    nextText: Number
});

// Define Mongoose schema for game text nodes
const textNodeSchema = new mongoose.Schema({
    id: {
        type: Number,
        required: true,
        unique: true
    },
    text: {
        type: String,
        required: true
    },
    options: {
        type: [optionSchema],
        required: true
    }
});

// Create a Mongoose model for text nodes
const TextNode = mongoose.model('TextNode', textNodeSchema);

// Middleware
app.use(express.json());
app.use(cors());

const textNodesData = [
    {
        "id": 1,
        "text": `You wake up in a strange place and 
      you see a jar of blue rice near you.`,
        "options": [
            {
                "text": "Take the rice",
                "setState": { "blueRice": true },
                "nextText": 2
            },
            {
                "text": "Leave the rice",
                "nextText": 2
            }
        ]
    },
    {
        "id": 2,
        "text": `You venture forth in search of answers to
       where you are when you come across a merchant.`,
        "options": [
            {
                "text": "Trade the rice for a sword",
                "requiredState": "(currentState) => currentState.blueRice",
                "setState": { "blueRice": false, "sword": true },
                "nextText": 3
            },
            {
                "text": "Trade the rice for a shield",
                "requiredState": "(currentState) => currentState.blueRice",
                "setState": { "blueRice": false, "shield": true },
                "nextText": 3
            },
            {
                "text": "Ignore the merchant",
                "nextText": 3
            }
        ]
    },
    {
        "id": 3,
        "text": `After leaving the merchant you start to feel 
      tired and stumble upon a small town next to a
       dangerous looking castle.`,
        "options": [
            {
                "text": "Explore the castle",
                "nextText": 4
            },
            {
                "text": "Find a room to sleep at in the town",
                "nextText": 5
            },
            {
                "text": "Find some hay in a stable to sleep in",
                "nextText": 6
            }
        ]
    },
    {
        "id": 4,
        "text": `You are so tired that you fall asleep while 
      exploring the castle and are killed by some terrible
       monster in your sleep.`,
        "options": [
            {
                "text": "Restart",
                "nextText": -1
            }
        ]
    },
    {
        "id": 5,
        "text": `Without any money to buy a room you break
       into the nearest inn and fall asleep. After a few
        hours of sleep the owner of the inn finds you and
         has the town guard lock you in a cell.`,
        "options": [
            {
                "text": "Restart",
                "nextText": -1
            }
        ]
    },
    {
        "id": 6,
        "text": `You wake up well rested and full of 
      energy ready to explore the nearby castle.`,
        "options": [
            {
                "text": "Explore the castle",
                "nextText": 7
            }
        ]
    },
    {
        "id": 7,
        "text": `While exploring the castle you come
       across a horrible monster in your path.`,
        "options": [
            {
                "text": "Try to run",
                "nextText": 8
            },
            {
                "text": "Attack it with your sword",
                "requiredState": "(currentState) => currentState.sword",
                "nextText": 9
            },
            {
                "text": "Hide behind your shield",
                "requiredState": "(currentState) => currentState.shield",
                "nextText": 10
            },
            {
                "text": "Throw the blue rice at it",
                "requiredState": "(currentState) => currentState.blueRice",
                "nextText": 11
            }
        ]
    },
    {
        "id": 8,
        "text": "Your attempts to run are in vain and the monster easily catches.",
        "options": [
            {
                "text": "Restart",
                "nextText": -1
            }
        ]
    },
    {
        "id": 9,
        "text": `You foolishly thought this monster 
        could be slain with a single sword.`,
        "options": [
            {
                "text": "Restart",
                "nextText": -1
            }
        ]
    },
    {
        "id": 10,
        "text": "The monster laughed as you hid behind your shield and ate you.",
        "options": [
            {
                "text": "Restart",
                "nextText": -1
            }
        ]
    },
    {
        "id": 11,
        "text": `You threw your jar of rice at the monster and it exploded.
       After the dust settled you saw the monster was destroyed.
        Seeing your victory you decide to claim this castle as
         your and live out the rest of your days there.`,
        "options": [
            {
                "text": "Congratulations. Play Again.",
                "nextText": -1
            }
        ]
    }
]
    ;

// Insert each text node into the database
TextNode.insertMany(textNodesData)
    .then(() => {
        console.log('Text nodes inserted successfully');
    })
    .catch((error) => {
        console.error('Error inserting text nodes:', error);
    });

// Routes
app.get('/', (req, res) => {
    res.send('Welcome to the text adventure game API');
});

// Example route to fetch all text nodes
app.get('/api/textNodes', async (req, res) => {
    try {
        const textNodes = await TextNode.find();
        res.json(textNodes);
    } catch (err) {
        console.error('Error fetching text nodes:', err);
        res.status(500).json({ message: 'Internal Server Error' });
    }
});

// Start server
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Start your server using the following command:

node index.js

Steps to Create the Frontend App and Installing Module

Step 1: Create the frontend repository named client in the main repository.

mkdir client
cd client

Step 2: Create React project using following command.

npx create-react-app .

Step 3: Install necessary dependencies in your application using following command.

npm install axios

Project Structure:

Project Structure

The updated dependencies in package.json file of frontend will look like:

  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.7",
    "react": "^18.2.0",
    "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
 }

Example: Create the files according to the project structure and write the following code in respective files.

CSS

/* App.css */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

#text {
    margin-bottom: 20px;
    font-size: 24px;
    padding: 10px;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}

.btn:hover {
    background-color: #45a049;
}

/* Navbar.css */
.navbar {
    background-color: #333;
    color: white;
    padding: 10px 0;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    height: 40px;
    margin-right: 10px;
}

h1 {
    margin: 0;
}

JavaScript

//App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Navbar from './Navbar.js';
import './App.css';
function App() {
    const [currentTextNode, setCurrentTextNode] = useState(null);
    const [state, setState] = useState({});
    const [textNodes, setTextNodes] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:5000/api/textNodes')
            .then(response => {
                const textNodesData = response.data;
                setTextNodes(textNodesData);
                startGame(textNodesData);
            })
            .catch(error => {
                console.error('Error fetching text nodes:', error);
            });
    }, []);

    const startGame = (textNodes) => {
        const initialTextNode = textNodes.find(node => node.id === 1);
        setCurrentTextNode(initialTextNode);
        setState({});
    };

    const selectOption = (option) => {
        const nextTextNodeId = option.nextText;
        if (nextTextNodeId === -1) {
            startGame(textNodes); // Restart the game
        } else {
            const nextTextNode = textNodes.find(node => node.id === nextTextNodeId);
            if (nextTextNode) {
                setCurrentTextNode(nextTextNode);
                setState({ ...state, ...option.setState });
            } else {
                console.error('Next text node not found:', nextTextNodeId);
            }
        }
    };

    if (!currentTextNode) {
        return <div>Loading...</div>;
    }

    return (
        <div className="container">
            <Navbar />
            <div id="text">{currentTextNode.text}</div>
            <div id="option-buttons" className="btn-grid">
                {currentTextNode.options.map(option => (
                    <button
                        key={option.text}
                        className="btn"
                        onClick={() => selectOption(option)}
                    >
                        {option.text}
                    </button>
                ))}
            </div>
        </div>
    );
}

export default App;

JavaScript

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

JavaScript

// Navbar.js
import React from 'react';

function Navbar() {
    return (
        <nav className="navbar">
            <div className="container">
                <img src="https://media.w3wiki.net/gfg-gg-logo.svg"
                    alt="w3wiki Logo" className="logo" />
                <h1>Text Adventure</h1>
            </div>
        </nav>
    );
}

export default Navbar;