Untitled
unknown
plain_text
5 months ago
3.4 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Clicker with Upgrades</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
align-items: center;
}
#cookie {
width: 200px;
height: 200px;
cursor: pointer;
border-radius: 50%;
background-color: #ffcc00;
font-size: 24px;
margin-right: 50px;
}
#score {
font-size: 24px;
}
.sidebar {
display: flex;
flex-direction: column;
max-height: 400px; /* Set a maximum height */
overflow-y: auto; /* Enable vertical scroll */
}
.upgrade {
padding: 10px;
margin: 10px;
background-color: #3cb371;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div>
<h1>Cookie Clicker with Upgrades</h1>
<p>Click the cookie to earn points!</p>
<div id="cookie">Cookie</div>
<p>Score: <span id="score">0</span></p>
</div>
<div class="sidebar">
<button class="upgrade" id="upgrade1">Grandma (Cost: 10)</button>
<button class="upgrade" id="upgrade2">Cookie Farm (Cost: 20)</button>
<button class="upgrade" id="upgrade3">Factory (Cost: 30)</button>
<button class="upgrade" id="upgrade4">Cookie Mine (Cost: 40)</button>
<button class="upgrade" id="upgrade5">Cookie Universe (Cost: 50)</button>
<button class="upgrade" id="upgrade6">Cookie Planet (Cost: 60)</button>
<button class="upgrade" id="upgrade7">Cookie Galaxy (Cost: 70)</button>
<button class="upgrade" id="upgrade8">Cookie Universe II (Cost: 80)</button>
<button class="upgrade" id="upgrade9">Cookie Multiverse (Cost: 90)</button>
<button class="upgrade" id="upgrade10">Cookie Omniverse (Cost: 100)</button>
</div>
</div>
<script>
let score = 0;
let clickValue = 1;
const cookie = document.getElementById('cookie');
const scoreDisplay = document.getElementById('score');
const upgradeButtons = document.querySelectorAll('.upgrade');
cookie.addEventListener('click', () => {
score += clickValue;
scoreDisplay.textContent = score;
});
upgradeButtons.forEach(button => {
button.addEventListener('click', () => {
const upgradeCost = parseInt(button.textContent.match(/\d+/)[0]);
if (score >= upgradeCost) {
score -= upgradeCost;
scoreDisplay.textContent = score;
clickValue++;
button.textContent = button.textContent.replace(/\d+/, upgradeCost * 2);
setInterval(() => {
score += clickValue;
scoreDisplay.textContent = score;
}, 1000); // Set the interval to generate points every second
} else {
alert('Not enough score to purchase this upgrade!');
}
});
});
</script>
</body>
</html>Leave a Comment