code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clicker Game</title>
<style>
/* CSS styles */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
margin-top: 50px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#clickButton {
padding: 20px;
font-size: 24px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
.upgradeButton {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
margin: 5px;
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.upgradeButton:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
/* Styles for the "Made by" Pop-up Modal */
#authorModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top of everything */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0,0,0,0.4); /* Black background with opacity */
justify-content: center;
align-items: center;
}
#authorModal .modal-content {
background-color: #fefefe;
padding: 30px;
border: 1px solid #888;
width: 80%; /* Could be more responsive */
max-width: 300px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
color: red;
}
/* Styles for the "Not enough money" Pop-up Modal */
#moneyModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top of everything */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0,0,0,0.4);
justify-content: center;
align-items: center;
}
#moneyModal .modal-content {
background-color: #fefefe;
padding: 30px;
border: 1px solid #888;
width: 80%;
max-width: 300px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.green-text {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>Clicker Game</h1>
<p>Clicks: <span id="clickCount">0</span></p>
<p>Clicks per second: <span id="cps">0</span></p>
<p>Clicks per click: <span id="cpc">1</span></p>
<button id="clickButton" onclick="clickAction()">Click Me!</button>
<h2>Upgrades (Shop)</h2>
<button id="upgrade1" class="upgradeButton" onclick="buyUpgrade(10, 'cpc')">Upgrade Click Power (Cost: 10, +1 CPC)</button>
<button id="upgrade2" class="upgradeButton" onclick="buyUpgrade(50, 'cps')">Buy Auto-Clicker (Cost: 50, +1 CPS)</button>
</div>
<!-- "Made by" Pop-up Box (Modal) -->
<div id="authorModal">
<div class="modal-content">
<p>Made by @Rocketchase14</p>
</div>
</div>
<!-- "Not enough money" Pop-up Box (Modal) -->
<div id="moneyModal">
<div class="modal-content">
<p>You don't have enough <span class="green-text">money</span>.</p>
</div>
</div>
<script>
// JavaScript logic
let clicks = 0;
let cpc = 1; // clicks per click
let cps = 0; // clicks per second
const clickCountDisplay = document.getElementById('clickCount');
const cpsDisplay = document.getElementById('cps');
const cpcDisplay = document.getElementById('cpc');
const authorModal = document.getElementById('authorModal');
const moneyModal = document.getElementById('moneyModal');
function updateDisplay() {
clickCountDisplay.textContent = Math.floor(clicks);
cpsDisplay.textContent = cps;
cpcDisplay.textContent = cpc;
}
function clickAction() {
clicks += cpc;
updateDisplay();
}
function buyUpgrade(cost, type) {
if (clicks >= cost) {
clicks -= cost;
if (type === 'cpc') {
cpc += 1;
} else if (type === 'cps') {
cps += 1;
}
updateDisplay();
} else {
// Show the "not enough money" modal for 3 seconds
moneyModal.style.display = 'flex';
setTimeout(function() {
moneyModal.style.display = 'none';
}, 3000);
}
}
// Auto-clicker interval
setInterval(function() {
clicks += cps;
updateDisplay();
}, 1000);
// Function to show the "Made by" modal for 3 seconds on page load
window.onload = function() {
authorModal.style.display = 'flex';
setTimeout(function() {
authorModal.style.display = 'none';
}, 3000);
};
updateDisplay(); // Initial display update
</script>
</body>
</html>
Comments
Post a Comment