<!DOCTYPE html>
<html>
<head>
<title>Mini Click Game</title>
<style>
body { margin: 0; background: #eee; } /* 1 */
#gameBox { /* 2 */
position: absolute;
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="score">Score: 0</div>
<div id="gameBox"></div> <script>
let score = 0;
const box = document.getElementById('gameBox');
const scoreDisplay = document.getElementById('score');
// 4. කොටුව නව තැනකට ගෙන යාම
function moveBox() {
const maxX = window.innerWidth - 50;
const maxY = window.innerHeight - 50;
box.style.left = Math.random() * maxX + 'px';
box.style.top = Math.random() * maxY + 'px';
}
// 5. ක්ලික් කළ විට
box.onclick = function() {
score++;
scoreDisplay.textContent = 'Score: ' + score;
moveBox();
};
// 6. ගේම් එක පටන් ගත් විට
moveBox();
</script>
</body>
</html>