Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не удается прочитать свойство OffsetX (https://javascript.ru/forum/events/66503-ne-udaetsya-prochitat-svojjstvo-offsetx.html)

DivMan 19.12.2016 16:28

Не удается прочитать свойство 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>

Dilettante_Pro 19.12.2016 17:01

DivMan,
Интересно, а какой event у вас в строке 74? И по какому поводу эта строка выполняется?

DivMan 19.12.2016 17:09

Цитата:

Сообщение от Dilettante_Pro (Сообщение 438428)
DivMan,
Интересно, а какой event у вас в строке 74? И по какому поводу эта строка выполняется?

ещё не разобрался, делаю по книге

DivMan 19.12.2016 17:20

Говорят, то, что ругается т. к. event == undefined. У вас функция getDistanceHint() вызывается один раз, когда вы определяете значение distanceHint. Соответственно, она никак не связана с кликом по карте и event клика в нее не передается.

Но я всё равно не понял

Dilettante_Pro 19.12.2016 17:35

DivMan,
Цитата:

Сообщение от DivMan
Но я всё равно не понял

Что же тут непонятного? У вас
// Добавляем элементу img обработчик клика

		$("#map").click(function (event) {
			clicks++;
		});

		// Получаем расстояние от места клика до клада

		var distance = getDistance(event, target);
т.е событие event, оно же click, определяется внутри функции обработчика. На момент исполнения строки
var distance = getDistance(event, target);
(после загрузки страницы, один раз) эта переменная абсолютно не определена.
Кстати, target задастся тоже только один раз при загрузке страницы.

PS: в какой, интересно, книге такое написано?

DivMan 19.12.2016 21:05

Цитата:

Сообщение от Dilettante_Pro (Сообщение 438432)
DivMan,

Что же тут непонятного? У вас
// Добавляем элементу img обработчик клика

		$("#map").click(function (event) {
			clicks++;
		});

		// Получаем расстояние от места клика до клада

		var distance = getDistance(event, target);
т.е событие event, оно же click, определяется внутри функции обработчика. На момент исполнения строки
var distance = getDistance(event, target);
(после загрузки страницы, один раз) эта переменная абсолютно не определена.
Кстати, target задастся тоже только один раз при загрузке страницы.

PS: в какой, интересно, книге такое написано?

JavaScript для детей

Dilettante_Pro 20.12.2016 10:16

Цитата:

Сообщение от DivMan
JavaScript для детей

Жалко бедных деток:cray:


Часовой пояс GMT +3, время: 04:39.