HTML Game: Click and Score

This is a simple HTML game with no instructions. Your goal is to click on the moving objects as fast as you can. You have 30 seconds, so be quick!

To play, just open the HTML file in your web browser and click on the objects as they move across the screen. Your score will be displayed at the end of the game.

Here's the HTML code:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Game: Click and Score</title>
	<style>
		#game-board {
			height: 500px;
			width: 800px;
			border: 1px solid black;
			position: relative;
		}
		.game-object {
			height: 50px;
			width: 50px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			top: 0;
			left: 0;
			animation: move 2s infinite;
			cursor: pointer;
		}
		@keyframes move {
			from {top: 0; left: 0;}
			to {top: 450px; left: 750px;}
		}
	</style>
</head>
<body>
	<h1>HTML Game: Click and Score</h1>
	<p>Click on the moving objects as quickly as possible!</p>
	<div id='game-board'>
		<div class='game-object'></div>
		<div class='game-object'></div>
		<div class='game-object'></div>
		<div class='game-object'></div>
		<div class='game-object'></div>
	</div>

	<script>
		let score = 0;
		let timeLeft = 30;

		let timer = setInterval(function(){
			timeLeft--;
			if(timeLeft <= 0){
				clearInterval(timer);
				alert('Game over! Your score is ' + score);
			}
			document.getElementById('timer').innerHTML = timeLeft;
		}, 1000);

		let objects = document.querySelectorAll('.game-object');
		objects.forEach(function(object) {
			object.addEventListener('click', function(){
				score++;
				document.getElementById('score').innerHTML = score;
				object.style.display = 'none';
			});
		});
	</script>

	<p>Time left: <span id='timer'>30</span> seconds</p>
	<p>Score: <span id='score'>0</span></p>

</body>
</html>

This is a simple game and can be modified to add more features. Enjoy playing!

HTML Game: Click and Score - No Instructions Needed!

HTML Game: Click and Score - No Instructions Needed!

HTML Game: Click and Score