Build a Simple Node.js Interactive Web-Based Number Guessing Game

Written by

javascriptdebugged

in

Ever wanted to create a fun, interactive game that you can share with friends or add to your portfolio? This tutorial will guide you through building a number guessing game using Node.js, a popular JavaScript runtime environment. We’ll cover everything from setting up your project to deploying your game, making it accessible to anyone with a web browser. This project is perfect for beginners and intermediate developers looking to solidify their understanding of Node.js and web development fundamentals.

Why Build a Number Guessing Game?

The number guessing game is an excellent project for several reasons:

  • It’s Beginner-Friendly: The core logic is straightforward, making it easy to understand and implement.
  • It Reinforces Fundamentals: You’ll practice essential concepts like user input, conditional statements, random number generation, and basic web server interactions.
  • It’s Interactive: The game provides immediate feedback to the user, enhancing engagement.
  • It’s a Practical Example: You’ll learn how to structure a simple web application using Node.js and related technologies.
  • It’s a Good Portfolio Piece: Showcasing this project demonstrates your ability to build interactive web applications.

By the end of this tutorial, you’ll have a fully functional number guessing game that you can customize and share. Let’s get started!

Prerequisites

Before we begin, ensure you have the following installed on your system:

  • Node.js: Download and install the latest LTS (Long Term Support) version from the official Node.js website: https://nodejs.org/. This will also install npm (Node Package Manager).
  • A Text Editor or IDE: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.).
  • A Web Browser: Chrome, Firefox, Safari, or any modern browser will work.

Setting Up Your Project

Let’s create the project directory and initialize it with npm. Open your terminal or command prompt and execute the following commands:

mkdir number-guessing-game
cd number-guessing-game
npm init -y

This will create a new directory named “number-guessing-game”, navigate into it, and initialize a new Node.js project. The npm init -y command creates a package.json file with default settings.

Installing Dependencies

For this project, we’ll use a few dependencies to make our lives easier:

  • express: A web application framework for Node.js. It simplifies the process of creating web servers and handling requests.
  • nodemon: A utility that automatically restarts your server when file changes are detected. This saves you from manually restarting the server every time you make changes.

Install these dependencies using npm:

npm install express nodemon --save

The --save flag adds the dependencies to your package.json file, so you can easily reinstall them later if needed.

Creating the Server (server.js)

Create a file named server.js in your project directory. This file will contain the core logic of your web server. Paste the following code into server.js:

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;

// Serve static files from the 'public' directory
app.use(express.static('public'));

// Middleware to parse URL-encoded bodies
app.use(express.urlencoded({ extended: true }));

// Generate a random number
let secretNumber = Math.floor(Math.random() * 100) + 1; // Number between 1 and 100
let attempts = 0;

