click
!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> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#6366f1', secondary: '#8b5cf6', accent: '#ec4899', dark: '#1e293b' } } } } </script> </head> <body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen"> <div id="app" class="container mx-auto px-4 py-8"> <!-- Header --> <header class="text-center mb-10"> <h1 class="text-4xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 mb-2">Clicker Quest</h1> <p class="text-gray-400">Click to earn points, level up, and unlock powerful characters!</p> </header> <!-- Stats Bar -->
<div class="bg-gray-800 rounded-xl p-6 mb-8 shadow-lg border border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-gray-700 rounded-lg p-4 text-center">
<p class="text-gray-400 text-sm">Points</p>
<p id="points" class="text-2xl font-bold text-yellow-400">0</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 text-center">
<p class="text-gray-400 text-sm">Level</p>
<p id="level" class="text-2xl font-bold text-green-400">1</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 text-center">
<p class="text-gray-400 text-sm">Auto Clicks</p>
<p id="autoClicks" class="text-2xl font-bold text-blue-400">0</p>
</div>
<div class="bg-gray-700 rounded-lg p-4 text-center">
<p class="text-gray-400 text-sm">Next Level</p>
<p id="nextLevel" class="text-2xl font-bold text-orange-400">100</p>
</div>
</div>
</div>
<!-- Main Game Area -->
<div class="flex flex-col lg:flex-row gap-8">
<!-- Clicker Section -->
<div class="lg:w-2/3">
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700 mb-8">
<h2 class="text-2xl font-bold mb-6 text-center text-purple-300">Click Me!</h2>
<div class="flex justify-center">
<button id="clickButton" class="w-48 h-48 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transform hover:scale-105 transition-all duration-200 shadow-lg flex items-center justify-center text-6xl font-bold focus:outline-none active:scale-95">
🔴
</button>
</div>
<p class="text-center mt-4 text-gray-400">Click the button to earn points!</p>
</div>
<!-- Auto Clickers -->
<div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
<h3 class="text-xl font-bold mb-4 text-blue-300">Auto Clickers</h3>
<div id="autoClickersList" class="space-y-3">
<!-- Auto clickers will be added here dynamically -->
</div>
</div>
</div>
<!-- Character Selection -->
<div class="lg:w-1/3">
<div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 sticky top-8">
<h3 class="text-xl font-bold mb-4 text-green-300">Choose Your Hero</h3>
<div id="charactersList" class="space-y-4">
<!-- Characters will be added here dynamically -->
</div>
</div>
</div>
</div>
<!-- Progress Section -->
<div class="mt-8 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
<h3 class="text-xl font-bold mb-4 text-yellow-300">Level Progress</h3>
<div class="w-full bg-gray-700 rounded-full h-6 mb-4">
<div id="progressBar" class="bg-gradient-to-r from-yellow-500 to-orange-500 h-6 rounded-full transition-all duration-500 ease-out" style="width: 0%"></div>
</div>
<div class="text-center text-gray-400">Complete levels to unlock new abilities!</div>
</div>
</div>
<script>
// Game state
const gameState = {
points: 0,
level: 1,
pointsToNextLevel: 100,
autoClickers: [
{ id: 1, name: 'Basic Clicker', cost: 15, cps: 0.1, owned: 0 },
{ id: 2, name: 'Advanced Clicker', cost: 100, cps: 1, owned: 0 },
{ id: 3, name: 'Super Clicker', cost: 500, cps: 5, owned: 0 },
{ id: 4, name: 'Mega Clicker', cost: 3000, cps: 20, owned: 0 }
],
characters: [
{ id: 1, name: 'Warrior', description: 'Strong and durable', cost: 50, multiplier: 1.5, selected: true, stats: { strength: 10, defense: 8, speed: 5 } },
{ id: 2, name: 'Mage', description: 'Magic power', cost: 100, multiplier: 2, selected: false, stats: { strength: 5, defense: 3, speed: 7 } },
{ id: 3, name: 'Archer', description: 'Fast and precise', cost: 200, multiplier: 3, selected: false, stats: { strength: 6, defense: 4, speed: 10 } },
{ id: 4, name: 'Assassin', description: 'Stealthy killer', cost: 500, multiplier: 5, selected: false, stats: { strength: 8, defense: 5, speed: 12 } }
],
selectedCharacter: 1,
multiplier: 1.5
};
// DOM Elements
const pointsElement = document.getElementById('points');
const levelElement = document.getElementById('level');
const autoClicksElement = document.getElementById('autoClicks');
const nextLevelElement = document.getElementById('nextLevel');
const progressBar = document.getElementById('progressBar');
const clickButton = document.getElementById('clickButton');
const autoClickersList = document.getElementById('autoClickersList');
const charactersList = document.getElementById('charactersList');
// Initialize game
function initGame() {
renderGame();
setupEventListeners();
startAutoClickers();
}
// Setup event listeners
function setupEventListeners() {
clickButton.addEventListener('click', handleClick);
// Auto clickers buy buttons
document.addEventListener('click', function(e) {
if (e.target.classList.contains('buy-btn')) {
const id = parseInt(e.target.dataset.id);
buyAutoClicker(id);
}
});
// Character selection
document.addEventListener('click', function(e) {
if (e.target.classList.contains('character-select')) {
const id = parseInt(e.target.dataset.id);
selectCharacter(id);
}
});
}
// Handle click
function handleClick() {
gameState.points += 1 * gameState.multiplier;
updatePoints();
animateClick();
}
// Animate click effect
function animateClick() {
const button = clickButton;
button.classList.add('animate-pulse');
setTimeout(() => {
button.classList.remove('animate-pulse');
}, 200);
}
// Buy auto clicker
function buyAutoClicker(id) {
const autoClicker = gameState.autoClickers.find(ac => ac.id === id);
if (gameState.points >= autoClicker.cost) {
gameState.points -= autoClicker.cost;
autoClicker.owned++;
autoClicker.cost = Math.floor(autoClicker.cost * 1.15);
updatePoints();
renderAutoClickers();
}
}
// Select character
function selectCharacter(id) {
const character = gameState.characters.find(c => c.id === id);
if (character.cost <= gameState.points || character.selected) {
gameState.selectedCharacter = id;
gameState.multiplier = character.multiplier;
// Update all characters
gameState.characters.forEach(c => {
c.selected = c.id === id;
});
renderCharacters();
}
}
// Render game state
function renderGame() {
updatePoints();
renderAutoClickers();
renderCharacters();
updateProgress();
}
// Update points display
function updatePoints() {
pointsElement.textContent = Math.floor(gameState.points);
levelElement.textContent = gameState.level;
nextLevelElement.textContent = gameState.pointsToNextLevel;
// Update auto clicks
let totalAutoClicks = 0;
gameState.autoClickers.forEach(ac => {
totalAutoClicks += ac.owned * ac.cps;
});
autoClicksElement.textContent = totalAutoClicks.toFixed(1);
}
// Render auto clickers
function renderAutoClickers() {
autoClickersList.innerHTML = '';
gameState.autoClickers.forEach(autoClicker => {
const element = document.createElement('div');
element.className = 'flex justify-between items-center bg-gray-700 p-4 rounded-lg';
element.innerHTML = `
<div>
<h4 class="font-bold">${autoClicker.name}</h4>
<p class="text-sm text-gray-400">${autoClicker.owned} owned | ${autoClicker.cps}/sec</p>
</div>
<div class="text-right">
<p class="text-yellow-400 font-bold">${autoClicker.cost} pts</p>
<button data-id="${autoClicker.id}" class="buy-btn bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors">
Buy
</button>
</div>
`;
autoClickersList.appendChild(element);
});
}
// Render characters
function renderCharacters() {
charactersList.innerHTML = '';
gameState.characters.forEach(character => {
const element = document.createElement('div');
element.className = `p-4 rounded-lg border-2 cursor-pointer transition-all ${
character.selected ? 'border-green-500 bg-green-900/20' : 'border-gray-600 bg-gray-700 hover:bg-gray-600'
}`;
element.innerHTML = `
<div class="flex items-center">
<div class="mr-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-${character.selected ? 'green' : 'purple'}-500 flex items-center justify-center text-xl">
${character.id === 1 ? '⚔️' : character.id === 2 ? '🔮' : character.id === 3 ? '🏹' : '🗡️'}
</div>
</div>
<div class="flex-1">
<h4 class="font-bold">${character.name}</h4>
<p class="text-sm text-gray-400">${character.description}</p>
<div class="mt-2 grid grid-cols-3 gap-2 text-xs">
<div class="bg-gray-600 p-1 rounded text-center">
<div class="text-yellow-400">STR</div>
<div>${character.stats.strength}</div>
</div>
<div class="bg-gray-600 p-1 rounded text-center">
<div class="text-yellow-400">DEF</div>
<div>${character.stats.defense}</div>
</div>
<div class="bg-gray-600 p-1 rounded text-center">
<div class="text-yellow-400">SPD</div>
<div>${character.stats.speed}</div>
</div>
</div>
<div class="flex justify-between items-center mt-2">
<span class="text-yellow-400 font-bold">${character.cost} pts</span>
<button data-id="${character.id}" class="character-select px-4 py-2 rounded-lg text-sm ${
character.selected ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'
} transition-colors">
${character.selected ? 'Selected' : 'Select'}
</button>
</div>
</div>
</div>
`;
charactersList.appendChild(element);
});
}
// Update progress bar
function updateProgress() {
const progress = (gameState.points / gameState.pointsToNextLevel) * 100;
progressBar.style.width = `${Math.min(progress, 100)}%`;
}
// Start auto clickers
function startAutoClickers() {
setInterval(() => {
let totalAutoClicks = 0;
gameState.autoClickers.forEach(autoClicker => {
totalAutoClicks += autoClicker.owned * autoClicker.cps;
});
if (totalAutoClicks > 0) {
gameState.points += totalAutoClicks;
updatePoints();
updateProgress();
// Level up logic
if (gameState.points >= gameState.pointsToNextLevel) {
levelUp();
}
}
}, 1000);
}
// Level up
function levelUp() {
gameState.level++;
gameState.pointsToNextLevel = Math.floor(gameState.pointsToNextLevel * 1.5);
gameState.points = 0;
// Show level up message
alert(`Level Up! You are now level ${gameState.level}`);
updatePoints();
updateProgress();
}
// Initialize the game when page loads
window.onload = initGame;
</script>