442 lines
14 KiB
HTML
442 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Кликер-Магнат</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
color: #eee;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.game-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
}
|
||
|
||
.clicker-section {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.stats {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.score {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
color: #ffd700;
|
||
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.per-click {
|
||
font-size: 18px;
|
||
color: #aaa;
|
||
}
|
||
|
||
.per-second {
|
||
font-size: 16px;
|
||
color: #888;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.click-button {
|
||
width: 200px;
|
||
height: 200px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 24px;
|
||
color: white;
|
||
font-weight: bold;
|
||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
||
transition: all 0.1s ease;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.click-button:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
|
||
}
|
||
|
||
.click-button:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.shop-section {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.shop-title {
|
||
font-size: 32px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
color: #ffd700;
|
||
}
|
||
|
||
.upgrade-item {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.upgrade-item:hover {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-color: rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.upgrade-item.cant-afford {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.upgrade-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.upgrade-name {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.upgrade-level {
|
||
font-size: 14px;
|
||
color: #aaa;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
padding: 5px 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.upgrade-description {
|
||
font-size: 14px;
|
||
color: #ccc;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.upgrade-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.upgrade-cost {
|
||
font-size: 18px;
|
||
color: #ffd700;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.buy-button {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
border: none;
|
||
padding: 10px 25px;
|
||
border-radius: 10px;
|
||
color: white;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.buy-button:hover:not(:disabled) {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
|
||
}
|
||
|
||
.buy-button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.reset-button {
|
||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||
border: none;
|
||
padding: 15px 30px;
|
||
border-radius: 15px;
|
||
color: white;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.reset-button:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 5px 20px rgba(250, 112, 154, 0.4);
|
||
}
|
||
|
||
.click-animation {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #ffd700;
|
||
animation: float-up 1s ease-out forwards;
|
||
}
|
||
|
||
@keyframes float-up {
|
||
0% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-100px);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.game-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Скроллбар */
|
||
.shop-section::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
.shop-section::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.shop-section::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 215, 0, 0.3);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.shop-section::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255, 215, 0, 0.5);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="game-container">
|
||
<div class="clicker-section">
|
||
<div class="stats">
|
||
<div class="score" id="score">0</div>
|
||
<div class="per-click">За клик: <span id="perClick">1</span></div>
|
||
<div class="per-second">В секунду: <span id="perSecond">0</span></div>
|
||
</div>
|
||
<button class="click-button" id="clickButton">
|
||
КЛИК!
|
||
</button>
|
||
</div>
|
||
|
||
<div class="shop-section">
|
||
<h2 class="shop-title">🛒 Магазин</h2>
|
||
<div id="upgradesContainer"></div>
|
||
<button class="reset-button" id="resetButton">🔄 Сбросить прогресс</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Игровое состояние
|
||
let gameState = {
|
||
score: 0,
|
||
totalClicks: 0,
|
||
upgrades: {
|
||
clickPower: { level: 0, baseCost: 10, cost: 10, power: 1 },
|
||
autoClicker: { level: 0, baseCost: 50, cost: 50, power: 1 },
|
||
superClick: { level: 0, baseCost: 500, cost: 500, power: 10 },
|
||
megaAuto: { level: 0, baseCost: 2000, cost: 2000, power: 10 },
|
||
ultraClick: { level: 0, baseCost: 10000, cost: 10000, power: 100 },
|
||
hyperAuto: { level: 0, baseCost: 50000, cost: 50000, power: 100 }
|
||
}
|
||
};
|
||
|
||
// Описания улучшений
|
||
const upgradeDescriptions = {
|
||
clickPower: 'Увеличивает доход за клик на 1',
|
||
autoClicker: 'Автоматически добавляет 1 в секунду',
|
||
superClick: 'Увеличивает доход за клик на 10',
|
||
megaAuto: 'Автоматически добавляет 10 в секунду',
|
||
ultraClick: 'Увеличивает доход за клик на 100',
|
||
hyperAuto: 'Автоматически добавляет 100 в секунду'
|
||
};
|
||
|
||
const upgradeNames = {
|
||
clickPower: '💪 Сила клика',
|
||
autoClicker: '🤖 Автокликер',
|
||
superClick: '⚡ Супер клик',
|
||
megaAuto: '🚀 Мега автокликер',
|
||
ultraClick: '🔥 Ультра клик',
|
||
hyperAuto: '💎 Гипер автокликер'
|
||
};
|
||
|
||
// Загрузка сохранения
|
||
function loadGame() {
|
||
const saved = localStorage.getItem('clickerGame');
|
||
if (saved) {
|
||
const savedState = JSON.parse(saved);
|
||
gameState = { ...gameState, ...savedState };
|
||
// Восстанавливаем стоимость улучшений
|
||
for (let key in gameState.upgrades) {
|
||
const upgrade = gameState.upgrades[key];
|
||
upgrade.cost = Math.floor(upgrade.baseCost * Math.pow(1.15, upgrade.level));
|
||
}
|
||
}
|
||
}
|
||
|
||
// Сохранение игры
|
||
function saveGame() {
|
||
localStorage.setItem('clickerGame', JSON.stringify(gameState));
|
||
}
|
||
|
||
// Подсчет дохода за клик
|
||
function getClickPower() {
|
||
let power = 1;
|
||
power += gameState.upgrades.clickPower.level * gameState.upgrades.clickPower.power;
|
||
power += gameState.upgrades.superClick.level * gameState.upgrades.superClick.power;
|
||
power += gameState.upgrades.ultraClick.level * gameState.upgrades.ultraClick.power;
|
||
return power;
|
||
}
|
||
|
||
// Подсчет дохода в секунду
|
||
function getPerSecond() {
|
||
let perSecond = 0;
|
||
perSecond += gameState.upgrades.autoClicker.level * gameState.upgrades.autoClicker.power;
|
||
perSecond += gameState.upgrades.megaAuto.level * gameState.upgrades.megaAuto.power;
|
||
perSecond += gameState.upgrades.hyperAuto.level * gameState.upgrades.hyperAuto.power;
|
||
return perSecond;
|
||
}
|
||
|
||
// Обновление UI
|
||
function updateUI() {
|
||
document.getElementById('score').textContent = Math.floor(gameState.score).toLocaleString();
|
||
document.getElementById('perClick').textContent = getClickPower().toLocaleString();
|
||
document.getElementById('perSecond').textContent = getPerSecond().toLocaleString();
|
||
|
||
// Обновление магазина
|
||
const container = document.getElementById('upgradesContainer');
|
||
container.innerHTML = '';
|
||
|
||
for (let key in gameState.upgrades) {
|
||
const upgrade = gameState.upgrades[key];
|
||
const canAfford = gameState.score >= upgrade.cost;
|
||
|
||
const item = document.createElement('div');
|
||
item.className = `upgrade-item ${canAfford ? '' : 'cant-afford'}`;
|
||
item.innerHTML = `
|
||
<div class="upgrade-header">
|
||
<div class="upgrade-name">${upgradeNames[key]}</div>
|
||
<div class="upgrade-level">Ур. ${upgrade.level}</div>
|
||
</div>
|
||
<div class="upgrade-description">${upgradeDescriptions[key]}</div>
|
||
<div class="upgrade-footer">
|
||
<div class="upgrade-cost">💰 ${upgrade.cost.toLocaleString()}</div>
|
||
<button class="buy-button" ${canAfford ? '' : 'disabled'}>
|
||
Купить
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
const buyButton = item.querySelector('.buy-button');
|
||
buyButton.addEventListener('click', () => buyUpgrade(key));
|
||
|
||
container.appendChild(item);
|
||
}
|
||
}
|
||
|
||
// Покупка улучшения
|
||
function buyUpgrade(upgradeKey) {
|
||
const upgrade = gameState.upgrades[upgradeKey];
|
||
if (gameState.score >= upgrade.cost) {
|
||
gameState.score -= upgrade.cost;
|
||
upgrade.level++;
|
||
upgrade.cost = Math.floor(upgrade.baseCost * Math.pow(1.15, upgrade.level));
|
||
updateUI();
|
||
saveGame();
|
||
}
|
||
}
|
||
|
||
// Клик по кнопке
|
||
function handleClick(event) {
|
||
const power = getClickPower();
|
||
gameState.score += power;
|
||
gameState.totalClicks++;
|
||
|
||
// Анимация
|
||
const animation = document.createElement('div');
|
||
animation.className = 'click-animation';
|
||
animation.textContent = `+${power}`;
|
||
animation.style.left = `${event.clientX}px`;
|
||
animation.style.top = `${event.clientY}px`;
|
||
document.body.appendChild(animation);
|
||
|
||
setTimeout(() => animation.remove(), 1000);
|
||
|
||
updateUI();
|
||
saveGame();
|
||
}
|
||
|
||
// Автокликер (каждую секунду)
|
||
function autoClick() {
|
||
const perSecond = getPerSecond();
|
||
if (perSecond > 0) {
|
||
gameState.score += perSecond / 10; // Обновляем 10 раз в секунду для плавности
|
||
updateUI();
|
||
}
|
||
}
|
||
|
||
// Сброс игры
|
||
function resetGame() {
|
||
if (confirm('Вы уверены, что хотите сбросить весь прогресс?')) {
|
||
localStorage.removeItem('clickerGame');
|
||
location.reload();
|
||
}
|
||
}
|
||
|
||
// Инициализация
|
||
loadGame();
|
||
updateUI();
|
||
|
||
document.getElementById('clickButton').addEventListener('click', handleClick);
|
||
document.getElementById('resetButton').addEventListener('click', resetGame);
|
||
|
||
// Автокликер каждые 100мс
|
||
setInterval(autoClick, 100);
|
||
|
||
// Автосохранение каждые 10 секунд
|
||
setInterval(saveGame, 10000);
|
||
</script>
|
||
</body>
|
||
</html> |