Научете как да манипулирате DOM чрез изграждане на проста игра с цветни JavaScript

Какво е DOM?

DOM означава Document Object Model. Това е нищо повече от диаграмата на ниво блок на всички HTML елементи, заредени на страницата, когато браузърът зарежда уеб страница. Представя се като дърво от обекти, които са HTML елементи. Погледнете изображението по-долу и може да получите по-добра представа.

Представяне на DOM на обикновен .html файл

Хубава чиста блокова схема на вашия грозен .html файл - не е ли толкова страхотно! Но сега мислите как ми помага това? Какъв е случаят с употребата? Защо трябва да знам това?

По-просто казано, DOM ви дава възможност да внесете динамика в статичния си уебсайт. С използването на DOM можете да направите куп полезни неща в уеб страницата като:

  • добавяне и изтриване на HTML елементи и атрибути
  • добавяне и изтриване на CSS правила за събитие, задействано от потребителя
  • създаване на нови събития за синтетични потребителски събития

И точно това ще научите през целия курс на тази статия.

За да ви дадем представа какво ще постигнем до края на тази статия, вижте тази връзка.

Приготвяме се да започнем

Ще изградим проста игра за познаване на цветове. Всеки път, когато играта е стартирана, ще бъде избран случаен RGB цветен код. В зависимост от режима на играта, на екрана ще имаме три (лесни) или шест (твърди) опции или цветни блокове. Всеки път, когато е избран неправилен цветен блок, блокът ще изчезне, докато потребителят не избере правилния цвят (или последната му опция е останала).

Ето груба диаграма за това, което бихме изградили:

Това е нещо, което научих, докато взимах курс от Колт Стийл, феноменален треньор, що се отнася до преподаването на основни понятия. Всички трябва да разгледате неговите видеоклипове в YouTube канала на Udemy.

Макетна схема

Част 1

Ще започнем със създаването на обикновена табелка за уеб котел, която ще бъде компрометирана от файлове index.html, app.css и app.js. Нека да видим как изглеждат тези файлове, когато започваме.

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

  • index.html

<Глава>
 Игра с цветове 

<Тяло>

Великият
RGB
Игра с цветове


 
<бутона class = "mode"> Лесно 
<бутона class = "избран режим"> твърд 

Това е толкова просто, колкото се получава. Можем просто да разделим цялата уеб страница в три основни блока.

Първо имаме раздел заглавка, който съдържа текста и може да съдържа някаква друга информация, ако искате да го добавите там.

Следва контролния панел, който има бутони за нулиране на играта и за превключване между режимите на игра.

Трета - и най-интересната част - е основната зона за игра, която има шест divs. Тези div служат като опции за всеки случаен RGB цветен код, който може да бъде избран по някаква фантазия (която ще видим след малко).

  • app.css
тяло {
цвят на фона: # 232323;
марж: 0;
семейство шрифтове: "Montserrat", "Avenir";
}
h1 {
подравняване на текст: център;
линия-височина: 1.1;
тегло на шрифта: нормално;
цвят: бял;
фон: steelblue;
марж: 0;
преобразуване на текст: главни букви;
подплънки: 20px 0;
}
#контейнер {
марж: 20px автоматично;
максимална ширина: 600px;
}
.квадрат {
ширина: 30%;
фон: лилав;
дъно с подплънки: 30%;
плувка: вляво;
марж: 1,66%;
граничен радиус: 15%;
преход: фон 0,6;
-webkit-преход: фон 0,6;
-moz-преход: фон 0,6s;
}

Добавени са някои основни стилове за тялото, текста и квадратите, които служат като опции за игра.

  • app.js
var numSquares = 6;
вар цветове = [];
var pickColor;
var squares = document.querySelectorAll (". квадрат");
var resetButton = document.querySelector ("# нулиране");
var modeButtons = document.querySelectorAll (". режим");

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

