Това е част от курса на Брад Траверси.
Характеристики:
SVG рисунка с линия и кръг за палач
буква, съответстваща на думите, разделяне на правилните букви и грешни букви, след което показване
поле за уведомяване с еднакви букви и поле за успех
играйте отново играта с бутона за нулиране и натиснете Enter
HTML
SVG чертеж: ръчката е с четириредова форма.
x1,x2 са оста на x,y1,y2 са оста на y, която две точки прави права
главата е кръг със cx, cy(центърът на кръга),r(радиусът на кръга)
тялото, ръцете и краката са всички линии
където се показват грешни букви
поле за съобщение за успех
едно и също поле за съобщение
CSS
палачът запълва и щрихира
първо скрийте линиите на палач
първо скрийте изскачащия контейнер и го променете в js
позиционирайте полето за уведомяване извън страницата и променете оста y, за да се показва
JS
всички необходими DOM
данните са масив с няколко думи или могат да бъдат извлечени от API
всеки път избраната дума трябва да е произволна
правилните букви и грешните букви за щрихиране на квалифицирания масив
завъртете избраната дума и ако буквата е включена в правилната буква, покажете буквата
ако показваната дума е същата като избраната дума, се показва полето за последно съобщение за успех.
при натискане на клавиш буквите от a до z, проверка на условието дали натискането на буквата е включено в избраната дума. Ако буквата вече е в правилния масив, покажете известието, ако не, добавете към правилния масив. Същото като грешния масив.
Когато искате да покажете грешни букви, това е по същия начин.
картирайте грешния масив и го покажете в dom
завъртете всяка от линиите на палач, ако индексът е по-малък от дължината на грешния масив, показвайки линията.
Когато дължината на реда е същата като грешната дължина на масива, се показва полето за съобщение.
покажете известие, ако е необходимо и скрийте след 2 секунди
Когато щракнете върху бутона или клавиша за възпроизвеждане отново, натиснете enter, нулирайте всички масиви и стартирайте функциите отново, също така скрийте изскачащото поле.
не забравяйте да извикате displayWord(), когато зареждате страницата