Узнайте, как манипулировать DOM, создавая простой JavaScript Color Game

Автор оригинала: FreeCodeCamp Community Member.

Ashish Nandan Singh

Что такое дом?

DOM обозначает модель объекта документа. Это не более чем на диаграмме уровня блока всех элементов HTML, загруженных на странице, когда браузер загружает веб-страницу. Он представлен как дерево объектов, которые являются элементами HTML. Посмотрите на изображение ниже, и вы можете получить лучшую идею.

Хорошая чистая блок-схема вашего уродливого файла .html – не так уж отлично! Но теперь вы думаете, как это поможет мне? Что такое случай для использования? Почему мне нужно знать это?

Чтобы просто поставить его, DOM позволяет вам принести динамику на ваш статический веб-сайт. С использованием DOM вы можете сделать кучу полезных вещей на веб-странице, как:

Добавление и удаление элементов HTML и атрибуты
Добавление и удаление правил CSS на увольненном пользователю мероприятие
Создание новых событий для синтетических пользовательских событий

И это именно то, что вы узнаете на протяжении всего процесса этой статьи.

Чтобы дать вам представление о том, что мы достижем к концу этой статьи, проверьте эта ссылка Отказ

Начиная

Мы построим простую игру для угадывания цвета. Каждый раз, когда игра запущена, будет выбран случайный цветовой код RGB. В зависимости от режима игры у нас будет три (легкие) или шесть (жестких) вариантов или цветных блоков на экране на выбор. Каждый раз, когда выбран неверный цветной блок, блок исчезнет, пока пользователь не выберет правильный цвет (или его последний вариант).

Вот шероховатая диаграмма того, что мы будем строить:

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

Часть 1.

Мы начнем с создания простой веб-котельной, которая будет скомпрометирована из index.html, app.css и файлов app.js. Посмотрим, как эти файлы выглядят, когда мы начинаем.

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

index.html.

Color Game

The Great
RGB
Color Game

Это так же просто, как он получает. Мы можем просто разделить всю веб-страницу в трех основных блоках.

Сначала у нас есть раздел заголовка, который имеет текст и может содержать какую-то другую информацию, если вы хотите добавить ее там.

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

Третье – и самая интересная часть – это главная игра игр, в которой шесть девсов. Эти девсы служат вариантами для каждого случайного цветового кода RGB, который может быть выбран какой-то необычной логикой (которую мы увидим через некоторое время).

app.csss.

body {

background-color: #232323;margin: 0;font-family: "Montserrat", "Avenir";}

h1 {

text-align: center;line-height: 1.1;font-weight: normal;color: white;background: steelblue;margin: 0;text-transform: uppercase;padding: 20px 0;}

#container {

margin: 20px auto;max-width: 600px;}

.square {

width: 30%;background: purple;padding-bottom: 30%;float: left;margin: 1.66%;border-radius: 15%;transition: background 0.6s;-webkit-transition: background 0.6s;-moz-transition: background 0.6s;}

Некоторые основные стили были добавлены для тела, текста и квадратов, которые служат в качестве вариантов игры.

app.js.

var numSquares = 6;var colors = [];var pickedColor;var squares = document.querySelectorAll(".square");var resetButton = document.querySelector("#reset");var modeButtons = document.querySelectorAll(".mode");

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

На самом деле, давайте нарушим каждую из этих переменных вниз и посмотрим, каково их значение:

NumsQuares Переменные хранит количество квадратов, которые будут доступны в игре в соответствии с режимом. Для простоты, я твердо закодировал ценность, чтобы быть шесть всегда – мы можем вернуться к этому и добавить какую-то логику, чтобы сохранить его изменение.
Цвета Является ли пустой массив, который содержит случайные шесть или три цветового кода RGB, сгенерированный каждый раз, когда игра сбрасывается, или режим изменен.
Вывеска Это блок цвета/опции, выбранный пользователем при каждом клике.
квадраты это массив всех квадратов на странице, которые доступны в качестве опций. Этот массив может иметь три или шесть элементов в зависимости от режима игры.
Сброс Переменная – кнопка «Новая игра» на панели управления.
ModeButtons Снова находится массив, который имеет легкие и жесткие кнопки режима в нем.