Всъщност нека разбием всяка от тези променливи и да видим какво е тяхното значение:

  • Променливата numSquares съхранява броя на квадратчетата, които ще бъдат налични в играта според режима. За простота, аз трудно кодирах стойността да бъде шест винаги - можем да се върнем към това и да добавим някаква логика, за да продължи да се променя.
  • color е празен масив, който съдържа произволен шест или три RGB цветен код, генериран всеки път, когато играта е нулирана или режимът се променя.
  • pickColor е блокът цвят / опция, избран от потребителя при всяко щракване.
  • квадрата е масив от всички квадратчета на страницата, които са достъпни като опции. Този масив може да има три или шест елемента в зависимост от режима на играта.
  • Променливата за нулиране е бутона „нова игра“ в контролния панел.
  • modeButtons отново е масив, който има лесни и твърди бутони на режима в него.

Ако сте следвали до този момент, тук трябва да имате доста основна версия на тази игра. Можете да отворите файла index.html във всеки браузър и да го проверите. Добре, така че сега, когато сме поставили основата, нека да преминем към сериозните неща.

Част 2

В този раздел най-вече ще работим с JavaScript файла и няколко пъти с CSS файла.

Генериране на произволни цветове

Първата ни цел ще генерира произволни цветове при всяко стартиране или рестартиране на играта или промяна на режима. Нека да видим как може да стане това.

За да разберем основния принцип за генериране на нещо на случаен принцип, трябва да започнем с твърдо кодиран масив от шест RGB цветни кода. Нека се опитаме да зададем тези цветове като цветове на фона на шестте квадратчета / опции, налични на уеб страницата.

