WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de Pedro_bugica
1004
Pedro_bugica
Abrir en el editor
Publica tu código
Recomendado
16 August 2024
Tienda de tokens de Discord
18 April 2025
un código de metehan
25 May 2024
Dominar el arte de las puertas correderas: técnicas de animación CSS y GSAP
HTML
Copy
<!DOCTYPE html> <html> <head> <title>Click the Circle Game</title> <link rel="stylesheet" href="Game.css"> </head> <body> <div class="game-container"> <div class="circle" id="circle"></div> <p>Score: <span id="score">0</span></p> </div> <script src="main.js"></script> </body> </html>
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .game-container { text-align: center; } .circle { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: relative; cursor: pointer; animation: moveCircle 2s infinite; } @keyframes moveCircle { 0% { left: 0; } 50% { left: calc(100% - 100px); } 100% { left: 0; } }
JS
Copy
let score = 0; document.getElementById('circle').addEventListener('click', () => { score++; document.getElementById('score').innerText = score; });
