Здравствуйте! У меня возник вопрос, для начала постараюсь максимально точно дать бэкграунд: у меня есть задача, написать скрипт, который позволит на главной странице собирать тыквы.
Как реализовано: тыквы спрятаны и появляются при наведении в нужном месте. Клик можно сделать только по одному изображению. Стоит лимит в 5 кликов. Дальше событие останавливается, появляется окно, что лимит на сегодня все, после закрытия окна — тыквы больше недоступны для сбора. Итого можно собирать по 5 тыкв в день, всего - 50 тыкв. Когда достигается лимит 50 тыкв, появляется сообщение и игра больше не должна быть доступна (по задумке, а вот в коде реализовано криво).
Столкнулась с тем, что чтобы реализовать задумку сбора (через клики по картинкам) и чтобы статистика сохранялась, скорее всего, надо подключать к этому дело БД. Но я решила приложить к этому подорожник, в виде хранения кликов в Local Storage. Отсюда у меня появились вопросы:
1. Я верно понимаю, что если делать через Local Storage, то данные о кликах будут храниться в сессии браузера? То есть, браузер нельзя закрыть/кэш — нельзя почистить? Тогда как корректно реализовать это через JS? Потому как по сути функция с датой не работает (не происходит обнуление на следующий день) либо я что-то не так понимаю/делаю.
2. Возможно ли в принципе реализовать код так, чтобы не нужно было подключать БД? Возможно, стоит упростить задумку? Я буду рада, если сможете подсказать/направить.
Вот здесь лежит тестовый форум, тыквы в шапке, в левой ее части: https://sureaboutthis.anihub.me/
На скриншоте указано, куда нужно навести.
Если информации недостаточно, подскажите, пожалуйста, что мне нужно дополнить/сделать, также если нужен технический аккаунт — напишите, пожалуйста, об этом.
Сам код:
<!DOCTYPE html> <html> <head> <style> /* Простой CSS для отображения картинок при наведении */ .clickable { cursor: pointer; position: absolute; width: 50px; height: 50px; display: block; } /* CSS для сообщений */ #message { position: fixed; bottom: 384px; right: 370px; background-color: #333; color: #fff; padding: 10px; border-radius: 6px; display: none; } </style> </head> <body> <!-- Вставьте здесь ваши картинки с классом "clickable" и подсказкой --> <div class="clickable" style="margin-left: 10px; margin-top: 20px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 50px; margin-top: 100px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 150px; margin-top: 30px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 200px; margin-top: 120px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 80px; margin-top: 60px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 30px; margin-top: 150px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 180px; margin-top: 90px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <div class="clickable" style="margin-left: 120px; margin-top: 180px;"> <img style="display: none" src="https://forumstatic.ru/files/0015/5e/af/77625.png" data-title="Тут тыква! Нажми!"> </div> <!-- Добавьте остальные картинки с соответствующими подсказками --> <!-- HTML-элемент для сообщений --> <div id="message"> <img src="https://forumstatic.ru/files/0015/5e/af/45998.png" style="float: left; margin-right: 10px;"> <!-- Кнопка закрытия окна --> <span id="close-button" style="position: absolute; top: 2px; right: 5px; cursor: pointer;">×</span> <div id="message-content"></div> </div> <script type="text/javascript"> // Проверяем, находимся ли мы на главной странице if (window.location.href === 'https://sureaboutthis.anihub.me/') { // Объявление переменных для отслеживания счетчика тыковок let totalClicks = 0; let dailyClicks = 0; const maxTotalClicks = 50; // Максимальное количество тыковок в общем const maxDailyClicks = 5; // Максимальное количество тыковок в день // Находим все элементы с классом "clickable" const images = document.querySelectorAll('.clickable'); // HTML-элемент для сообщений const messageElement = document.getElementById('message'); const messageContent = document.getElementById('message-content'); const closeButton = document.getElementById('close-button'); // Функция для отображения сообщения function showMessage(message) { messageContent.innerHTML = message; messageElement.style.display = 'block'; } // Функция для скрытия сообщения function hideMessage() { messageElement.style.display = 'none'; } // Обработчик события для закрытия окна closeButton.addEventListener('click', hideMessage); // Функция для отображения картинки при наведении function showImage(event) { const image = event.target.querySelector('img'); if (!image) return; if (image.style.display === 'block') return; // Проверяем, не видна ли уже image.style.display = 'block'; totalClicks++; // Увеличиваем общий счетчик тыковок // Запускаем таймер для скрытия картинки через 5 секунд setTimeout(hideImage, 5000, image); } // Проверяем, есть ли уже данные о тыковках в localStorage if (localStorage.getItem('totalClicks')) { totalClicks = parseInt(localStorage.getItem('totalClicks')); } if (localStorage.getItem('lastClickTime')) { const lastClickTime = parseInt(localStorage.getItem('lastClickTime')); const currentTime = Date.now(); // Проверяем, если последний клик был сделан менее чем 24 часа назад, сбрасываем счетчик ежедневных тыковок if (currentTime - lastClickTime < 24 * 60 * 60 * 1000) { dailyClicks = 0; } } // Обновляем данные в localStorage updateClicksInLocalStorage(); // Обновление данных о тыковках в localStorage function updateClicksInLocalStorage() { localStorage.setItem('totalClicks', totalClicks); localStorage.setItem('dailyClicks', dailyClicks); localStorage.setItem('lastClickTime', Date.now()); } // Функция для скрытия картинки function hideImage(image) { if (image) { image.style.display = 'none'; } } // Функция для блокировки всех тыковок function disableAllClickables() { for (let i = 0; i < images.length; i++) { images[i].style.display = 'none'; } } // Присваиваем событие для каждой картинки for (let i = 0; i < images.length; i++) { images[i].addEventListener('mouseover', showImage); images[i].addEventListener('click', countClicksAndShowMessage); } // Функция для проверки и блокировки тыкв при обновлении страницы function checkAndDisableClickables() { if (totalClicks >= maxDailyClicks) { disableAllClickables(); } } // Вызываем функцию при загрузке страницы для проверки и блокировки checkAndDisableClickables(); function countClicksAndShowMessage(event) { // Записать информацию о том, что по тыкве кликнули tag = event.target.getAttribute('tag'); if (tag === 'clicked') return; event.target.setAttribute('tag', 'clicked'); // Проверяем, если общий лимит достигнут, выводим сообщение и блокируем дальнейшие тыковки if (totalClicks >= maxTotalClicks) { showMessage('Поздравляю! Все тыковки собраны, напиши администратору, приложив скриншот этого текста.'); disableAllClickables(); return; } // Сохраняем текущую дату в localStorage const today = new Date(); localStorage.setItem('lastClickDate', today.toDateString()); // Проверяем, если сегодняшний лимит достигнут, выводим сообщение if (dailyClicks >= maxDailyClicks) { showMessage('Все тыковки на сегодня собраны! Возвращайся завтра.'); disableAllClickables(); // Скрываем все тыковки return; } else { dailyClicks++; // Увеличиваем счетчик тыковок за день totalClicks++; // Показываем сообщение showMessage(`Итак, у нас есть... сколько тыкв? Вижу, что ${dailyClicks}`); updateClicksInLocalStorage(); // Обновляем данные в localStorage } } } </script> </body> </html>