|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
13.01.2019, 08:43 | #1 |
Регистрация: 05.01.2019
Сообщений: 4
|
JavaScript ИГРА
Здравствуйте, подскажите, пожалуйста, как сделать так, чтобы после нахождения круга картинка поменялась. И на новой картинке задать две точки для поиска кругов? Благодарю.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Геометрия для малышей</title> </head> <body> <h1 id="heading">Найди круг!</h1> <img id="map" width=400 height=400 src=../../imagesgames/igra1.gif > <p id="distance"></p> <script src="https://code.jquery.com/jquery-2.1.0.js"></script> <script> // Вычислить расстояние от клика (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 < 200) { return "ОЙ! ОШИБОЧА! ПОПРОБУЙ ЕЩЁ РАЗ!"; } else if (distance < 320) { return "ОЙ! ОШИБОЧА! ПОПРОБУЙ ЕЩЁ РАЗ!"; } else { return "ОЙ! ОШИБОЧА! ПОПРОБУЙ ЕЩЁ РАЗ!"; } }; // Создаем переменные var width = 400; var height = 400; var clicks = 0; // Позиция круга var target = { x: 252, y:84 }; // Добавляем элементу img обработчик клика $("#map").click(function (event) { clicks++; // Получаем расстояние от места клика до круга var distance = getDistance(event, target); // Преобразуем расстояние в подсказку var distanceHint = getDistanceHint(distance); // Записываем в элемент #distance новую подсказку $("#distance").text(distanceHint) ; // Если клик был достаточно близко, поздравляем с победой if (distance < 150) { alert("КРУГ НАЙДЕН! Сделано кликов: " + clicks); } }); </script> </body> </html> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Подскажите, как правильно выполнить задачу. JavaScript. HTML. CSS - JavaScript | Bob123 | JavaScript, Ajax | 0 | 20.01.2018 22:07 |
[JavaScript] Canvas - игра "Виселица" | krikqwerty | Помощь студентам | 4 | 15.10.2017 20:58 |
Ваша первая игра на JavaScript и Phaser (перевод) | 8Observer8 | Gamedev - cоздание игр: Unity, OpenGL, DirectX | 5 | 01.12.2016 09:54 |
Веб-разработчик на JavaScript (игра в нарды) | ulis-ma | Фриланс | 1 | 10.02.2015 17:10 |
Игра на Javascript | mixon-21 | JavaScript, Ajax | 6 | 14.01.2014 22:23 |