Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Ziadod</title>
    <style>
        body {
            background-color: #aaaaaa;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        h1 {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 10%);
        }
        button {
            font-size: 24px;
            border-radius: 10px;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            padding: 20px 40px;
            background-color: #838383;
            color: #000000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 20px;
            max-width: 80%;
        }
        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            opacity: 0;
            transition: opacity 0.5s;
        }
    </style>
    <script>
        function showImage(image) {
            image.style.width = '200px';
            image.style.display = 'block';
            setTimeout(function() {
                image.style.opacity = '1';
            }, 0);
            setTimeout(function() {
                image.style.opacity = '0';
            }, 500);
        }

        function playSound(sound) {
           var audio = new Audio(sound);
           audio.play();
           audio.addEventListener('ended', function() {
      if (sound === 'Sound-1.mp3') {
      showImage(document.getElementById('image-1'));
    } else if (sound === 'Sound-2.mp3') {
        showImage(document.getElementById('image-2'));
    }
  });
}

        document.addEventListener('DOMContentLoaded', function() {
            var button = document.querySelector('button');
            button.addEventListener('click', function() {
                playSound('Sound-1.mp3');
                var x = Math.floor(Math.random() * (window.innerWidth - button.offsetWidth - 20));
                var y = Math.floor(Math.random() * (window.innerHeight - button.offsetHeight - 20));
                button.style.left = x + 'px';
                button.style.top = y + 'px';
            });
        });
    </script>
</head>
<body>
    <h1>a litile ball</h1>
    <button>Click me!</button>
    <img id="image-1" class="image" src="MiddleImage-1.gif" alt="image-1">
    <img id="image-2" class="image" src="MiddleImage-2.gif" alt="image-2">
</body>
</html>