Здравствуйте! У меня возник вопрос, для начала постараюсь максимально точно дать бэкграунд: у меня есть задача, написать скрипт, который позволит на главной странице собирать тыквы.
Как реализовано: тыквы спрятаны и появляются при наведении в нужном месте. Клик можно сделать только по одному изображению. Стоит лимит в 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>
