<img src="flower.jpg" 
     onmouseover="this.src='butterfly.jpg'"
     onmouseout="this.src='flower.jpg'">

const messages = ['Зберегти', 'Скасувати'];
buttons.forEach((btn, index) => {
    btn.onmouseover = () => infoField.value = messages[index];
    btn.onmouseout = () => infoField.value = '';
});

    const gameArea = document.getElementById('gameArea');
    const mouse = document.getElementById('mouse');
    const cat = document.getElementById('cat');
    const gameStatus = document.getElementById('gameStatus');
    const resetBtn = document.getElementById('resetGame');

    if (gameArea && mouse && cat && gameStatus && resetBtn) {
        let gameActive = true;
        let moveInterval;
        // Мишка рухається випадково кожні 0.5 секунди
        // Функція випадкового переміщення мишки
        function moveMouseRandomly() {
            if (!gameActive || mouse.style.display === 'none') return;
            
            const areaWidth = gameArea.offsetWidth - 60;
            const areaHeight = gameArea.offsetHeight - 60;
            
            if (areaWidth > 0 && areaHeight > 0) {
                const x = Math.random() * areaWidth;
                const y = Math.random() * areaHeight;
                
                mouse.style.left = x + 'px';
                mouse.style.top = y + 'px';
            }
        }

        // Початкове розташування
        function resetGame() {
            gameActive = true;
            mouse.style.display = 'block';
            cat.style.display = 'none';
            gameArea.style.background = '#87CEEB';
            gameStatus.innerHTML = '🍖 Спіймай мишку! Клікни на неї курсором';
            
            // Очищаємо попередній інтервал
            if (moveInterval) clearInterval(moveInterval);
            
            // Запускаємо новий інтервал
            moveMouseRandomly();
            moveInterval = setInterval(moveMouseRandomly, 600);
        }

        // Обробник кліку на мишку
        mouse.addEventListener('click', function(e) {
            e.stopPropagation(); // Запобігаємо спливанню події
            if (!gameActive) return;
            
            gameActive = false;
            mouse.style.display = 'none';
            cat.style.display = 'block';
            gameArea.style.background = '#90EE90';
            gameStatus.innerHTML = '🎉 Ти спіймав мишку! Це кіт!';
            
            if (moveInterval) clearInterval(moveInterval);
        });

        // Мишка тікає при наведенні (робимо гру цікавішою)
        mouse.addEventListener('mouseover', function() {
            if (gameActive && mouse.style.display !== 'none') {
                moveMouseRandomly();
            }
        });

        // Кнопка скидання
        resetBtn.addEventListener('click', resetGame);

        // Запускаємо гру
        resetGame();
    }

// При кліку на мишку - з'являється кіт
mouse.addEventListener('click', function() {
    mouse.style.display = 'none';
    cat.style.display = 'block';
    gameArea.style.background = '#90EE90';
});

// Основний алгоритм Drag & Drop:
1. mousedown – запам'ятовуємо зсув (shiftX/shiftY)
2. mousemove – переміщуємо елемент (position: absolute)
3. mouseup – завершуємо перенесення

// Визначення елемента під курсором:
element.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
element.hidden = false;