Scribd
Upload
4 views2 pages

ccc

heres the another game

Uploaded by

beginner2568
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views2 pages

ccc

heres the another game

Uploaded by

beginner2568
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click the Box Game</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

h1 {
margin-bottom: 10px;
}

#score {
font-size: 24px;
margin-bottom: 20px;
}

#box {
width: 50px;
height: 50px;
background-color: crimson;
position: absolute;
cursor: pointer;
border-radius: 10px;
transition: background 0.2s;
}

#startBtn {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border: none;
background-color: #3498db;
color: white;
border-radius: 8px;
margin-top: 20px;
}

#startBtn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>Click the Box!</h1>
<div id="score">Score: 0</div>
<button id="startBtn" onclick="startGame()">Start Game</button>
<div id="box" style="display: none;"></div>
<script>
const box = document.getElementById("box");
const scoreDisplay = document.getElementById("score");
let score = 0;
let gameInterval;

function startGame() {
score = 0;
updateScore();
moveBox();
box.style.display = "block";
gameInterval = setInterval(moveBox, 800);
}

function updateScore() {
scoreDisplay.textContent = "Score: " + score;
}

function moveBox() {
const maxWidth = window.innerWidth - 60;
const maxHeight = window.innerHeight - 60;
const x = Math.random() * maxWidth;
const y = Math.random() * maxHeight;
box.style.left = x + "px";
box.style.top = y + "px";
}

box.addEventListener("click", () => {
score++;
updateScore();
moveBox();
});
</script>
</body>
</html>

You might also like