Build a Simple React JavaScript Interactive Interactive Text-Based Storytelling Game: A Beginner’s Guide

Written by

learnmodernjavascript

in

Ever wanted to create your own interactive story, where the reader’s choices shape the narrative? This tutorial will guide you through building a simple text-based storytelling game using React JS. This project is perfect for beginners and intermediate developers looking to solidify their understanding of React concepts like state management, event handling, and conditional rendering. We’ll break down the process step-by-step, making it easy to follow along and create your own engaging game.

Why Build a Text-Based Storytelling Game?

Text-based games are a fantastic way to learn programming. They allow you to focus on the core logic and structure of your application without getting bogged down in complex graphics or user interfaces. Building this type of game is an excellent project for several reasons:

  • It’s Beginner-Friendly: The core concepts are relatively simple, making it a great starting point for React developers.
  • It Teaches Key React Concepts: You’ll gain practical experience with state management, event handling, and conditional rendering.
  • It’s Engaging: Creating a game is fun and rewarding, providing motivation to learn and experiment.
  • It’s Customizable: You can easily expand the game with more choices, story branches, and features.

Setting Up Your React Project

Before we dive into the code, let’s set up a new React project. We’ll use Create React App, which is the easiest way to get started.

  1. Open your terminal or command prompt.
  2. Navigate to the directory where you want to create your project.
  3. Run the following command:
npx create-react-app story-game
cd story-game

This will create a new React project named “story-game”. The `cd story-game` command moves you into the project directory.

Now, let’s start the development server:

npm start

This will open your project in your web browser, usually at http://localhost:3000. You should see the default React app.

Project Structure

We’ll keep the project structure simple. Here’s how we’ll organize our files:

  • src/App.js: This will be our main component, handling the game’s logic and rendering the game interface.
  • src/components/Story.js (Optional): We could create a separate component to manage the story content if it becomes very large.

Building the Game Logic in App.js

Let’s start by cleaning up `src/App.js`. Replace the existing code with the following:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [currentScene, setCurrentScene] = useState(0);
  const [story, setStory] = useState([
    {
      id: 0,
      text: "You wake up in a dark forest. You see a path to the north and a path to the east. What do you do?",
      choices: [
        { text: "Go North", nextScene: 1 },
        { text: "Go East", nextScene: 2 }
      ]
    },
    {
      id: 1,
      text: "You walk north and find a hidden cave. Do you enter?",
      choices: [
        { text: "Enter the cave", nextScene: 3 },
        { text: "Keep walking", nextScene: 4 }
      ]
    },
    {
      id: 2,
      text: "You walk east and encounter a friendly traveler. They offer you food. Do you accept?",
      choices: [
        { text: "Accept food", nextScene: 5 },
        { text: "Refuse food", nextScene: 6 }
      ]
    },
    {
      id: 3,
      text: "You find treasure! You win!",
      choices: [] // No choices means game over or end of the story
    },
    {
      id: 4,
      text: "You get lost in the forest and starve. Game Over.",
      choices: []
    },
    {
      id: 5,
      text: "The food was poisoned! You die. Game Over.",
      choices: []
    },
    {
      id: 6,
      text: "The traveler is offended and leaves. You are alone and hungry. Game Over.",
      choices: []
    }
  ]);

  const handleChoiceClick = (nextSceneId) => {
    setCurrentScene(nextSceneId);
  };

  const currentSceneData = story.find(scene => scene.id === currentScene);

  return (
    <div>
      <header>
        <h1>Text-Based Story Game</h1>
      </header>
      <main>
        <p>{currentSceneData?.text}</p>
        {currentSceneData?.choices.map((choice, index) => (
          <button> handleChoiceClick(choice.nextScene)}>
            {choice.text}
          </button>
        ))}
      </main>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import `useState`: This hook allows us to manage the game’s state.
  • `currentScene`: This state variable keeps track of the current scene the player is in. It starts at 0 (the first scene).
  • `story`: This is an array of objects. Each object represents a scene in the story.
  • `id`: Unique identifier for each scene.
  • `text`: The text that describes the scene to the player.
  • `choices`: An array of objects. Each object represents a choice the player can make.
  • `text`: The text of the choice displayed to the player.
  • `nextScene`: The `id` of the scene to go to if the player chooses this option.
  • `handleChoiceClick`: This function is called when the player clicks a choice button. It updates the `currentScene` state to the `nextSceneId`.
  • `currentSceneData`: This variable finds the current scene data from the `story` array based on the `currentScene` id.
  • JSX Structure: The JSX renders the current scene’s text and a button for each choice. The buttons call `handleChoiceClick` when clicked.

Adding Styles (App.css)

To make the game look a bit nicer, let’s add some basic styling to `src/App.css`. Replace the existing content with the following:

.App {
  text-align: center;
  font-family: sans-serif;
  background-color: #f0f0f0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.App-header {
  background-color: #282c34;
  color: white;
  padding: 20px;
  margin-bottom: 20px;
  width: 100%;
}