вар цветове = [
    "rgb (255, 0, 0)",
    "rgb (255, 0, 255)",
    "rgb (255, 225, 0)",
    "rgb (255, 0, 255)",
    "rgb (0, 255, 255)",
    "rgb (0, 255, 0)"
];
var квадрата = document.querySelectorAll (.squares);
за (i = 0; i 
  • Добавих шест статични RGB цветови кода към цветовия масив
  • Използвах вече създадения квадратен масив, за да пусна цикъл през всички квадратчета, присъстващи в масива.
  • Съпоставих цвета на фона на всеки квадрат със съответния му индекс в масива от цветове.

Ако добавите това към файла app.js и опресните браузъра, ще видите, че всеки квадрат вече е уникален цвят.

* скрийншот от браузъра

Може да забележите, че бутоните все още не са оформени, но оставете това засега. Ще стигнем до тази част по-късно.

Активиране на функционалността на щракването

Така че всичко, от което се нуждаем, са слушатели на събития, включени във всяка опция / слушане на цветен блок за събития с клик. Най-лесният начин да направите това е - отново сте го предположили правилно - като прегледате масива от квадратчета. Този цикъл ще изглежда подобно на този, използван за стилизиране на фона на цветните блокове. Нека да разгледаме кода:

за (i = 0; i <= squares.length; i ++) {
  квадрати [i] .addeventListeners ("щракване", функция () {
    предупреждение („опцията беше кликната“);
  });
}

Сега всеки път, когато кликнете върху който и да е блок, ще получите това предупредително съобщение от браузъра. Това беше лесно! Сега нашите опции са възприемчиви и те реагират на въвеждането на потребителя. Всичко, което трябва да направим сега, е да определим логиката, която казва какво се случва, ако избраният от играта цвят и избраният от потребителя цвят са еднакви.

Вече може да имате решение, ако внимателно сте обърнали внимание на горните части. Нека видим как можем да го направим.

Проверка дали цветът е правилен или не

Нека да проучим възможностите, които имаме, като нашите опции / цветни кутии са възприемчиви и отговаряме. Можем да проведем малък тест и да видим дали двата цвята съвпадат или не. Много скоро ще имаме произволно генерирани цветове всеки път, когато освежаваме страницата или всеки път, когато рестартираме играта или променим режима на игра. Но засега ще практикуваме с набора от шест RGB цветни кода, които сме задали във файла.

Нека да разгледаме някакъв код и тогава бих го разделил за вас.

за (i = 0; i <= squares.length; i ++) {
  квадрати [i] .addeventListeners ("щракване", функция () {
    // ако е щракнат правилния блок направете нещо ....
    // ако е щракнат грешен блок направете нещо ....
  });
}

Както може би вече знаете, ще използваме обикновен блок if-else.

pickColor = цветове [3];

за (i = 0; i <= squares.length; i ++) {
 // приложете цвят на фона към всички квадратчета ...
 квадрати [i] .style.backgroundColor = цветове [i]
   // активирайте събитие за щракване на всеки квадрат .....
     квадрати [i] .addEventListener ("щракване", функция () {
       // ако потребителят е избрал правилния цвят ....
         var clickedColor = this.style.backgroundColor;
        // проверете дали избраният цвят съвпада с цвета по подразбиране ...
         ако (pickColor === щракнаColor) {
             changeColors (pickedColor);
           }
         // ако потребителят на потребителя е избрал грешен цвят ....
         друго {
           this.style.backgroundColor = "# 232323";
           messageDisplay.text = "Грешен избор!";
         }
    })
};

Знам - много е код. Но нека да видим какво всъщност означава:

  • Започваме с това да определим какъв ще бъде цветът по подразбиране, избран от играта, с променливата pickColour.
  • След това стартираме нашия цикъл, който ни позволява да преминем през масива от цветни блокове / опции.
  • Тогава ние активираме събитията с щракване върху всеки цвят / опция. Правим това с помощта на функция за обратно извикване. Тази функция не прави нищо друго, освен избира цвета на фона на избрания цветен блок / опция, просто като го присвои на променливата, наречена clickedColour.
  • Сега имаме и двата цвята: един, който е избран от играта, а другият от потребителя. Остава само да съвпадне и да види дали изборът е правилен или не.
  • Можем да направим това лесно, използвайки блока if else. Ако изборът е правилен, направете това или иначе направете нещо друго
  • Ако е избран правилния цвят, добавяме малко текст на страницата, за да потвърдим правилния избор и добавяме някакъв визуален ефект, за да потвърдим отново. Освен това ние съответстваме на цвета на този конкретен цветен вариант / блок, за да съответства на фоновия цвят на страницата. Това създава ефект, сякаш цветният блок / опцията току-що е изчезнала.
  • Сега видяхте, че ако е избран същия цвят, тогава се изпълнява функция. Нека да видим от какво се състои тази функция:
промяна на цветаЦветове (цвят) {
 за (i = 0; i <= squares.length; i ++) {
  квадрати [i] .style.backgroundColor = цвят;
  messageDisplay.text = "Вие сте добри в отгатването!";
 }
}

Тази функция преминава през масива от цветни блокове / опции и нулира цвета на фона, за да бъде този на избрания цвят или цвят по подразбиране.

В случай, че цветовете не са еднакви, просто задаваме цвета на фона на текущата селекция да бъде този на уеб страницата.

друго {
  this.style.backgroundColor = "# 232323";
  messageDisplay.text = "Грешен избор!";
}

Добре сега, когато имаме основния набор от игри, просто трябва да се тревожим за минимални проблеми с дизайна и добавяне на функционалност в контролния панел.

Но първо нека разгледаме как изглежда папката с кодове в този момент, ако сте последвали правилно всички стъпки:

index.html

app.css

app.js

Стъпка 3

Всичко е наред. Но сега трябва да създадем нови произволно генерирани RGB цветови кодове в нашата игра, които не са един и същ набор от цветове, които биха били назначени в цветните блокове / опции.

Ако това ви кара да мислите за функциите, тогава това е правилният избор. Ще създаваме нова функция заедно с напълно случайни (нови) цветови кодове и ще ги присвояваме на цветовия масив. Тогава ще ги извлечем в масива от цветове / опции.

Нека да видим как изглежда кодът и тогава ще преминем през него ред по ред.

Вграден метод в JavaScript ни помага да генерираме произволно число между 0 и 1. След това правим някои манипулации, за да сме сигурни, че диапазонът на това произволно число остава между цифрите 0 и 255.

  • Първо прилагаме Math.random, избирайки произволно произволно число между 0 и 1, след което умножаваме числото с 256, тъй като не искаме числото да е по-голямо от 255. След като имаме произволно число, използваме Math.floor и уверете се, че имаме цифрата само преди десетичните стойности (цяло число).
  • Присвояваме тези произволни числа, генерирани на променливи, наречени r, g и b. Всяка означава своя собствен RGB номер за цветовия код.
  • И накрая, ние добавяме всички тези числа или променливи, за да образуваме низ. Връщаме низа, така че да изглежда така: rgb (23, 45, 112).
  • Остава само да стартирате тази функция в зависимост от режима на играта и да генерирате три или шест произволни RGB цветни кода и да ги присвоите в цветовия масив.

Но това ще върне само низ, който прилича на RGB код. Как ще се добави това към масива от цветове, които имаме? Как ще бъде избран случаен цвят при всяко стартиране или нулиране на играта?

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

Изберете произволен цвят от масива

За целта ще създадем нова функция, наречена pickColor (). Нека да видим как ще изглежда функцията и тогава ще я разградим.

функция pickColor () {
  var random = Math.floor (Math.random () * color.length);
  връщане на цветове [произволно];
}

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

  • Както вече видяхме с магията на Math.random и Math.floor, използваме същата функция, за да получим произволно число, генерирано между 0 и дължината на масива.
  • След това получаваме съответния RGB код в масива от цветове, като използваме случайното число в индекса

Добавете шест (или три) произволни RGB кода в масива от цветове

За целта използваме горните две функции, които са randomColors () и pickColors (). Това, което по-специално прави функцията randomColors (), е че тя изпълнява функцията randomColors () шест или три пъти (в зависимост от режима на играта) и добавя съответния брой RGB цветови кодове към масива от цветове. Ще наречем тази функция generatorRandomColor (num *). Нека да видим как изглежда кодът и да го разделим ред по ред.

* num ще се определя въз основа на режима на играта.

  • Първо ще направим обикновен празен масив
  • След това пускаме цикъл според режима на играта
  • Всеки път, когато този цикъл се изпълнява, нов RGB код се изтласква в създадения масив
  • Най-сетне връщаме този масив

След всички тези нови функции и цялата тази манипулация на кода, нашата кодова база за app.js се промени доста. Нека да видим как изглежда сега:

Нулиране на играта

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

Всичко, което искаме с бутона за нулиране, е

  • генерират набор от шест произволни цвята
  • изберете произволен цвят от новия създаден масив от цветове.

Нека да видим как ще изглежда псевдокодът:

функция нулиране () {
  // създайте нов масив от 6 произволни цвята
  // изберете нов случаен цвят
  // попълнете квадратите с нов набор от генерирани цветове
}

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

Добре, като се върнем към бутона за нулиране: нека да видим как ще изглежда действителната функция:

Нека го разделим ред по ред:

  • Започваме с добавяне на слушателя на събитието за бутона за нулиране. След това задействаме функция за обратно извикване, която прави куп неща при задействане на събитието.
  • Когато се задейства, започваме с генериране на нов масив от шест произволни цвята.
  • След това избираме случаен цвят.
  • И накрая, нулираме цвета на фона за всички цветни блокове.

Ето как изглежда актуализираният app.js след всички редакции, които направихме:

Това изглежда доста добре засега! В тази статия не добавям функционалността за настройка на режима, тъй като тя вече става голяма и не искам да ви отегчавам :). Но ако ви хареса всичко това, ще бъда повече от щастлив да напиша друга статия, обхващаща останалите.

Ето връзката за GitHub хранилището, където може да се намери окончателният оптимизиран код.

Надявам се тази статия да вдъхнови някои от вас да научат повече за DOM манипулацията и този красив език на JavaScript. До следващия път!