Это часть курса Брэда Трэверси.

Возможности:

Рисунок SVG с линией и кругом для палача

буква, соответствующая словам, разделяющая правильные буквы и неправильные буквы, а затем отображающая

одно и то же окно уведомлений и окно успеха

играть снова игру с кнопкой сброса и войти нажмите

Код Github

HTML

SVG-рисунок: дорожка представляет собой фигуру из четырех линий.

x1,x2 - оси x,y1,y2 - оси y, две точки которых образуют прямую

голова представляет собой круг с cx, cy (центр круга), r (радиус круга)

тело, руки и ноги - все линии

где отображаются неправильные буквы

окно сообщения об успехе

одно и то же окно сообщения

CSS

настройка заливки и обводки палача

сначала спрячьте линии палача

сначала скройте всплывающий контейнер и измените его в js

поместите окно уведомления за пределы страницы и измените ось Y, чтобы она отображалась

JS

все необходимые DOM

данные представляют собой массив из нескольких слов или могут быть получены из API

каждый раз выбранное слово должно быть случайным

Корректные буквы и неверные буквы для хранения квалифицированного массива.

зациклить выбранное слово и, если буква входит в нужную букву, показать букву

если отображаемое слово совпадает с выбранным словом, появляется окно сообщения об успешном завершении.

при нажатии клавиши на буквы от а до z проверяется условие, входит ли нажимаемая буква в выбранное слово. Если письмо уже есть в правильном массиве, показать уведомление, если нет, то добавить в правильный массив. То же, что неправильный массив.

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

сопоставьте неправильный массив и отобразите в dom

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

Когда длина строки совпадает с неправильной длиной массива, появляется окно сообщения.

показать уведомление при необходимости и скрыть через 2 секунды

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

не забудьте вызвать displayWord() при загрузке страницы