JavaScript. Игра «Найди клад». Проект III.

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

Создаем HTML-страницу с кодом.

Это основа для разработки нашего дальнейшего кода в теге <script>. Это будет дальше, но нам важно, сделать все поэтапно, разобрав каждый элемент детально.

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

параметры wigth и height задаются в зависимости от размеров изображения. (в моем случае, размеры изображения равны 640*453). Объект target указывает координаты клада.

Обрабатываем клики пользователя.

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

$(«#map») — находим элемент mao, он является id элемента img.

Подсчет кликов будем считать при помощи переменной clicks.

var clicks = 0. Зададим начальное значение. И будем увеличивать переменную при помощи clicks++

Вычисляем расстояние от клика до клада.

Чтобы выяснить «горячо» или «холодно», нужно найти расстояние между точкой клика и местом, где лежит клад, для этого создаем функцию getDistance, вот такую

Функция getDistance принимает два аргумента: event и target. В коде функции переменная diffX хранит горизонтальное расстояние между кликом и кладом, которое мы получаем, вычитая target.x (х координата клада) из event.offsetX (х координата клика). Тем же образом мы находим вертикальное расстояние, сохраняя его в переменной diffY.

Наконец, чтобы найти расстояние между двумя точками используется теорема Пифагора. Теорема гласит, что для прямоугольного треугольника, где стороны, прилежащие к прямому углу, обозначены как a и b, а диагональная сторона обозначена как c. a^2+b^2=c^2. Чтобы найти гипотенузу нужно возвести diffX и diffY в квадрат, а затем найти их сумму и извлечь квадратный корень при помощи функции Math.sqrt.

Сообщаем игроку, насколько он близок к цели.

Зная расстояние между кликом и кладом, остается разместить подсказку, насколько игрок близок к цели, но без конкретных цифр. Для этого создадим следующую функцию getDistanceHint.

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

Отображать эти сообщения мы будем, задавая их как текстовое содержимое элемента p на нашей странице. Следующий код вычислит расстояние, получит нужную строку с сообщением и отобразит эту строку.

Проверка на выигрыш.

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

Код игры.

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

Попробовать работу программы можно здесь

Вам необходимо выполнить задание. Карту (адрес карты) указать можно любую.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Анти-спам: выполните заданиеWordPress CAPTCHA