Добавить clicker.html
This commit is contained in:
+442
@@ -0,0 +1,442 @@
|
|||||||
|
<!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>
|
||||||
Reference in New Issue
Block a user