main {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  width: 80%;
  max-width: 600px;
}

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

This CSS provides basic styling for the game’s layout, header, main content area, and buttons.

Running and Testing the Game

Save your changes, and the React development server should automatically update the browser. You should now see the first scene of your game. Click on the choices to navigate through the story. If you get “Game Over” or reach the end of the story, the choices will disappear because the `choices` array will be empty.

Expanding the Game

Now that we have the basic structure, let’s look at how to expand it. Here are some ideas:

Adding More Scenes and Choices

The most basic way to expand the game is to add more scenes and choices to the `story` array. Simply add more objects to the array, each representing a new scene. Make sure to update the `nextScene` values in the `choices` to point to the correct scene `id`s.

Example of adding a new scene:

{
  id: 7,
  text: "You find a mysterious box. Do you open it?",
  choices: [
    { text: "Yes", nextScene: 8 },
    { text: "No", nextScene: 9 }
  ]
}

Implementing Game Over and Win Conditions

We’ve already implemented basic “Game Over” scenarios. When a scene has no choices, the game effectively ends. You can expand on this by:

  • Adding more “Game Over” scenes.
  • Creating a “Win” condition.
  • Displaying a message indicating why the game ended.

To display a game over or win message, you could add a condition in the JSX to check if `currentSceneData?.choices.length === 0` and display a different component or message in that case.

{currentSceneData?.choices.length === 0 ? (
  <p>Game Over or You Win!</p>
) : (
  currentSceneData?.choices.map((choice, index) => (
    <button> handleChoiceClick(choice.nextScene)}>
      {choice.text}
    </button>
  ))
)}

Adding More Complex Logic (Advanced)

For more advanced games, you can add:

  • Inventory: Use state to track items the player collects.
  • Stats: Track character stats (e.g., health, strength).
  • Conditional Choices: Show choices based on the player’s inventory or stats. This would involve adding logic inside the `handleChoiceClick` function or within the JSX rendering of choices.
  • Random Events: Introduce chance with `Math.random()` to create unexpected events.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React applications and how to avoid them:

  • Incorrect State Updates: Always use the `useState` hook to update state. Directly modifying state variables (e.g., `currentScene = 1;`) won’t trigger a re-render.
  • Missing Keys in `map()`: When using `map()` to render a list of elements, always provide a unique `key` prop to each element. This helps React efficiently update the DOM.
  • Incorrect Event Handling: Make sure you’re passing the correct arguments to your event handlers. In this case, we’re passing `choice.nextScene` to `handleChoiceClick`.
  • Not Understanding Component Re-renders: Be aware that when state changes, the component re-renders. This is how the UI updates to reflect the new state. If you’re seeing unexpected behavior, make sure your state updates are correct.
  • Typos: Programming is all about precision. A missing character or a misspelled variable name can break the application. Double-check your code for typos.

Step-by-Step Instructions Summary

Here’s a recap of the steps we’ve taken:

  1. Set up a new React project using `create-react-app`.
  2. Defined the game’s state using `useState`. This included:
    • `currentScene`: Tracks the current scene.
    • `story`: An array of scene objects, each with text and choices.
  3. Created the `handleChoiceClick` function to update the `currentScene` state.
  4. Rendered the current scene’s text and choices using JSX.
  5. Added basic styling in `App.css`.
  6. Tested the game in the browser.

Key Takeaways

  • React State Management: You’ve learned how to use the `useState` hook to manage the state of your application.
  • Event Handling: You’ve seen how to handle user interactions (button clicks) and update the state accordingly.
  • Conditional Rendering: You’ve used conditional rendering (e.g., `currentSceneData?.choices.map(…)`) to display different content based on the game’s state.
  • Component Structure: You’ve seen how to structure a React component to manage the game’s logic and UI.

FAQ

Here are some frequently asked questions:

  1. How do I add more scenes to the game?

    Simply add more objects to the `story` array in `App.js`. Each object should have an `id`, `text`, and `choices` property. Make sure the `nextScene` values in your choices point to valid scene `id`s.

  2. How do I make a choice lead to a game over?

    Provide an empty `choices` array for the scene that should end the game. For example: `{ id: 7, text: “You fall into a pit.”, choices: [] }`.

  3. Can I add images or other media to the game?

    Yes, you can. You’d need to learn how to import and display images in React. You could add an `image` property to your scene objects and conditionally render an `` tag in your JSX. However, for this simple text-based game, we focused on the core concepts.

  4. How can I make the game more interactive?

    You can add features like an inventory system, character stats, and conditional choices that depend on the player’s actions. This would involve adding more complex state management and logic to your components.

Building this text-based storytelling game is a great exercise in React development. It allows you to practice core concepts in a fun and engaging way. You’ve learned how to manage state, handle user input, and render content conditionally. As you continue to learn React, consider expanding on this project, adding new features, and experimenting with different game mechanics. The possibilities are endless, and with each line of code you write, you’ll be building not just a game, but also your skills as a developer. Keep experimenting, keep learning, and most importantly, keep creating.

More posts