index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Shape Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<p class="score">Score: <span id="score">0</span></p>
<div class="shape" id="shape"></div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
text-align: center;
}
.shape {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
margin: 20px auto;
cursor: pointer;
}
.score {
font-size: 24px;
}
script.js
let score = 0;
function getRandomPosition() {
const shape = document.getElementById('shape');
const maxWidth = window.innerWidth - shape.clientWidth;
const maxHeight = window.innerHeight - shape.clientHeight;
const randomX = Math.floor(Math.random() * maxWidth);
const randomY = Math.floor(Math.random() * maxHeight);
shape.style.left = `${randomX}px`;
shape.style.top = `${randomY}px`;
}
function increaseScore() {
score++;
document.getElementById('score').innerText = score;
getRandomPosition();
}
document.getElementById('shape').addEventListener('click', increaseScore);
getRandomPosition();