Создайте свой собственный Wordle для чисел: Numble

у нас есть три вещи:

 

${state.digits.map ( (digit, index) => html`<button onclick=${state.appear (index) }>${index}`) }

Это отображает массив длиной 10, создавая кнопку для каждого элемента и отображая index каждый элемент. Другими словами, цифры от 0 до 9. Каждая кнопка также имеет встроенный прослушиватель событий, который вызывает обработчик событий appear и предоставляет index в качестве аргумента. Тем не менее, мы полностью изучим это через мгновение.

Затем у нас есть две кнопки, одна называется «Удалить», а другая — «Ввод». Обе они имеют встроенные прослушиватели событий, которые вызывают соответствующие обработчики событий remove и check. И снова мы полностью изучим их через мгновение.

Во-первых, это пример того, как может выглядеть ваша клавиатура:

Цифровая клавиатура

Глядя на appear обработчик событий, мы хотим, чтобы эта функция отображала цифру, которую игрок щелкает в первом пробеле guess.

const appear = guess => event => {

Update (state => ({

guess: state.guess.map ( (digit, index) => index === state.count? guess: digit),

count: state.count + 1

}))

}

Во-первых, единственная разница между этим обработчиком событий и теми, которые мы делали раньше, заключается в том, что эта функция имеет дополнительный параметр guess. Это массив index, digits который был предоставлен в качестве аргумента. Другими словами, это цифра, на которую нажал игрок.

Функция Update выглядит немного иначе. Это связано с тем, что ему нужен доступ к состоянию, поэтому он снабжен стрелочной функцией, которая отображает старое состояние в новое состояние (состояние няни называет эти «функции преобразователя»).

С точки зрения того, что оно на самом деле обновляет, guess свойство сопоставляется с исходным массивом из трех nulls, и если index элемент равен count (позиция предположения), значение null заменяется на guess (которое будет номером кнопку, которую нажал пользователь). Если index не равно count, значение элемента остается прежним: null.

Затем он увеличивается count на 1, позволяя пользователю ввести свое второе предположение во второе пространство.

Вот как будет выглядеть строка, когда пользователь щелкнет несколько чисел:

Заполненная сетка Numble

Обработчик remove события (по иронии судьбы) почти идентичен:

const remove = event => {

Update (state => ({

guess: state.guess.map ( (digit, index) => index === state.count — 1? null: digit),

count: state.count — 1

}))

}

Следуя логике appear функции, вы сможете понять, что здесь происходит, но не беспокойтесь, если это не так. Он обновляется guess путем сопоставления с исходным массивом, и если index равно предыдущему количеству догадок (т. е. счет — 1), он заменяет значение элемента на null, эффективно удаляя догадку.

И на этот раз он уменьшается count на единицу, позволяя пользователю продолжать делать предположения.

Просто check функция идти.

Обработчик события для кнопки «Ввод» называется check, и мы хотим, чтобы он (сюрприз) проверял правильность предположения пользователя, но мы также хотим, чтобы он сбрасывал предположение, чтобы пользователь мог повторить попытку.

Функция выглядит следующим образом:

const check = event => {

Update (state => {

const numble = state.guess.join («») === state.number

return {

feedback: numble? «NUMBLE!»: «Wrong!»,

guess: Array (3).fill (null),

count: 0

}

})

}

Как и раньше, Update использует функцию преобразования и принимает state в качестве параметра, что дает нам прямой доступ ко всем данным приложения, хранящимся в состоянии. Затем он создает логическую константу с именем numble. Это может выглядеть не так, но state.guess.join («») === state.number на самом деле это условие (проверяет, соответствует ли предположение пользователя сгенерированному нами числу), и если оно соответствует этому условию, значение numble будет, true, а если нет, то будет false.

Затем он возвращает три обновленных свойства состояния:

feedback принимает логическое значение, которое мы только что создали, и если это так, true оно устанавливает значение как строку «NUMBLE!» и если это так, false он устанавливает значение как строку «Неправильно!»

guess изменяется обратно на массив длины 3, заполненный null. Это фактически сбрасывает догадку пользователя, позволяя ему угадать снова.

count также сбрасывается в 0, что означает, что программа может работать, как будто начиная с самого начала.

Наш последний шаг — добавить немного HTML View, чтобы можно было отобразить обратную связь.

Лучше всего разместить его под догадкой и над клавиатурой. Итак, ваш финал View должен выглядеть примерно так:

const View = state => html`

Numble

${state.started?

html`

