数字のための独自のワードルを作成します：数値

この記事は、JavaScript Library Nanny Stateを使用して、Wordleに触発された数字推測ゲーム「Numble」の構築を詳述しています。 チュートリアルは、コアゲームのメカニズムに焦点を当て、機能を徐々に追加します。

重要な概念：

数値は、4回の試行で3桁の3桁の倍数を推測するようにプレイヤーに挑戦します。

色分けされたフィードバックシステム（緑、黄色、灰色）は、それぞれ正しい配置、誤った配置が正しい数字、および誤った数字を示します。
• Nanny Stateは、州の管理と動的なHTMLレンダリングを簡素化します
ゲームでは、3つのランダムな3桁の倍数を生成し、仮想キーボードを作成し、ユーザー入力（推測、削除、およびチェック）を処理します。
• CSSクラスはゲームロジックに基づいて色の変更を管理し、即時の視覚的フィードバックを提供します。
モジュラー設計は、スケーラビリティと変更を促進します
• ゲームルール：
4回の試行で3桁の3桁の倍数を推測します。 各推測の後にフィードバックが提供されます：

グリーン：正しい位置での正しい数字。

黄色：

間違った位置での正しい数字。

• 灰色：誤った数字。
• 数字の合計が3つの倍数である場合、数値は3つの倍数です（例：123：1 2 3 = 6）。
nanny状態の使用：
• Nanny Stateは、単一のオブジェクトでアプリデータを管理し、変更時にHTMLビューを自動的に再レン​​ダリングすることにより、開発を合理化します。
乳母状態をインポート：

ビュー（初期HTML構造）を作成します：

状態オブジェクトをセットアップ：

StateNanny Stateを初期化し、関数を割り当てます：

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

このチュートリアルは、

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

関数および対応するイベントハンドラー（

、

）内で3次演算子を使用してスタート/エンドボタンの作成をガイドします。

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

Update

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

乱数の生成：

aView関数は、3つのランダムな3桁の倍数を作成します。 start finishこの番号は、ゲームを開始すると表示されます。

チュートリアルは、仮想キーボード、ユーザー入力処理（Array.map()を使用）、およびカラーコーディングロジックの実装を説明することで継続されます。 最終コードには、4つの推測試行、カラーフィードバック、およびユーザーインタラクションの改善が組み込まれています。

完全なコードの例とさらに強化（「再生」機能など）が元の記事に記載されています。 FAQSセクションでは、ゲームプレイとルールに関する一般的な質問について説明します。

以上が数字のための独自のワードルを作成します：数値の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。