Overview Puzzle Racing Word Guesser GAME HUB

In one of our games to help our users learn Binary, we will give the users a:

  • Starting random integer
  • A wanted final binary number

The game format:

  • Two player game, each player gets a car on a racetrack on the screen
  • The two players take turns moving
  • The game will give a random integer and put it on the screen each round. The user types in the binary number that matches the integer on the screen.
    • If correct, you move forward a space. If wrong, you stay in place.
  • First one to move forward 10 spaces and cross the finish line wins!

This will:

  • Challenge the user to be able to match binary with decimal values to train their skills

How will we accomplish this?

  • The game runs in a loop until the car crosses the finish line.
  • Inside the loop, a new random decimal number (0 to 255) is generated for the player to match.
  • The user’s binary input is converted to a decimal number, and then checked if it matches the target decimal number.
    • If correct, the car moves forward a space. If wrong, it doesn’t.

What will we use?

  • Javascript and HTML (required, no python!!!)
  • Variables to set the game up (board size and car position)
  • Random number generator to get the random numbers
  • Conditional statements to check if user is correct
  • String to integer conversions to convert binary input to decimal number
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Binary Race Game</title>
  <script src="script.js"></script>
</head>

<body>
  <!-- You can add HTML content or leave it empty for a simple game -->
</body>

</html>

function playBinaryRaceGame() {
    console.log("Welcome to the Binary Race Game!");
    console.log("Type in binary numbers to match the given decimal number and move your car forward.");
  
    const boardSize = 10;
    let carPosition = 0;
  
    while (carPosition < boardSize) {
        // Generate a new random decimal number for the user to match
        const targetDecimalNumber = Math.floor(Math.random() * 256);
  
        // Convert the decimal number to binary
        const targetBinaryNumber = targetDecimalNumber.toString(2);
  
        // Get user's guess
        const userGuess = prompt(`Your car is at position ${carPosition}. Match this number (in binary): ${targetDecimalNumber}`);
  
        try {
            // Convert the user's binary input to decimal
            const guessDecimal = parseInt(userGuess, 2);
  
            // Check if the guess is correct
            if (guessDecimal === targetDecimalNumber) {
                console.log("Correct! Your car moves forward by 1 space.");
                carPosition += 1;
            } else {
                console.log(`Incorrect guess. The correct decimal number was ${targetDecimalNumber}.`);
            }
  
        } catch (error) {
            console.log("Invalid input. Please enter a valid binary number.");
        }
    }
  
    console.log("Congratulations! You crossed the finish line and won the game!");
  }
  
  // Start the game
  playBinaryRaceGame();

Flowchart to demonstrate code’s logic and how it runs:

image