Build Your Own Wordle For Numbers: Numble

This article details building a number-guessing game, "Numble," inspired by Wordle, using the JavaScript library Nanny State. The tutorial focuses on core game mechanics and progressively adds features.

Key Concepts:

• Numble challenges players to guess a three-digit multiple of three within four attempts.
• A color-coded feedback system (green, yellow, gray) indicates correct placement, incorrect placement but correct digit, and incorrect digits, respectively.
• Nanny State simplifies state management and dynamic HTML rendering.
• The game involves generating a random three-digit multiple of three, creating a virtual keyboard, and handling user input (guesses, deletions, and checks).
• CSS classes manage color changes based on game logic, providing immediate visual feedback.
• The modular design promotes scalability and modification.

Game Rules:

Guess the three-digit multiple of three in four attempts. Feedback is provided after each guess:

• Green: Correct digit in the correct position.
• Yellow: Correct digit in the wrong position.
• Gray: Incorrect digit.

A number is a multiple of three if the sum of its digits is a multiple of three (e.g., 123: 1 2 3 = 6).

Using Nanny State:

Nanny State streamlines development by managing app data in a single State object and automatically re-rendering the HTML view upon changes.

Import Nanny State:

<code class="language-javascript">import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';</code>

Create the View (initial HTML structure):

<code class="language-javascript">const View = state => html`<h1>Numble</h1>`;</code>

Set up the State object:

<code class="language-javascript">const State = { View };</code>

Initialize Nanny State and assign the Update function:

<code class="language-javascript">const Update = Nanny(State);</code>

The tutorial then guides the creation of a start/end button using ternary operators within the View function and corresponding event handlers (start, finish).

Generating a Random Number:

A generateNumber function creates a random three-digit multiple of three:

<code class="language-javascript">const generateNumber = () => (3 * Math.ceil(Math.random() * 299 + 34)).toString();</code>

This number is displayed upon starting the game.

The tutorial continues by explaining the implementation of a virtual keyboard, user input handling (using Array.map()), and the color-coding logic. The final code incorporates four guess attempts, color feedback, and improved user interaction.

The complete code examples and further enhancements (like a "play again" feature) are provided in the original article. The FAQs section addresses common questions about gameplay and rules.

The above is the detailed content of Build Your Own Wordle For Numbers: Numble. For more information, please follow other related articles on the PHP Chinese website!