Узнайте, как управлять DOM, создав простую цветную игру JavaScript

1656593542 uznajte kak upravlyat dom sozdav prostuyu czvetnuyu igru javascript

автор Ашиш Нандан Сингх

Что такое DOM?

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

1*QTOLCnPd_rg5Fum9l9PNSA
Представление DOM простого файла .html

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

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

  • добавление и удаление элементов и атрибутов HTML
  • добавление и удаление правил CSS для события, запущенного пользователем
  • создание новых событий для синтетических событий пользователя

И именно об этом вы узнаете в этой статье.

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

Начинаем

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

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

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

1*ezY7AYaRb8oAbfmjyNeGaw
Макет диаграммы

Часть 1

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

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

<!DOCTYPE html><html>
<head><title>Color Game</title><link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/learn-how-to-manipulate-the-dom-by-building-a-simple-javascript-color-game-1a3aec1d109a/app.css"></head>
<body>
<h1>The Great<br><span id="colorDisplay">RGB</span><br>Color Game</h1>
<div id="stripe">
<button id="reset">New Colors</button><span id="message"></span><button class="mode">Easy</button><button class="mode selected">Hard</button>
</div>
<div id="container">
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div>
</div>
<script type="text/javascript" src="https://www.freecodecamp.org/news/learn-how-to-manipulate-the-dom-by-building-a-simple-javascript-color-game-1a3aec1d109a/app.js"></script></body></html>

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

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

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

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

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;}

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

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

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

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

  • The numSquares переменная сохраняет количество квадратов, которые будут доступны в игре в соответствии с режимом. Для простоты я жестко запрограммировал значение шесть всегда, мы можем вернуться к этому и добавить немного логики, чтобы оно постоянно менялось.
  • цвета является пустым массивом, содержащим случайные шесть или три цветовых кода RGB, которые генерируются каждый раз, когда сбрасывается игра или меняется режим.
  • выбранный цвет – это цвет/блок параметров, который выбирает пользователь при каждом щелчке.
  • квадраты – это массив всех квадратов на странице, которые доступны как варианты. Этот массив может содержать три или шесть элементов в зависимости от режима игры.
  • The сбросить переменная кнопка «новая игра» на панели управления.
  • кнопки режима снова массивом, в котором есть кнопки легкого и жесткого режимов.

Если вы добились этого момента, у вас должна быть достаточно простая версия этой игры. Вы можете открыть файл 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 squares = document.querySelectorAll(.squares);
for (i=0; i<squares.length; i++) {squares.style.backgroundColor = colors[i]}
  • Я добавил шесть статических цветовых кодов RGB в цветовой массив.
  • Я использовал уже созданный массив квадратов, чтобы запустить цикл по всем квадратам, присутствующим в массиве.
  • Я сравнил цвет фона каждого квадрата с соответствующим индексом в массиве цветов.

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

1*LSsJbHhndKH8n7PxPf8UzA
*скриншот из браузера

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

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

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

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!";         }    })};

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

  • Мы начинаем с определения цвета по умолчанию, выбранного игрой, с переменной выбранный цвет.
  • Тогда запускаем нашу цикл for что позволяет нам пройти через набор цветных блоков/опций.
  • Затем мы включаем нажмите события на каждом цвете/варианте. Мы делаем это с помощью a функция обратного вызова Эта функция только выбирает цвет фона выбранного цветового блока/опции, просто назначая его вызываемой переменной щелкнул Цвет.
  • Теперь у нас есть оба цвета: один выбран игрой, а другой пользователем. Осталось только собраться и посмотреть, правильный выбор или нет.
  • Мы можем это легко сделать с помощью если иначе блокировать. Если выбор правильный, то сделайте это или сделайте что-то другое
  • Если выбран правильный цвет, мы добавляем текст на страницу для подтверждения правильного выбора и добавляем визуальный эффект для повторного подтверждения. В противном случае мы подбираем цвет этого параметра цвета/блока, чтобы соответствовать цвету фона страницы. Это создает эффект, будто цветовой блок/параметр только что исчез.
  • Теперь вы видели, что если выбран тот же цвет, то выполняется функция. Давайте посмотрим, из чего состоит эта функция:
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.css

app.js

Шаг 3

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

Если это заставляет вас думать о функциях, это правильный выбор. Мы создадим новую функцию вместе с совершенно случайными (новыми) цветовыми кодами и назначим их к массиву цветов. Затем мы получим их в массиве цветных блоков/параметров.

Давайте посмотрим, как выглядит код, а затем пройдем его строчку за строчкой.

Встроенный метод JavaScript помогает нам генерировать случайное число от 0 до 1. Затем мы делаем некоторые манипуляции, чтобы убедиться, что диапазон этого случайного числа остается между цифрами от 0 до 255.

  • Сначала внедряем Math.random, выбрав любое случайное число от 0 до 1, затем умножьте это число на 256, поскольку мы не хотим, чтобы число было больше 255. Получив случайное число, мы используем Math.pol и убедитесь, что перед десятичными значениями стоит только цифра (целое число).
  • Мы присваиваем эти случайные числа, сгенерированные, переменным под названием 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.polмы используем ту же функцию, чтобы получить случайное число, сгенерированное между 0 и длиной массива.
  • Далее мы получаем соответствующий код RGB в массиве цветов, используя случайное число в индексе

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

Для этого мы используем две вышеприведенные функции, которые есть randomColors() и pickColors(). Функция randomColors() выполняет функцию randomColors() шесть или три раза (в зависимости от режима игры) и добавляет соответствующее количество цветовых кодов RGB к массиву цветов. Мы назовем эту функцию generateRandomColor(num*). Давайте посмотрим, как выглядит код, и разберем его строчку за строчкой.

*количество будет определено на основе режима игры.

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

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

Сброс игры

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

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

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

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

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. В следующий раз!

Добавить комментарий

Ваш адрес email не будет опубликован.