<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Captcha и генератор случайных чисел на JS

Captcha и генератор случайных чисел на JS

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

Что такое арифметическая капча

Капча с арифметическим вычислением представляет из себя результат суммы двух чисел, который нужно ввести в соответствующее поле ввода, перед кнопкой «Отправить».


Captcha и генератор случайных чисел на JS.

Создание HTML разметки для защиты (капчи)


1. Добавим к готовой форме контейнер с классом captcha, до кнопки «Отправить».

<div class="captcha">
    ...
</div>

2. Внутри контейнера создадим два блока для первой и второй цифры - класс firstNumber и secondNumber. Оставим оба блока внутри пустыми, куда разные цифры будут автоматически записываться при помощи генератора случайных чисел. Сделаем по отдельному блоку для знаков сложения и равно.

<div class="captcha">
    <div class="firstNumber">...</div>
    <div class="plus">+</div>
    <div class="secondNumber">...</div>
    <div class="equal">=</div>
</div>


3. Создадим поле ввода для правильного ответа и установим ему максимальную длину.

<input type="text" name="captcha" class="result" maxlength="2" value="">

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


Captcha и генератор случайных чисел на JS.

4. Добавим CSS стили для всех классов. Блок с классом captcha сделаем flex-контейнером и одно магическое свойство display: flex, расставит все элементы внутри контейнера в один ряд. Зададим всем flex-элементам отступ справа, чтобы они не прилипали друг к другу.

// flex-контейнер
.captcha {
    display: flex;
    margin: 20px;
}

// flex-элементы
.firstNumber,
.plus,
.secondNumber,
.equal,
.result {
    margin-right: 3%;
}

Мы сделали HTML разметку, далее перейдем к написанию генератора случайных чисел.

Captcha и генератор случайных чисел на JS.

Как работает генератор случайных чисел в JS

Наверное вы уже догадались, что числа для капчи будут генерироваться случайным образом из объекта Match. Метод Math.random() возвращает случайное число от 0 до 1. Данный метод и есть генератор случайных чисел. Чтобы увидеть генератор в работе, нужно занести метод Math.random() в переменную и вывести содержимое переменной в модальном окне.

const random_number = Math.random();
alert(number);

При каждом обновлении браузера, будет обновлятся и число внутри переменной. Созданная переменная random_number хранит случайное число.


Captcha и генератор случайных чисел на JS.

Есть одна проблемка, нам нужно целое число в диапазоне от 0 до 10. Для этого, нужно случайное число умножить на 10 и округлить его до целого через метод round. Наш генератор случайных чисел стал чуть сложнее, механизм его действия следующий: "Мы генерируем случайное число, умножаем его на 10, округляем до целого числа и результат действия заносим в переменную.

const random_number = Math.round(Math.random() * 10);

Создадим функцию myRandom, которая генерирует случайное целое число в диапазоне from (от) и to (до). При обращении к функции, вместо условных параметров (from, to), подставятся реальные случайные числа из заданных диапазонов. После того, как будет сгенерировано первое число, оно запишется в переменную rand_num1. На втором заходе сгенерируется второе число и запишется в переменную rand_num2. На следующем этапе, вычисляем сумму двух случайных чисел и результат заносим в переменную sum.

function myRandom (from, to) {
return Math.round((Math.random() * (to - from + 1)) + from);
}

let rand_num1 = myRandom(1,9); //задаем диапазон для первого числа от 1 до 9
    rand_num2 = myRandom(1,7); //задаем диапазон для второго числа от 1 до 7
    sum = rand_num1 + rand_num2; //вычисляем сумму двух случайных чисел

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.