Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.01.2019, 08:43   #1
Марина2
 
Регистрация: 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>
Марина2 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите, как правильно выполнить задачу. 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