Не удается прочитать свойство OffsetX

250

20 декабря 2016, 21:56

Делаю простую игру.

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

Почему ругается на 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>

Answer 1

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отправить сообщение в telegram из javascript

ЗдравствуйтеЕсть форма:

515

javascript

Вывод комментариев методом wall.getComments

У меня есть вот такая ссылка

279

javascript

Как решить проблему с модальными окнами?

Нашла вот такой вот интересный эффект для модального окна и хочу использовать его в проектеЗадача такая: на странице этот эффект будет использоваться...

201

javascript

Как получить доступ к ячейкам в Google Apps Script

При написание скрипта не получается достать значение ячейки гугл таблиц в Google Apps ScriptДокументацию не осилен, но очень сильно старался

317