@arteqrt
Почти не начинающий програмист

Чем обусловлено действие кода именно в блоке?

var getRandomNumber = function (size) {
 return Math.floor(Math.random() * size);
 };
 // Вычислить расстояние от клика (event) до клада (target)
 var getDistance = function (event, target) {
 var diffX = event.offsetX - target.x;
 var diffY = event.offsetY - target.y;
 return Math.sqrt((diffX * diffX) + (diffY * diffY));
 };
 // Получить для расстояния строку подсказки
 var getDistanceHint = function (distance) {
 if (distance < 10) {
 return "Обожжешься!";
 } else if (distance < 20) {
 return "Очень горячо";
 } else if (distance < 40) {
 return "Горячо";
 } else if (distance < 80) {
 return "Тепло";
 } else if (distance < 160) {
 return "Холодно";
 } else if (distance < 320) {
 return "Очень холодно";
 } else {
 return "Замерзнешь!";
 }
 };
 // Создаем переменные
var width = 400;
 var height = 400;
 var clicks = 0;
 // Случайная позиция клада
var target = {
 x: getRandomNumber(width),
 y: getRandomNumber(height)
 };
 // Добавляем элементу img обработчик клика
$("#map").click(function (event) {
 clicks++;
 // Получаем расстояние от места клика до клада
var distance = getDistance(event, target);
 // Преобразуем расстояние в подсказку
var distanceHint = getDistanceHint(distance);
 // Записываем в элемент #distance новую подсказку
$("#distance").text(distanceHint);
 // Если клик был достаточно близко, поздравляем с победой
if (distance < 8) {
 alert("Клад найден! Сделано кликов: " + clicks);
 }
 });

var getDistance = function (event, target) {
 var diffX = event.offsetX - target.x;
 var diffY = event.offsetY - target.y;
 return Math.sqrt((diffX * diffX) + (diffY * diffY));
 };

почему когда оно берет значение event.offsetY или event.offsetX, оно берет именно из блока $("#map"), а не из всего окна?
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
@arteqrt Автор вопроса
Почти не начинающий програмист
Функция getDistance вложена в обработчик клика $("#map"). Оказывается что функции объявленные в нем принимают его значение event
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
wapster92
@wapster92 Куратор тега JavaScript
https://developer.mozilla.org/ru/docs/Web/API/Mous...
Первый абзац
показывает отступ курсора мыши по оси X от края целевого DOM узла.
для окна есть свойство clientX/Y. И да я это узнал из документации просто вбив вопрос в гугл.
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Работает? Не трогай.
5f43a81a0fa76927979700.jpeg

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

Объект события (RU)

Напишите в начале функции "getDistance"
вот это:
console.log( event );

спойлер
event.offsetY/X берется от елемента, по которому кликнули, а не от окна.
Ответ написан
john36allTa
@john36allTa
That`s calling Walker
Т.к. target - мнимый элемент, то тут только width и height имеют значение - оно по логике должно быть равно #map.width/height
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
24 сент. 2020, в 02:31
700 руб./в час
24 сент. 2020, в 01:04
20000 руб./за проект
23 сент. 2020, в 23:49
500 руб./за проект