// Route for the home page (GET request)
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Route to handle guess submission (POST request)
app.post('/guess', (req, res) => {
  const guess = parseInt(req.body.guess);
  attempts++;

  if (isNaN(guess) || guess  100) {
    return res.send(`Invalid input. Please enter a number between 1 and 100. <a href="/">Try again</a>`);
  }

  let message = '';

  if (guess === secretNumber) {
    message = `Congratulations! You guessed the number ${secretNumber} in ${attempts} attempts. <a href="/">Play again</a>`;
    secretNumber = Math.floor(Math.random() * 100) + 1; // Reset for a new game
    attempts = 0;
  } else if (guess < secretNumber) {
    message = `Too low! Try again. Attempts: ${attempts}`;
  } else {
    message = `Too high! Try again. Attempts: ${attempts}`;
  }

  res.send(`${message} <a href="/">Back to game</a>`);
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Let’s break down this code:

  • Importing Modules: We import the express module to create our server and the path module to handle file paths.
  • Creating an Express App: const app = express(); creates an instance of the Express application.
  • Setting the Port: const port = process.env.PORT || 3000; defines the port the server will listen on. It uses the environment variable PORT if available, otherwise defaults to 3000.
  • Serving Static Files: app.use(express.static('public')); tells Express to serve static files (HTML, CSS, JavaScript, images) from the “public” directory.
  • Parsing URL-encoded bodies: app.use(express.urlencoded({ extended: true })); is middleware that parses incoming requests with URL-encoded payloads (like form submissions).
  • Random Number Generation: let secretNumber = Math.floor(Math.random() * 100) + 1; generates a random number between 1 and 100. attempts = 0; initializes the attempts counter.
  • Home Page Route (GET /): This route handles requests to the root URL (/). It serves the index.html file from the “public” directory.
  • Guess Submission Route (POST /guess): This route handles POST requests to the /guess endpoint (when the user submits their guess).
    • It parses the user’s guess (from req.body.guess).
    • It increments the attempts counter.
    • It validates the input to ensure it’s a number between 1 and 100.
    • It compares the guess to the secretNumber and provides feedback to the user (too low, too high, or correct).
    • If the guess is correct, it resets the game (generates a new secretNumber and resets attempts).
  • Starting the Server: app.listen(port, () => { ... }); starts the server and listens for incoming connections on the specified port.

Creating the HTML (index.html)

Create a directory named “public” in your project directory. Inside the “public” directory, create a file named index.html. This file will contain the HTML for your game’s user interface. Paste the following code into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Guessing Game</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #game-container {
      margin-top: 50px;
    }
    input[type="number"] {
      padding: 5px;
      font-size: 16px;
    }
    button {
      padding: 5px 10px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <h1>Number Guessing Game</h1>
    <p>Guess a number between 1 and 100</p>
    <form action="/guess" method="POST">
      <input type="number" id="guess" name="guess" required>
      <button type="submit">Submit Guess</button>
    </form>
  </div>
</body>
</html>

Let’s break down this HTML:

  • Basic HTML Structure: Includes the standard <html>, <head>, and <body> tags.
  • Meta Tags: Includes <meta> tags for character set and viewport configuration.
  • Title: Sets the title of the page to “Number Guessing Game”.
  • Basic Styling: Includes inline CSS for basic styling to center the content and style the input and button.
  • Game Container: The <div id="game-container"> element wraps all the game elements.
  • Heading: <h1> displays the game title.
  • Instructions: <p> provides instructions to the user.
  • Form: The <form> element is used to submit the user’s guess.
    • action="/guess" specifies the URL where the form data will be sent (the /guess route in server.js).
    • method="POST" specifies the HTTP method for submitting the form data.
    • <input type="number" id="guess" name="guess" required> is the input field where the user enters their guess. The name attribute is crucial, as it’s used to access the input value in server.js (req.body.guess). The required attribute makes the field mandatory.
    • <button type="submit"> is the submit button.

Running the Game

Now that you have your server and HTML files, it’s time to run the game. Open your terminal or command prompt, navigate to your project directory (where server.js is located), and run the following command:

node server.js

Alternatively, if you installed nodemon (recommended), run:

nodemon server.js

nodemon will automatically restart the server whenever you make changes to your code. You should see a message in the console that says “Server is running on port 3000” (or the port you configured). Open your web browser and go to http://localhost:3000. You should see the number guessing game interface.

Testing the Game

Test the game by entering a number in the input field and clicking the “Submit Guess” button. The server will process your guess and provide feedback (too high, too low, or correct). Try different numbers until you guess the correct number. Make sure the game provides accurate feedback and resets correctly after a successful guess.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Server Not Running: If you don’t see the game in your browser, make sure the server is running in your terminal. Check for any error messages in the console.
  • Incorrect File Paths: Double-check that the file paths in your code (e.g., in app.use(express.static('public'));) are correct. Make sure your index.html is in the “public” directory.
  • Form Method and Action: Ensure your HTML form’s method is “POST” and the action is “/guess”.
  • Input Field Name: The name attribute of your input field in index.html must be “guess” for the server to access the user’s input correctly (req.body.guess).
  • Data Type Issues: Make sure you parse the user’s input as an integer using parseInt(req.body.guess) in server.js, otherwise, you might encounter unexpected behavior.
  • CORS (Cross-Origin Resource Sharing) Errors: If you’re trying to access your server from a different domain, you might run into CORS issues. For this simple project, you shouldn’t encounter this problem, but if you do, you’ll need to configure CORS on your server.

Enhancements and Next Steps

Once you have a working game, consider these enhancements:

  • Add Styling: Improve the game’s appearance with CSS. Use CSS frameworks like Bootstrap or Tailwind CSS for faster styling.
  • Track Score: Keep track of the number of games played, the average number of attempts, and the user’s high score.
  • Implement Difficulty Levels: Allow the user to select the range of numbers (e.g., 1-100, 1-1000).
  • Add Hints: Provide hints to the user, such as whether the correct number is even or odd, or within a certain range.
  • Use JavaScript for Client-Side Validation: Validate the user’s input (e.g., check if it’s a number) using JavaScript before submitting the form. This improves the user experience.
  • Deploy Your Game: Deploy your game to a platform like Heroku, Netlify, or Vercel so others can play it.

Key Takeaways

  • You’ve learned the basics of creating a web server with Node.js and Express.
  • You’ve built a simple, interactive game that takes user input and provides feedback.
  • You’ve practiced using HTML forms, handling POST requests, and serving static files.
  • You understand the importance of separating concerns (server logic in server.js, user interface in index.html).
  • You’ve gained experience with essential web development concepts.

This tutorial provides a solid foundation for building more complex web applications with Node.js. Remember to experiment, explore, and continue learning. The skills you’ve gained here are transferable to a wide range of web development projects, so keep practicing and building! You can now adapt this structure to other fun projects, such as a simple calculator or a text-based adventure game. The possibilities are endless when you combine the power of Node.js with your creativity. Keep coding, keep learning, and enjoy the journey!

More posts