Если вы последовали до этого момента, здесь вы должны иметь довольно базовую версию этой игры. Вы можете открыть файл index.html в любом браузере и проверьте его. Хорошо, теперь, когда у нас есть набор наземных, давайте доберемся до серьезных вещей.

Часть 2

В этом разделе мы в основном будем работать с файлом JavaScript и несколько раз с файлом CSS.

Генерация случайных цветов

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

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

var colors = [

    "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 squares = document.querySelectorAll(.squares);

for (i=0; i

Я добавил шесть статических цветовых кодов RGB к цветовому массиву
Я использовал уже созданные квадраты, чтобы запустить петлю на всех квадратах, присутствующих в массиве.
Я подобрал цвет фона каждого квадрата до соответствующего индекса в массиве цветов.

Если вы добавите это в файл App.js, и вы обновляете браузер, вы увидите, что каждый квадрат теперь является уникальным цветом.

Вы можете заметить, что кнопки еще не созданы, но сейчас оставьте это. Мы придем к этой части позже.

Включить функциональность щелчка

Так что все, что нам нужно, это Слушатели событий Включено на каждом параметре/цветном блоке, прослушивании событий щелчков. Самый простой способ сделать это – снова вы догадались правильно – зацикливаясь через массив квадратов. Этот цикл будет выглядеть похоже на то, что использовалось для стиля фона цветовых блоков. Давайте посмотрим на код:

for(i=0; i<= squares.length; i++) {  squares[i].addeventListeners('click', function() {    alert('option was clicked');  });}

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

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

Проверка, если цвет правильный или нет

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

Давайте посмотрим на какой-то код, а затем я сломал это для вас.

for(i=0; i<= squares.length; i++) {  squares[i].addeventListeners('click', function() {    //if correct block is clicked do something....    //if wrong block is clicked do something....  });}

Как вы уже можете знать, мы будем использовать простой Если-ж блокировать.

pickedColor = colors[3];for (i=0; i <= squares.length; i++) { //apply background colour to all the squares... squares[i].style.backgroundColor = colors[i]   //enable click event on each square.....     squares[i].addEventListener('click', function() {

       //if the user selected the right colour....         var clickedColor = this.style.backgroundColor;

        //check if the selected colour matches the default colour...

         if(pickedColor === clickedColor) {             changeColors(pickedColor);           }         //if the user user selected wrong colour....         else {           this.style.backgroundColor = "#232323";           messageDisplay.text = "Wrong Choice!";         }    })};

Я знаю – это много кода. Но посмотрим, что это значит:

Мы начинаем с определения того, какой цвет по умолчанию, выбранный игрой, с переменной Выборка.
Тогда мы бежим наше для петли который позволяет нам пройти массив цветных блоков/вариантов.
Тогда мы включаем Нажмите События на каждом цвете Bock/опция. Мы делаем это, используя Функция обратного вызова. Эта функция не делает ничего, кроме как выберите цвет фона выбранного цветного блока/опции, просто назначая его переменной под названием Щелклоур.
Теперь у нас есть оба цвета: тот, который был выбран игрой, а другой пользователем. Все, что осталось, это соответствовать и посмотреть, был ли выбор правильным или нет.
Мы можем сделать это легко, используя Если еще блокировать. Если выбор правильный, то сделайте это или сделайте что-нибудь еще
Если выбран правильный цвет, мы добавляем некоторые текст на странице, чтобы подтвердить правильный выбор и добавить некоторые визуальные эффекты для подтверждения. Иначе мы сопоставляем цвет этого конкретного цвета/блок/блок, чтобы соответствовать цвету фона страницы. Это дает эффект, как будто цветной блок/опция только что исчез.
Теперь вы видели, что если один и тот же цвет выбран, то выполняется функция. Давайте посмотрим, что состоит в том, что эта функция состоит из:

function changeColors(color) { for (i=0; i <= squares.length; i++) {  squares[i].style.backgroundColor = color;  messageDisplay.text = "You are good at guessing!"; }}

Эта функция проходит через массив цветных блоков/параметров и сбрасывает цвет фона, чтобы быть таким из выбранного цвета или цвета по умолчанию.

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

else {  this.style.backgroundColor = "#232323";  messageDisplay.text = "Wrong Choice!";}

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

Но сначала давайте посмотрим на то, как выглядит папка кода в этой точке, если вы правильно последовали все шаги:

index.html.

app.csss.

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 (). Давайте посмотрим, как будет выглядеть функция, и тогда мы сломаемся.

function pickColor() {  var random = Math.floor(Math.random() * colors.length);  return colors[random];}

Так же, как оно может получить, давайте посмотрим, что эти две мощные линии делают для нас.

Как мы уже видели с магией Math.random и Math.floor Мы используем ту же функцию, чтобы получить случайное число, созданное между 0 и длиной массива.
Далее мы получаем соответствующий код RGB в массиве цветов, используя случайное число в индексе

Добавить шесть (или три) случайных кода RGB в цветах множество

Для этого мы используем вышеуказанные две функции, которые являются RandomColors () и Pickcolors () Отказ В частности, функция PandomColors (), в частности, заключается в том, что она запускает функцию RankyColors () шесть или три раза (в зависимости от режима игры) и добавляет соответствующее количество цветовых кодов RGB к массиву цвета. Мы назовем эту функцию GeneratorAmcolor (Num *). Давайте посмотрим, как выглядит код и сломает его вниз по линии.

* Num будет решено на основе режима игры.

Сначала мы сделаем простой пустой массив
Далее мы запустим петлю согласно режиму игры
Каждый раз, когда этот цикл выполняется, новый код RGB нажимается в созданный массив
Наконец мы возвращаем этот массив

Теперь после всех этих новых функций и все это манипулирование кода, наша кодовая база для app.js изменился довольно немного. Посмотрим, что это выглядит сейчас:

Сбросить игру

После почти настроив первичную логику, это может выглядеть как торт. Это все о создании функции и позволяют этой функции выполнять свою работу на любом заданном пользовательском входе (в этом случае щелчок Reset ).

Все, что мы хотим с кнопкой сброса

генерировать набор из шести случайных цветов
Выберите случайный цвет из нового созданного массива цветов.

Давайте посмотрим, как будет выглядеть псевдо-код:

function reset() {  //create a new array of 6 random colors  //pick new random color  //fill the squares with new set of generated colors}

Я настоятельно рекомендую написать псевдо-код при решении сложных проблем. Эта привычка написать псевдо-код помогла мне сэкономить много времени, когда я застрял на сложных алгоритмических проблемах.

Хорошо, возвращаясь к нашу кнопку сброса: давайте посмотрим, как будет выглядеть фактическая функция:

Давайте сломаемся линейкой по линии:

Мы начинаем с добавления слушателя события для кнопки сброса. Затем мы выстреливаем функцию обратного вызова, которая делает кучу вещей, когда событие Click уволено.
Когда он уволен, мы начинаем с создания нового массива шести случайных цветов.
Затем мы выбираем случайный цвет.
Наконец, мы сбрасываем цвет фона для всех цветовых блоков.

Это то, что обновлено app.js Похоже, что после всех изменений мы сделали:

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

Вот …| ссылка Для репозитория GitHub, где можно найти окончательный оптимизированный код.

Я надеюсь, что эта статья вдохновляет несколько из вас, чтобы узнать больше о манипуляции DOM и этот красивый язык JavaScript. До следующего раза!

Оригинал: “https://www.freecodecamp.org/news/learn-how-to-manipulate-the-dom-by-building-a-simple-javascript-color-game-1a3aec1d109a/”