Created
January 15, 2024 08:50
-
-
Save sangwin/2542ccf7f605eeac0bb656405ce62211 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <title>Catch the Circle Game</title> | |
| <style> | |
| body { | |
| height: 100vh; | |
| position: relative; | |
| } | |
| .circle { | |
| position: absolute; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="circle" class="circle"><img width="100" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/1c084b146355983.62af33215458c.gif"/></div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| let moveCircle; | |
| const circle = document.getElementById('circle'); | |
| function getRandomPosition() { | |
| const container = document.querySelector('body'); | |
| const maxX = container.clientWidth - circle.clientWidth - 100; | |
| const maxY = container.clientHeight - circle.clientHeight - 100; | |
| const randomX = Math.floor(Math.random() * maxX); | |
| const randomY = Math.floor(Math.random() * maxY); | |
| return { x: randomX, y: randomY }; | |
| } | |
| function repositionCircle() { | |
| const position = getRandomPosition(); | |
| circle.style.left = `${position.x}px`; | |
| circle.style.top = `${position.y}px`; | |
| } | |
| function moveAway() { | |
| clearInterval(moveCircle); | |
| const position = getRandomPosition(); | |
| const offset = 50; // Adjust this value for the distance you want the circle to move away | |
| const newX = position.x < window.innerWidth / 2 ? position.x - offset : position.x + offset; | |
| const newY = position.y < window.innerHeight / 2 ? position.y - offset : position.y + offset; | |
| circle.style.left = `${newX}px`; | |
| circle.style.top = `${newY}px`; | |
| moveCircle = setInterval(moveAway, 5000); | |
| } | |
| circle.addEventListener('mouseover', moveAway); | |
| moveCircle = setInterval(moveAway, 5000); | |
| // Initial positioning | |
| repositionCircle(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment