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
489
Pedro_bugica
Abrir en el editor
Publica tu código
Recomendado
6 January 2025
Una página de inicio moderna
15 May 2025
Plantilla de sitio web de comercio electrónico HTML CSS
21 December 2024
contraseña de inicio de sesión
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; });
