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>
        var sounds = ['Sound-1.mp3', 'Sound-2.mp3'];
        var soundIndex = 0;

        function showImage() {
            var image = document.getElementById('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() {
            var audio = new Audio(sounds[soundIndex]);
            if (soundIndex == 1) {
                audio.volume = 0.5;
            }
            audio.play();
            soundIndex++;
            if (soundIndex > 1) {
                soundIndex = 0;
            }
            var button = document.querySelector('button');
            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';
            showImage();
        }
    </script>
</head>
<body>
    <h1>a litile ball</h1>
    <button onclick="playSound()">Click me!</button>
    <img id="image" src="MiddleImage.gif" alt="image" style="display:none;">
</body>
</html>