Делаю простую игру.
Цель игры — найти клад. Веб-страница будет отображать карту,
на которой программа случайным образом выбирает точку, где спрятаны сокровища. Каждый раз, когда игрок кликает по карте, программа сообщает, насколько он близок к кладу. При клике по точке с кладом
(или очень близко к ней) игра выводит поздравление и сообщает,
сколько кликов ушло на поиски.
Почему ругается на 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>