Calculator Tools Calculator Tools
Create

Clicker Game

Sep 8, 2023

About this app

A fun and addictive clicker game where you have to click as fast as you can to earn points.

Clicker Game Clicker Game Click the button as fast as you can to earn points! Score: 0 Click Me!

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Clicker Game</title>
<meta name="description" content="A fun and addictive clicker game where you have to click as fast as you can to earn points.">
<meta name="keywords" content="clicker game, click game, clicker, fun game">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let score = 0;

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
const scoreElement = document.getElementById("score");
const clickButton = document.getElementById("click-button");

clickButton.addEventListener("click", function() {
score++;
scoreElement.textContent = score;
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f9f9f9;
font-family: 'Roboto', sans-serif;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}

h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}

p {
color: #666;
font-size: 18px;
margin-bottom: 20px;
}

#score {
font-size: 48px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}

#click-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 24px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#click-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Clicker Game</h1>
<p>Click the button as fast as you can to earn points!</p>
<p>Score: <span id="score">0</span></p>
<button id="click-button">Click Me!</button>
</div>
</body>
</html>