Не удается прочитать свойство OffsetX
Делаю простую игру.
Цель игры — найти клад. Веб-страница будет отображать карту, на которой программа случайным образом выбирает точку, где спрятаны сокровища. Каждый раз, когда игрок кликает по карте, программа сообщает, насколько он близок к кладу. При клике по точке с кладом (или очень близко к ней) игра выводит поздравление и сообщает, сколько кликов ушло на поиски. Почему ругается на OffsetX? http://plnkr.co/edit/n0LaNJsOpwo1QeNGeLEA?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Найди клад!</title>
</head>
<body>
<h1 id="heading">Найди клад!</h1>
<img id="map" width=400 height=400
src="http://nostarch.com/images/treasuremap.png">
<p id="distance"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
// Получить случайное число от 0 до size-1
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);
}
</script>
</body>
</html>
|
DivMan,
Интересно, а какой event у вас в строке 74? И по какому поводу эта строка выполняется? |
Цитата:
|
Говорят, то, что ругается т. к. event == undefined. У вас функция getDistanceHint() вызывается один раз, когда вы определяете значение distanceHint. Соответственно, она никак не связана с кликом по карте и event клика в нее не передается.
Но я всё равно не понял |
DivMan,
Цитата:
// Добавляем элементу img обработчик клика
$("#map").click(function (event) {
clicks++;
});
// Получаем расстояние от места клика до клада
var distance = getDistance(event, target);
т.е событие event, оно же click, определяется внутри функции обработчика. На момент исполнения строки var distance = getDistance(event, target);(после загрузки страницы, один раз) эта переменная абсолютно не определена. Кстати, target задастся тоже только один раз при загрузке страницы. PS: в какой, интересно, книге такое написано? |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:23. |