Това е част от курса на Брад Траверси.

Характеристики:

SVG рисунка с линия и кръг за палач

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

поле за уведомяване с еднакви букви и поле за успех

играйте отново играта с бутона за нулиране и натиснете Enter

Код на Github

HTML

SVG чертеж: ръчката е с четириредова форма.

x1,x2 са оста на x,y1,y2 са оста на y, която две точки прави права

главата е кръг със cx, cy(центърът на кръга),r(радиусът на кръга)

тялото, ръцете и краката са всички линии

където се показват грешни букви

поле за съобщение за успех

едно и също поле за съобщение

CSS

палачът запълва и щрихира

първо скрийте линиите на палач

първо скрийте изскачащия контейнер и го променете в js

позиционирайте полето за уведомяване извън страницата и променете оста y, за да се показва

JS

всички необходими DOM

данните са масив с няколко думи или могат да бъдат извлечени от API

всеки път избраната дума трябва да е произволна

правилните букви и грешните букви за щрихиране на квалифицирания масив

завъртете избраната дума и ако буквата е включена в правилната буква, покажете буквата

ако показваната дума е същата като избраната дума, се показва полето за последно съобщение за успех.

при натискане на клавиш буквите от a до z, проверка на условието дали натискането на буквата е включено в избраната дума. Ако буквата вече е в правилния масив, покажете известието, ако не, добавете към правилния масив. Същото като грешния масив.

Когато искате да покажете грешни букви, това е по същия начин.

картирайте грешния масив и го покажете в dom

завъртете всяка от линиите на палач, ако индексът е по-малък от дължината на грешния масив, показвайки линията.

Когато дължината на реда е същата като грешната дължина на масива, се показва полето за съобщение.

покажете известие, ако е необходимо и скрийте след 2 секунди

Когато щракнете върху бутона или клавиша за възпроизвеждане отново, натиснете enter, нулирайте всички масиви и стартирайте функциите отново, също така скрийте изскачащото поле.

не забравяйте да извикате displayWord(), когато зареждате страницата