Simple HTML Game: Click to Win!

This is a simple game created using HTML, CSS, and JavaScript. The objective of the game is to click on the button as many times as you can within a given time frame.

Game Instructions

Click on the 'Start Game' button to begin.
Once the game starts, click on the 'Click Me!' button as many times as you can within 30 seconds.
After 30 seconds, the game will end and your score will be displayed.

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>Simple HTML Game</title>
	<style>
		body {
			text-align: center;
		}

		button {
			padding: 10px 20px;
			font-size: 24px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>Simple HTML Game</h1>
	<button id="startBtn">Start Game</button>
	<p id="score"></p>
	<script src="script.js"></script>
</body>
</html>

CSS Code

body {
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 24px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

JavaScript Code

let score = 0;
let timeLeft = 30;
let timeInterval;
const startBtn = document.getElementById("startBtn");
const scoreText = document.getElementById("score");

function startGame() {
    score = 0;
    timeLeft = 30;
    startBtn.disabled = true;
    timeInterval = setInterval(updateTime, 1000);
}

function updateTime() {
    timeLeft--;
    if (timeLeft === 0) {
        clearInterval(timeInterval);
        startBtn.disabled = false;
        scoreText.innerText = 'Your score is ' + score;
        return;
    }
    scoreText.innerText = 'Time left: ' + timeLeft + ' seconds';
}

function incrementScore() {
    score++;
}

const clickBtn = document.createElement("button");
clickBtn.innerText = "Click Me!";
clickBtn.addEventListener("click", incrementScore);

startBtn.addEventListener("click", startGame);
scoreText.appendChild(clickBtn);