Bina kata -kata anda sendiri untuk nombor: Numble

Butir-butir artikel ini membina permainan yang meneka nombor, "Numble," yang diilhamkan oleh Wordle, menggunakan JavaScript Library Nanny State. Tutorial ini memberi tumpuan kepada mekanik permainan teras dan secara progresif menambah ciri.

Konsep Utama:

Cabaran Numble pemain untuk meneka ganda tiga angka dari tiga dalam empat percubaan.
Sistem maklum balas berkod warna (hijau, kuning, kelabu) menunjukkan penempatan yang betul, penempatan yang salah tetapi digit yang betul, dan digit yang salah.
• Nanny State memudahkan pengurusan negeri dan rendering HTML dinamik.
• Permainan ini melibatkan menghasilkan tiga angka yang rawak dari tiga, mewujudkan papan kekunci maya, dan mengendalikan input pengguna (teka-teki, penghapusan, dan cek).
• kelas CSS menguruskan perubahan warna berdasarkan logik permainan, memberikan maklum balas visual segera.
• Reka bentuk modular menggalakkan skalabiliti dan pengubahsuaian.

Peraturan permainan:

Tebak pelbagai tiga digit tiga dalam empat percubaan. Maklum balas disediakan selepas setiap tekaan:

hijau:
• betul digit dalam kedudukan yang betul.
kuning:
• betul digit dalam kedudukan yang salah.
kelabu:
• digit yang tidak betul.
Nombor adalah pelbagai tiga jika jumlah digitnya adalah pelbagai tiga (mis., 123: 1 2 3 = 6).

Menggunakan keadaan pengasuh:

Nanny State menyelaraskan pembangunan dengan menguruskan data aplikasi dalam satu objek

tunggal dan secara automatik membuat semula paparan HTML apabila perubahan.

State Import Nanny State:

Buat paparan (struktur HTML awal):

import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';

Sediakan objek Negeri:

const View = state => html`<h1>Numble</h1>`;

Inisialisasi keadaan pengasuh dan berikan fungsi

const State = { View };

:

Update

const Update = Nanny(State);

Tutorial kemudian membimbing penciptaan butang permulaan/akhir menggunakan pengendali ternary dalam fungsi dan pengendali acara yang sepadan (,

).

View start finish

Menjana nombor rawak:

A Fungsi Membuat ganda tiga digit secara rawak dari tiga:

Nombor ini dipaparkan apabila memulakan permainan.

generateNumber

Tutorial diteruskan dengan menerangkan pelaksanaan papan kekunci maya, pengendalian input pengguna (menggunakan Array.map()), dan logik pengekodan warna. Kod akhir menggabungkan empat percubaan meneka, maklum balas warna, dan interaksi pengguna yang lebih baik.

Contoh kod lengkap dan peningkatan selanjutnya (seperti ciri "Play Again") disediakan dalam artikel asal. Seksyen Soalan Lazim membahas soalan umum mengenai permainan dan peraturan.

Atas ialah kandungan terperinci Bina kata -kata anda sendiri untuk nombor: Numble. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!