Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2016, 15:28
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

Не удается прочитать свойство 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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2016, 16:01
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

DivMan,
Интересно, а какой event у вас в строке 74? И по какому поводу эта строка выполняется?
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2016, 16:09
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

Сообщение от Dilettante_Pro Посмотреть сообщение
DivMan,
Интересно, а какой event у вас в строке 74? И по какому поводу эта строка выполняется?
ещё не разобрался, делаю по книге
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2016, 16:20
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

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

Но я всё равно не понял
Ответить с цитированием
  #5 (permalink)  
Старый 19.12.2016, 16:35
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

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

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

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

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

Последний раз редактировалось Dilettante_Pro, 19.12.2016 в 16:41.
Ответить с цитированием
  #6 (permalink)  
Старый 19.12.2016, 20:05
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

Сообщение от Dilettante_Pro Посмотреть сообщение
DivMan,

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

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

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

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

PS: в какой, интересно, книге такое написано?
JavaScript для детей
Ответить с цитированием
  #7 (permalink)  
Старый 20.12.2016, 09:16
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от DivMan
JavaScript для детей
Жалко бедных деток
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS свойство "content" без before и after. ruslan_mart (X)HTML/CSS 5 01.10.2013 18:28
Свойства объекта, методы и this. Почему свойство вызывается с () ? jsuse Общие вопросы Javascript 2 04.11.2011 18:39
Объект не поддерживает это свойство или метод load_081112_0953.js 1auto1 Internet Explorer 1 13.04.2011 20:59
Не могу прочитать свойство left, объявленное в <style> nickolasha Общие вопросы Javascript 8 15.11.2010 00:09
если (свойство css == 2) свойство css = 1; funkypublic Events/DOM/Window 1 09.06.2010 16:39