${state.feedback

<button onclick=${state.finish}>END`

:

html`<button onclick=${state.start}>START`

}`

А при желании можно использовать feedback для установки сообщения при старте игры, например в start обработчик события можно добавить feedback свойство со строковым значением («Угадай 3 цифры»):

const start = event => {

Update ({

started: true,

number: generateNumber (),

feedback: «Guess 3 digits»

})

}

Вот и все! Теперь у вас есть полностью функционирующая игра «Угадай число»!

Прежде чем вы перейдете ко второй статье, есть всего пара замечаний о CSS и ошибках.

Если вы хотите добавить свой собственный CSS, это прекрасно, но если вы просто хотите сосредоточиться на коде, вы можете скопировать мой CSS из окончательной кодовой ручки:

Если вы хороший программист, вы, вероятно, сможете найти здесь некоторые ошибки, например, что, если пользователь нажмет «Ввод» до того, как угадает три цифры? И если вы начнете играть с этим, вы обязательно сможете заметить еще кое-что.

Их совсем не сложно исправить, вам просто понадобится пара условий, где это уместно. Например, чтобы решить проблему проверки до трех цифр, в check функции можно написать:

const check = event => {

Update (state => {

const numble = state.guess.join («») === state.number

return state.count < 3? {

feedback: «too short»

}

:

{

feedback: numble? «NUMBLE!»: «Wrong!»,

guess: Array (3).fill (null),

count: 0

}

})

}

Это просто проверяет, меньше ли количество догадок, чем 3, и соответственно возвращает разные свойства с разными значениями.

Теперь у нас есть полностью функционирующая игра «Угадай число», и теперь мы сделаем ее более похожей на полноценный Numble.

Четыре предположения

Наша первая задача состоит в том, чтобы позволить пользователю 4 предположения. В Wordle разрешено 6 догадок для слова из 5 букв, поэтому для Numble мы допустим 4 догадки для трехзначного числа.

Для этого нам придется удалить guess свойство и добавить к объекту еще два свойства State:

const State = {

started: false,

digits: Array (10).fill («grey»),

guesses: Array (4).fill (Array (3).fill (null)),

guessCount: 0,

count: 0,

start, finish, check, appear, remove,

View

}

Как видите, теперь у нас есть guesses свойство вместо того, guess что было раньше. Значение guesses представляет собой 2D-массив из 4 массивов, каждый из которых имеет длину три и заполнен null. Если вы не знакомы с этой Array.fill () функцией, это быстрый способ создания массива, что означает, что нам не нужно записывать массив полностью.

Каждый из 4 вложенных массивов представляет одно из 4 предположений, которые сделает пользователь. Например, если первое предположение было 123, guesses массив будет выглядеть так:

[[1,2,3], [null, null, null], [null, null, null], [null, null, null]]

Каждый раз, когда пользователь делает предположение, этот массив будет обновляться в соответствии с его предположением, эффективно сохраняя запись всех предположений, сделанных им в игре.

Кроме того, у нас есть guessCount свойство, для которого установлено значение 0. Хотя оно похоже на count свойство, оно позволит нам отслеживать количество предположений, сделанных пользователем.

Эта диаграмма должна помочь вам визуализировать и полностью понять необходимость свойств count и: guessCount

Аннотированная Numble Grid

Как видите, guessCount это индекс вложенного массива, в котором хранится догадка, и count индекс каждой отдельной цифры каждой догадки.

Теперь нам нужно внести некоторые изменения в View функцию:

const View = state => html`

Numble

${state.started?

html`

${state.feedback}

<button onclick=${state.finish}>END`

html`<button onclick=${state.start}>START`

}`

Это почти идентично тому, что View мы создали ранее, однако div с идентификатором «догадки» изменился. Дело в том, что теперь мы используем 2D-массив для отображения 4 догадок в виде сетки, нам понадобится вложенная карта.

Совет по кодированию: при использовании вложенной карты для индекса каждой карты мы будем использовать i для первой карты и j для второй. Вы можете использовать то, что считаете наиболее простым для вас, если они не совпадают!

Первая карта повторяет каждое предположение как строку сетки. Затем вторая карта перебирает каждую отдельную цифру этого предположения и отображает соответствующий HTML, чтобы показать угаданную цифру или пустой кружок. При этом ваш экран должен выглядеть так:

Намбл Сетка

Этот новый макет означает, что мы также должны изменить функции appear и remove. Это относительно просто, но опять же требует двойной карты.

const appear = guess => event => {

Update (state => ({

guesses: state.guesses.map ( (array, i) => i === state.guessCount? array.map ( (digit, j) => j === state.count? guess: digit): array),

count: state.count + 1

}))

}

Мы обновляем guesses свойство здесь, и именно здесь два разных count свойства станут действительно полезными.

Первая карта проверяет, какую строку изменить: если индекс массива совпадает с догадкой пользователя, то может возникнуть вторая карта, в противном случае оставьте значение прежним.

Вторая карта выполняет ту же логику, что и карта, appear которую мы создали во второй статье.

Как и раньше, remove функция работает практически идентично.

const remove = event => {

Update (state => ({

guesses: state.guesses.map ( (array, i) => i === state.guessCount? array.map ( (digit, j)=> j === state.count — 1? null: digit): array),

count: state.count — 1

}))

}

Первая карта здесь снова просто определяет, какое предположение делает пользователь, а вторая следует той же логике, что и наша исходная remove функция.

Однако count свойство уменьшается, чтобы пользователь мог сделать предположение повторно.

Наконец, нам нужно внести некоторые изменения в check функцию. Это функция, которая запускается каждый раз, когда пользователь отправляет предположение.

const check = event => {

Update (state => {

const numble = state.guesses[state.guessCount].join («») === state.number

return {

feedback: numble? «NUMBLE!»: state.guessCount < 3? «Keep going...»: `Nope! It was ${state.number}`,

guessCount: state.guessCount + 1,

count: 0

}

})

}

Здесь изменились только две вещи, и обе находятся в возвращаемом объекте. Свойство feedback имеет дополнительную логику, чтобы сделать приложение немного более динамичным. В отзыве теперь будет отображаться сообщение, чтобы пользователь знал, как у него дела.

В этом случае мы имеем: если numble есть, true другими словами, если догадка пользователя верна, обратная связь становится «NUMBLE»; если numble есть false, проверьте, меньше ли догадка трех (по сути, это проверяет, сделал ли пользователь окончательное предположение). Если да, то обратная связь «Продолжайте...», иначе «Нет! Это был (ответ)».

И это все для первой части! Вы можете увидеть полный код в codepen ниже:

Научитесь программировать с помощью JavaScript — бесплатно

Логика цвета

Как отмечалось в самом начале статьи, цвета являются основным направлением Wordle и, следовательно, Numble. Если вы еще не играли в Numble или Wordle, мы настоятельно рекомендуем вам это сделать, чтобы правильно понять, как работают цвета.

Это пример системы окраски, используемой Numble:

Пример цвета Numble

После того, как пользователь делает предположение, цвета обновляются в двух местах: в самом предположении и на клавиатуре. Логика для них совершенно одинакова, поэтому мы можем создать стрелочную функцию с именем getColors, которая принимает предположение и фактическое число в качестве параметров.

const getColors = (guess, number) => guess.map ( (digit, index) => number.includes (digit)? digit.toString () === number[index]? «green»: «yellow»: «black»)

Мы сопоставляем массив «догадка» и с помощью метода «String.includes (item)» сначала проверяем, включает ли ответ цифру предположения. Если это так, то мы проверяем, находится ли цифра на правильном месте. Если да, то цвет назначается «зеленый». Если нет, то цвет «желтый». В противном случае цифры вообще нет в ответе, и поэтому цвет «черный».

Затем эта стрелочная функция должна возвращать массив с тремя элементами: «зелеными», «желтыми» или «черными», соответствующими каждой цифре в «догадке».

Например, если мы вызвали функцию с помощью getColors ([1,2,3], «327»), то массив, который мы должны вернуть, будет [«black», «green», «yellow«]

Вы могли заметить, что нам пришлось заменить цифру строкой. Это потому, что нам нужно сравнить его с ответом, который хранится в виде строки, и вы не можете сравнить два элемента, если они имеют разные типы. Что ж, вы можете попробовать, но будьте готовы войти в целый мир боли приведения типов JavaScript.

Примечание. Wordle работает с дубликатами по-другому, поэтому, если вы хотите немного усложнить задачу, вы можете попробовать имитировать метод Wordle.

В следующей части нам не нужно вносить какие-либо изменения или добавлять что-либо в State, но View это становится немного сложнее. Как кратко упоминалось в первой статье, мы собираемся использовать классы CSS, чтобы позволить нам изменять цвета.

const View = state => html`

Numble

${state.started?

html`

`) }

${state.digits.map ( (digit, index) => html`<button class=${digit} onclick=${state.appear (index) }>${index}`) }

<button onclick=${state.remove}>DELETE

<button onclick=${state.check}>ENTER