WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!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>
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; } }
let score = 0; document.getElementById('circle').addEventListener('click', () => { score++; document.getElementById('score').innerText = score; });
Validating your code, please wait...
HTML
CSS
JS
<!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>
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; } }
let score = 0; document.getElementById('circle').addEventListener('click', () => { score++; document.getElementById('score').innerText = score; });