Moon Miner · Chill Space
by SwiftNinja171253 lines38.8 KB
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Moon Miner · Chill Space</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-deep: #070b1a;
--card-bg: rgba(18, 28, 56, 0.2); /* Ещё прозрачнее */
--soft-blue: #7dd3fc;
--soft-purple: #a78bfa;
--soft-gold: #fcd34d;
--soft-pink: #f472b6;
--text-light: #e2e8f0;
--text-muted: #94a3b8;
--border-soft: rgba(125, 211, 252, 0.08);
--shadow-soft: 0 8px 32px rgba(0,0,0,0.6);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Quicksand', sans-serif;
color: var(--text-light);
touch-action: manipulation;
padding: 12px;
margin: 0;
background: var(--bg-deep);
overflow: hidden;
position: relative;
}
/* ---------- ЗВЁЗДНЫЙ ФОН (три слоя) ---------- */
.stars-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.stars-layer::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 5% 10%, #fff, transparent),
radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.9), transparent),
radial-gradient(1px 1px at 25% 5%, #fff, transparent),
radial-gradient(1px 1px at 35% 40%, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 45% 15%, #fff, transparent),
radial-gradient(1px 1px at 55% 30%, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 65% 8%, #fff, transparent),
radial-gradient(1px 1px at 75% 45%, rgba(255,255,255,0.9), transparent),
radial-gradient(1px 1px at 85% 20%, #fff, transparent),
radial-gradient(1px 1px at 95% 35%, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 10% 60%, #fff, transparent),
radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 30% 70%, #fff, transparent),
radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 50% 55%, #fff, transparent),
radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 70% 65%, #fff, transparent),
radial-gradient(1px 1px at 80% 95%, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 90% 75%, #fff, transparent);
background-size: 200px 200px;
opacity: 0.7;
animation: twinkle1 5s ease-in-out infinite alternate;
}
@keyframes twinkle1 {
0% { opacity: 0.4; transform: scale(1); }
100% { opacity: 0.9; transform: scale(1.02); }
}
.stars-layer::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 8% 18%, #fff, transparent),
radial-gradient(2px 2px at 22% 32%, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 38% 12%, #fff, transparent),
radial-gradient(2px 2px at 52% 48%, rgba(255,255,255,0.9), transparent),
radial-gradient(2px 2px at 68% 22%, #fff, transparent),
radial-gradient(2px 2px at 82% 38%, rgba(255,255,255,0.7), transparent),
radial-gradient(2px 2px at 92% 14%, #fff, transparent),
radial-gradient(2px 2px at 15% 72%, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 45% 82%, #fff, transparent),
radial-gradient(2px 2px at 75% 92%, rgba(255,255,255,0.9), transparent);
background-size: 300px 300px;
opacity: 0.6;
animation: twinkle2 8s ease-in-out infinite alternate;
}
@keyframes twinkle2 {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.8; transform: scale(1.05); }
}
.stars-extra {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.stars-extra::before {
content: '';
position: absolute;
inset: 0;
box-shadow:
10px 20px 0 0 rgba(255,255,255,0.3),
80px 120px 0 0 rgba(255,255,255,0.2),
150px 40px 0 0 rgba(255,255,255,0.4),
230px 180px 0 0 rgba(255,255,255,0.2),
310px 90px 0 0 rgba(255,255,255,0.3),
400px 220px 0 0 rgba(255,255,255,0.2),
500px 60px 0 0 rgba(255,255,255,0.4),
600px 280px 0 0 rgba(255,255,255,0.2),
700px 130px 0 0 rgba(255,255,255,0.3),
800px 350px 0 0 rgba(255,255,255,0.2),
900px 170px 0 0 rgba(255,255,255,0.4),
1000px 400px 0 0 rgba(255,255,255,0.2),
1100px 250px 0 0 rgba(255,255,255,0.3),
1200px 500px 0 0 rgba(255,255,255,0.2),
1300px 100px 0 0 rgba(255,255,255,0.4);
background: transparent;
width: 100%;
height: 100%;
animation: twinkleExtra 10s ease-in-out infinite alternate;
}
@keyframes twinkleExtra {
0% { opacity: 0.2; }
100% { opacity: 0.7; }
}
/* ---------- МЕТЕОРЫ ---------- */
.meteor {
position: fixed;
width: 3px;
height: 3px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px 2px rgba(125, 211, 252, 0.6);
animation: meteorFall linear infinite;
pointer-events: none;
z-index: 0;
}
.meteor::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 1px;
background: linear-gradient(to left, rgba(125, 211, 252, 0.6), transparent);
transform: rotate(-45deg) translateX(-30px);
transform-origin: right center;
}
@keyframes meteorFall {
0% { transform: translate(0, 0) rotate(-45deg); opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(300px, 300px) rotate(-45deg); opacity: 0; }
}
/* ---------- ТУМАННОСТИ ---------- */
.nebula {
position: fixed;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
opacity: 0.25;
animation: nebulaFloat 20s ease-in-out infinite alternate;
}
.nebula:nth-child(1) {
width: 300px;
height: 300px;
background: rgba(125, 211, 252, 0.15);
top: -50px;
left: -50px;
}
.nebula:nth-child(2) {
width: 400px;
height: 400px;
background: rgba(168, 85, 247, 0.1);
bottom: -100px;
right: -100px;
animation-duration: 25s;
}
.nebula:nth-child(3) {
width: 200px;
height: 200px;
background: rgba(251, 191, 36, 0.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 30s;
}
@keyframes nebulaFloat {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 20px) scale(1.1); }
}
/* ---------- ОСНОВНОЙ КОНТЕЙНЕР (ПРОЗРАЧНЫЙ) ---------- */
.game-container {
max-width: 420px;
width: 100%;
background: var(--card-bg); /* очень прозрачный фон */
backdrop-filter: blur(20px); /* сильное размытие для стеклянного эффекта */
-webkit-backdrop-filter: blur(20px);
border-radius: 40px;
padding: 24px 18px 18px;
box-shadow: var(--shadow-soft), inset 0 0 80px rgba(125, 211, 252, 0.04);
border: 1px solid var(--border-soft);
position: relative;
z-index: 1;
transition: box-shadow 0.4s ease;
}
.game-container:hover {
box-shadow: var(--shadow-soft), 0 0 40px rgba(125, 211, 252, 0.06);
}
/* SVG-иконки */
.icon {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
display: inline-block;
flex-shrink: 0;
}
.icon-sm { width: 0.8em; height: 0.8em; }
.icon-lg { width: 1.4em; height: 1.4em; }
/* ---------------------------------------- */
/* Достижения — стеклянная карточка (ещё прозрачнее) */
/* ---------------------------------------- */
.achievement-card {
background: rgba(8, 14, 34, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(125, 211, 252, 0.08);
border-radius: 20px;
padding: 12px 16px;
margin-bottom: 18px;
box-shadow: 0 0 30px rgba(125, 211, 252, 0.02);
transition: border-color 0.3s, box-shadow 0.3s;
}
.achievement-card:hover {
border-color: rgba(125, 211, 252, 0.2);
box-shadow: 0 0 40px rgba(125, 211, 252, 0.05);
}
.achievement-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.achievement-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--soft-blue);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.achievement-reward {
font-size: 11px;
font-weight: 600;
color: var(--soft-gold);
}
.achievement-bar-bg {
height: 6px;
background: rgba(0,0,0,0.2);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.03);
}
.achievement-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--soft-purple), var(--soft-blue));
border-radius: 20px;
transition: width 0.3s ease;
box-shadow: 0 0 16px rgba(125, 211, 252, 0.15);
}
.achievement-status {
font-size: 10px;
color: var(--text-muted);
margin-top: 4px;
text-align: right;
font-weight: 600;
}
/* ---------------------------------------- */
/* Перегрев */
/* ---------------------------------------- */
.heat-container {
margin-bottom: 14px;
}
.heat-label {
display: flex;
justify-content: space-between;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.heat-bar-bg {
height: 4px;
background: rgba(0,0,0,0.2);
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.03);
}
.heat-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--soft-gold), #fb923c, var(--soft-pink));
border-radius: 10px;
transition: width 0.15s ease, box-shadow 0.3s;
}
.heat-bar-fill.overheated {
background: var(--soft-pink);
box-shadow: 0 0 30px rgba(244, 114, 182, 0.5);
animation: pulseWarm 0.6s ease-in-out infinite alternate;
}
@keyframes pulseWarm {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
/* ---------------------------------------- */
/* Статистика */
/* ---------------------------------------- */
.stats-panel {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.score-row {
background: rgba(8, 14, 34, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 24px;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(125, 211, 252, 0.04);
}
.score-title {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.score-label {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: var(--soft-blue);
}
.score-value {
font-family: 'Space Grotesk', sans-serif;
color: #ffffff;
font-size: 28px;
font-weight: 700;
text-shadow: 0 0 30px rgba(125, 211, 252, 0.1);
letter-spacing: 0.5px;
}
.sub-stats {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-align: right;
line-height: 1.6;
padding: 0 4px;
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.sub-stats span {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(0,0,0,0.1);
padding: 2px 12px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.03);
backdrop-filter: blur(4px);
}
/* ---------------------------------------- */
/* Энергия */
/* ---------------------------------------- */
.energy-container {
display: flex;
align-items: center;
gap: 10px;
background: rgba(8, 14, 34, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 6px 14px 6px 10px;
border-radius: 30px;
border: 1px solid rgba(251, 191, 36, 0.08);
margin-bottom: 14px;
}
.energy-icon {
color: var(--soft-gold);
}
.energy-bar-bg {
flex: 1;
height: 5px;
background: rgba(0,0,0,0.2);
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.03);
}
.energy-bar-fill {
height: 100%;
width: 100%;
background: linear-gradient(90deg, #fcd34d, #f59e0b);
border-radius: 10px;
transition: width 0.2s ease;
box-shadow: 0 0 16px rgba(251, 191, 36, 0.15);
}
.energy-text {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--soft-gold);
min-width: 44px;
text-align: right;
}
/* ---------------------------------------- */
/* Кнопка-луна */
/* ---------------------------------------- */
.click-area {
position: relative;
margin: 16px 0 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.moon-btn {
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fcd34d, #f59e0b, #b45309);
box-shadow:
0 0 50px rgba(251, 191, 36, 0.2),
inset 0 -10px 40px rgba(0,0,0,0.4),
inset 0 10px 40px rgba(255,255,200,0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.1s ease, box-shadow 0.3s;
will-change: transform;
border: 3px solid rgba(255,255,200,0.1);
}
.moon-btn::before,
.moon-btn::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(0,0,0,0.08);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
}
.moon-btn::before {
width: 30px;
height: 30px;
top: 25%;
left: 20%;
}
.moon-btn::after {
width: 16px;
height: 16px;
bottom: 30%;
right: 20%;
}
.moon-btn:active {
transform: scale(0.92);
box-shadow: 0 0 80px rgba(251, 191, 36, 0.35);
}
.moon-btn.disabled {
filter: grayscale(0.7) opacity(0.4);
cursor: not-allowed;
transform: scale(1) !important;
}
.moon-btn.no-energy {
border-color: var(--soft-gold);
box-shadow: 0 0 70px rgba(251, 191, 36, 0.25);
}
.moon-icon {
width: 72px;
height: 72px;
color: rgba(255,255,230,0.9);
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
animation: floatMoon 3s ease-in-out infinite;
}
@keyframes floatMoon {
0% { transform: translateY(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}
.moon-text {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,230,0.9);
text-shadow: 0 2px 10px rgba(0,0,0,0.4);
margin-top: 4px;
letter-spacing: 0.5px;
}
.multiplier-badge {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--soft-gold);
background: rgba(0,0,0,0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(251, 191, 36, 0.1);
padding: 2px 14px;
border-radius: 30px;
margin-top: 6px;
text-shadow: 0 0 16px rgba(251, 191, 36, 0.1);
}
/* Всплывающие тексты */
.floating-text {
position: absolute;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--soft-blue);
pointer-events: none;
animation: floatUp 0.7s ease-out forwards;
z-index: 10;
background: rgba(0,0,0,0.15);
padding: 2px 14px;
border-radius: 30px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.03);
}
.floating-text.crit {
color: var(--soft-gold);
font-size: 22px;
text-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
}
.floating-text.heat-warn {
color: var(--soft-pink);
font-size: 18px;
}
.floating-text.energy-low {
color: var(--soft-gold);
font-size: 16px;
}
.floating-text.ad-bonus {
color: var(--soft-purple);
font-size: 18px;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-55px) scale(1.1); }
}
/* ---------------------------------------- */
/* Реклама */
/* ---------------------------------------- */
.ad-section {
margin: 14px 0 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ad-banner {
width: 100%;
max-width: 320px;
height: 48px;
background: rgba(8, 14, 34, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(125, 211, 252, 0.04);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.ad-banner span {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0,0,0,0.1);
padding: 2px 14px;
border-radius: 30px;
}
.ad-reward-btn {
background: linear-gradient(135deg, var(--soft-gold), #f59e0b);
border: none;
border-radius: 40px;
padding: 10px 24px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 12px;
color: #0a0e1a;
cursor: pointer;
box-shadow: 0 0 40px rgba(251, 191, 36, 0.1);
transition: transform 0.1s, box-shadow 0.2s;
width: 100%;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ad-reward-btn:active { transform: scale(0.94); }
.ad-reward-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.ad-timer {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.ad-bonus-info {
font-size: 10px;
font-weight: 600;
color: var(--soft-purple);
text-align: center;
min-height: 1.2em;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(168, 85, 247, 0.03);
padding: 2px 14px;
border-radius: 30px;
border: 1px solid rgba(168, 85, 247, 0.04);
backdrop-filter: blur(4px);
}
/* ---------------------------------------- */
/* Улучшения */
/* ---------------------------------------- */
.section-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 10px;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 1px;
margin-bottom: 10px;
text-align: center;
}
.boost-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 16px;
}
.boost-btn {
background: rgba(8, 14, 34, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.03);
border-radius: 18px;
padding: 10px 12px;
color: var(--text-light);
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.boost-btn:active {
transform: scale(0.95);
border-color: var(--soft-blue);
box-shadow: 0 0 30px rgba(125, 211, 252, 0.06);
}
.boost-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none !important;
}
.boost-header {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.boost-title {
font-size: 11px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: 4px;
}
.boost-cost {
background: rgba(125, 211, 252, 0.04);
color: var(--soft-blue);
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 30px;
border: 1px solid rgba(125, 211, 252, 0.04);
}
.boost-sub {
font-size: 9px;
font-weight: 600;
color: var(--text-muted);
}
/* ---------------------------------------- */
/* Футер */
/* ---------------------------------------- */
.reset-area {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.02);
}
.reset-btn {
background: rgba(244, 114, 182, 0.03);
border: 1px solid rgba(244, 114, 182, 0.06);
border-radius: 30px;
padding: 4px 12px;
color: var(--soft-pink);
font-size: 10px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s;
}
.reset-btn:active {
transform: scale(0.94);
background: rgba(244, 114, 182, 0.06);
}
#nodeVersion {
font-size: 9px;
color: var(--text-muted);
opacity: 0.5;
}
/* ---------------------------------------- */
/* Адаптив */
/* ---------------------------------------- */
@media (max-width: 400px) {
.moon-btn { width: 150px; height: 150px; }
.moon-icon { width: 60px; height: 60px; }
.score-value { font-size: 22px; }
.boost-grid { gap: 8px; }
.boost-btn { padding: 8px 10px; }
}
</style>
</head>
<body>
<!-- Фоновые слои -->
<div class="stars-layer"></div>
<div class="stars-extra"></div>
<div class="nebula"></div>
<div class="nebula"></div>
<div class="nebula"></div>
<!-- Метеоры создаются скриптом -->
<div class="game-container">
<!-- SVG-спрайт -->
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-moon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/><circle cx="9" cy="10" r="1.5" fill="rgba(255,255,200,0.2)"/><circle cx="15" cy="14" r="1" fill="rgba(255,255,200,0.15)"/><circle cx="12" cy="16" r="0.8" fill="rgba(255,255,200,0.1)"/></symbol>
<symbol id="icon-lightning" viewBox="0 0 24 24"><path d="M13 2L4 14h6l-1 8 9-12h-6l2-8z"/></symbol>
<symbol id="icon-fire" viewBox="0 0 24 24"><path d="M12 2C8 6 6 9 6 12c0 3.3 2.7 6 6 6s6-2.7 6-6c0-3-2-6-6-10z"/><path d="M12 22c-4 0-7-3-7-7 0-2 1-4 3-6 1.5-1.5 3-3 4-4 1 1 2.5 2.5 4 4 2 2 3 4 3 6 0 4-3 7-7 7z"/></symbol>
<symbol id="icon-snowflake" viewBox="0 0 24 24"><path d="M12 2v20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1M2 12h20M6 6l12 12M18 6L6 18"/></symbol>
<symbol id="icon-trophy" viewBox="0 0 24 24"><path d="M6 5h12v2c0 2.2-1.8 4-4 4h-4c-2.2 0-4-1.8-4-4V5z"/><path d="M12 11v4M8 15h8M6 21h12"/></symbol>
<symbol id="icon-tv" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M8 2l4 4 4-4"/></symbol>
<symbol id="icon-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol>
<symbol id="icon-check" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></symbol>
<symbol id="icon-star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></symbol>
<symbol id="icon-warning" viewBox="0 0 24 24"><path d="M12 2L2 20h20L12 2z"/><circle cx="12" cy="16" r="1"/><path d="M12 10v4"/></symbol>
<symbol id="icon-energy" viewBox="0 0 24 24"><path d="M13 2L4 14h6l-1 8 9-12h-6l2-8z"/></symbol>
<symbol id="icon-ad" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M8 2l4 4 4-4"/><circle cx="9" cy="12" r="2"/><circle cx="15" cy="12" r="2"/></symbol>
</svg>
<!-- Достижения -->
<div class="achievement-card">
<div class="achievement-header">
<span class="achievement-title" id="achTitle"><svg class="icon icon-sm"><use href="#icon-trophy"/></svg> Target: Block #01</span>
<span class="achievement-reward" id="achReward">+50 MOON</span>
</div>
<div class="achievement-bar-bg">
<div class="achievement-bar-fill" id="achFill"></div>
</div>
<div class="achievement-status" id="achStatus">0 / 100</div>
</div>
<!-- Статистика -->
<div class="stats-panel">
<div class="score-row">
<div class="score-label-group">
<span class="score-title">Lunar Hashrate</span>
<div class="score-label"><svg class="icon icon-sm"><use href="#icon-moon"/></svg> MOON</div>
</div>
<div class="score-value" id="scoreDisplay">0</div>
</div>
<div class="sub-stats" id="subStats">
<span><svg class="icon"><use href="#icon-lightning"/></svg> Auto: 0 MH/s</span>
<span><svg class="icon"><use href="#icon-fire"/></svg> Crit: 15%</span>
<span><svg class="icon"><use href="#icon-snowflake"/></svg> Cool: 0</span>
</div>
</div>
<!-- Энергия -->
<div class="energy-container">
<span class="energy-icon"><svg class="icon icon-lg"><use href="#icon-energy"/></svg></span>
<div class="energy-bar-bg">
<div class="energy-bar-fill" id="energyFill" style="width:100%"></div>
</div>
<span class="energy-text" id="energyText">100/100</span>
</div>
<!-- Перегрев -->
<div class="heat-container">
<div class="heat-label">
<span>Core Temp</span>
<span id="heatStatusText" style="font-weight:700">30°C NORMAL</span>
</div>
<div class="heat-bar-bg">
<div class="heat-bar-fill" id="heatFill"></div>
</div>
</div>
<!-- Кнопка-луна -->
<div class="click-area" id="clickArea">
<div class="moon-btn" id="moonBtn">
<svg class="moon-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
<circle cx="9" cy="10" r="1.5" fill="rgba(255,255,200,0.2)"/>
<circle cx="15" cy="14" r="1" fill="rgba(255,255,200,0.15)"/>
<circle cx="12" cy="16" r="0.8" fill="rgba(255,255,200,0.1)"/>
</svg>
<div class="moon-text" id="statusText">TAP TO MINE</div>
<div class="multiplier-badge" id="multiplierBadge">x1</div>
</div>
</div>
<!-- Улучшения -->
<div class="section-title">Lunar Upgrades</div>
<div class="boost-grid">
<button class="boost-btn" id="boost1">
<div class="boost-header">
<span class="boost-title"><svg class="icon icon-sm"><use href="#icon-lightning"/></svg> Auto-Miner</span>
<span class="boost-cost" id="boost1Cost">10</span>
</div>
<span class="boost-sub">+1 MOON/s пассивно</span>
</button>
<button class="boost-btn" id="boost2">
<div class="boost-header">
<span class="boost-title"><svg class="icon icon-sm"><use href="#icon-fire"/></svg> Overcharge</span>
<span class="boost-cost" id="boost2Cost">30</span>
</div>
<span class="boost-sub" id="boost2Sub">x2 к клику</span>
</button>
<button class="boost-btn" id="boost3">
<div class="boost-header">
<span class="boost-title"><svg class="icon icon-sm"><use href="#icon-snowflake"/></svg> Coolant</span>
<span class="boost-cost" id="boost3Cost">50</span>
</div>
<span class="boost-sub">↓ нагрев, ↑ охлаждение</span>
</button>
<button class="boost-btn" id="boost4">
<div class="boost-header">
<span class="boost-title"><svg class="icon icon-sm"><use href="#icon-star"/></svg> Efficiency</span>
<span class="boost-cost" id="boost4Cost">80</span>
</div>
<span class="boost-sub">+1 к авто-эфф.</span>
</button>
<button class="boost-btn" id="boost5">
<div class="boost-header">
<span class="boost-title"><svg class="icon icon-sm"><use href="#icon-energy"/></svg> Energy Core</span>
<span class="boost-cost" id="boost5Cost">60</span>
</div>
<span class="boost-sub">+20 макс. энергии</span>
</button>
</div>
<!-- Реклама -->
<div class="ad-section">
<div class="ad-banner"><span><svg class="icon"><use href="#icon-ad"/></svg> Реклама · Ad</span></div>
<button class="ad-reward-btn" id="adRewardBtn">
<svg class="icon"><use href="#icon-tv"/></svg> Смотреть рекламу
</button>
<div class="ad-timer" id="adTimer"></div>
<div class="ad-bonus-info" id="adBonusInfo">
<svg class="icon"><use href="#icon-star"/></svg> Бонус: +50 энергии / +50 MOON / x2 на 30 с
</div>
</div>
<!-- Футер -->
<div class="reset-area">
<span id="nodeVersion">Lunar Node v4.20</span>
<button class="reset-btn" id="resetBtn"><svg class="icon icon-sm"><use href="#icon-warning"/></svg> Reset</button>
</div>
</div>
<script>
(function() {
// ---------- МЕТЕОРЫ ----------
function createMeteor() {
const meteor = document.createElement('div');
meteor.className = 'meteor';
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight * 0.3;
const duration = 4 + Math.random() * 6;
const delay = Math.random() * 20;
meteor.style.left = startX + 'px';
meteor.style.top = startY + 'px';
meteor.style.animationDuration = duration + 's';
meteor.style.animationDelay = delay + 's';
document.body.appendChild(meteor);
setTimeout(() => {
if (meteor.parentNode) meteor.remove();
}, (duration + delay) * 1000 + 100);
}
for (let i = 0; i < 5; i++) setTimeout(createMeteor, i * 3000);
setInterval(createMeteor, 12000);
// ---------- ИГРА ----------
const achievements = [
{ title: "Block #01: First Moon", target: 100, reward: 50 },
{ title: "Block #02: Lunar Link", target: 500, reward: 200 },
{ title: "Block #03: Quantum Moon", target: 2000, reward: 800 },
{ title: "Block #04: Cyber Core", target: 7500, reward: 2500 },
{ title: "Block #05: Mainnet Master", target: 20000, reward: 10000 },
{ title: "Block #06: Neural Miner", target: 50000, reward: 25000 },
{ title: "Block #07: Overlord", target: 120000, reward: 60000 },
{ title: "Block #08: Crypto God", target: 300000, reward: 150000 },
{ title: "Block #09: Singularity", target: 750000, reward: 400000 },
{ title: "Block #10: Transcendence", target: 2000000, reward: 1000000 }
];
let clicks = Number(localStorage.getItem('moon_score')) || 0;
let autoClicks = Number(localStorage.getItem('moon_auto')) || 0;
let multiplier = Number(localStorage.getItem('moon_mult')) || 1;
let currentAchIndex = Number(localStorage.getItem('moon_ach')) || 0;
let coolingLevel = Number(localStorage.getItem('moon_cool')) || 0;
let autoEfficiency = Number(localStorage.getItem('moon_eff')) || 0;
let maxEnergy = Number(localStorage.getItem('moon_maxEnergy')) || 100;
let energy = Number(localStorage.getItem('moon_energy')) || 100;
let heat = 0;
let isOverheated = false;
const BASE_HEAT = 8;
const BASE_COOL = 4;
let adCooldown = 0;
let doubleEndTime = 0;
let boost1Cost = 10 * Math.pow(1.5, autoClicks);
let boost2Cost = 30 * Math.pow(2.5, multiplier - 1);
let boost3Cost = 50 * Math.pow(2.0, coolingLevel);
let boost4Cost = 80 * Math.pow(2.0, autoEfficiency);
let boost5Cost = 60 * Math.pow(2.0, (maxEnergy - 100) / 20);
const $ = id => document.getElementById(id);
const scoreDisplay = $('scoreDisplay');
const achTitle = $('achTitle');
const achReward = $('achReward');
const achFill = $('achFill');
const achStatus = $('achStatus');
const heatFill = $('heatFill');
const heatStatusText = $('heatStatusText');
const clickArea = $('clickArea');
const moonBtn = $('moonBtn');
const multiplierBadge = $('multiplierBadge');
const statusText = $('statusText');
const subStats = $('subStats');
const energyFill = $('energyFill');
const energyText = $('energyText');
const adRewardBtn = $('adRewardBtn');
const adTimer = $('adTimer');
const adBonusInfo = $('adBonusInfo');
function iconSvg(name, cls = 'icon') {
return `<svg class="${cls}"><use href="#icon-${name}"/></svg>`;
}
function save() {
localStorage.setItem('moon_score', clicks);
localStorage.setItem('moon_auto', autoClicks);
localStorage.setItem('moon_mult', multiplier);
localStorage.setItem('moon_ach', currentAchIndex);
localStorage.setItem('moon_cool', coolingLevel);
localStorage.setItem('moon_eff', autoEfficiency);
localStorage.setItem('moon_maxEnergy', maxEnergy);
localStorage.setItem('moon_energy', energy);
}
function checkAchievements() {
let unlocked = false;
while (currentAchIndex < achievements.length && clicks >= achievements[currentAchIndex].target) {
clicks += achievements[currentAchIndex].reward;
currentAchIndex++;
unlocked = true;
}
if (unlocked) save();
}
function addFloatingText(text, className = '') {
const rect = clickArea.getBoundingClientRect();
const el = document.createElement('span');
el.className = 'floating-text ' + className;
el.textContent = text;
el.style.left = (rect.left + rect.width/2 - 20) + 'px';
el.style.top = (rect.top + rect.height/2 - 20) + 'px';
document.body.appendChild(el);
setTimeout(() => el.remove(), 700);
}
function updateUI() {
scoreDisplay.textContent = Math.floor(clicks);
multiplierBadge.textContent = `x${multiplier}`;
if (currentAchIndex < achievements.length) {
const ach = achievements[currentAchIndex];
achTitle.innerHTML = `${iconSvg('trophy','icon icon-sm')} Target: ${ach.title}`;
achReward.textContent = `+${ach.reward} MOON`;
const progress = Math.min(clicks / ach.target, 1);
achFill.style.width = (progress * 100) + '%';
achStatus.textContent = `${Math.floor(clicks)} / ${ach.target}`;
} else {
achTitle.innerHTML = `${iconSvg('trophy','icon icon-sm')} ALL BLOCKS MINED!`;
achReward.textContent = 'MAX RANK';
achFill.style.width = '100%';
achStatus.textContent = 'COMPLETED';
}
$('boost1Cost').textContent = Math.floor(boost1Cost);
$('boost2Cost').textContent = Math.floor(boost2Cost);
$('boost3Cost').textContent = Math.floor(boost3Cost);
$('boost4Cost').textContent = Math.floor(boost4Cost);
$('boost5Cost').textContent = Math.floor(boost5Cost);
$('boost1').disabled = clicks < boost1Cost;
$('boost2').disabled = clicks < boost2Cost || multiplier >= 10;
$('boost3').disabled = clicks < boost3Cost;
$('boost4').disabled = clicks < boost4Cost;
$('boost5').disabled = clicks < boost5Cost;
const totalAuto = autoClicks * (1 + autoEfficiency * 0.5);
subStats.innerHTML = `
<span>${iconSvg('lightning')} Auto: ${totalAuto.toFixed(1)} MH/s</span>
<span>${iconSvg('fire')} Crit: 15%</span>
<span>${iconSvg('snowflake')} Cool: ${coolingLevel}</span>
`;
const pct = Math.min((energy / maxEnergy) * 100, 100);
energyFill.style.width = pct + '%';
energyText.textContent = `${Math.floor(energy)}/${maxEnergy}`;
moonBtn.classList.toggle('no-energy', energy <= 0);
if (adCooldown > 0) {
adRewardBtn.disabled = true;
adRewardBtn.innerHTML = `${iconSvg('clock')} ${Math.ceil(adCooldown)}с`;
} else {
adRewardBtn.disabled = false;
adRewardBtn.innerHTML = `${iconSvg('tv')} Смотреть рекламу`;
}
if (doubleEndTime > Date.now()) {
const rem = Math.ceil((doubleEndTime - Date.now()) / 1000);
adBonusInfo.innerHTML = `${iconSvg('star')} x2 ДОХОДА (ещё ${rem}с)`;
} else {
adBonusInfo.innerHTML = `${iconSvg('star')} Бонус: +50 энергии / +50 MOON / x2 на 30 с`;
}
adTimer.textContent = '';
}
function triggerOverheat() {
if (isOverheated) return;
isOverheated = true;
moonBtn.classList.add('disabled');
heatFill.classList.add('overheated');
heatStatusText.textContent = "100°C OVERHEAT!";
statusText.textContent = "⛔ OVERHEATED";
addFloatingText('OVERHEAT!', 'heat-warn');
setTimeout(() => {
heat = 0;
isOverheated = false;
moonBtn.classList.remove('disabled');
heatFill.classList.remove('overheated');
heatStatusText.textContent = "30°C NORMAL";
statusText.textContent = "TAP TO MINE";
updateUI();
}, 2500);
}
function updateHeat() {
heatFill.style.width = Math.min(100, heat) + '%';
const temp = 30 + Math.floor(heat * 0.6);
let label = 'NORMAL';
if (heat >= 80) label = 'CRITICAL';
if (heat >= 100) label = 'OVERHEAT';
heatStatusText.textContent = `${temp}°C ${label}`;
if (isOverheated) heatStatusText.textContent = "100°C OVERHEAT!";
}
function handleClick(e) {
if (isOverheated) {
addFloatingText('OVERHEAT', 'heat-warn');
return;
}
if (energy < 1) {
addFloatingText('NO ENERGY', 'energy-low');
return;
}
energy -= 1;
if (energy < 0) energy = 0;
if (navigator.vibrate) navigator.vibrate(10);
const heatPerClick = Math.max(1, BASE_HEAT - coolingLevel);
heat = Math.min(100, heat + heatPerClick);
if (heat >= 100) triggerOverheat();
updateHeat();
const isCrit = Math.random() < 0.15;
let base = multiplier;
if (doubleEndTime > Date.now()) base *= 2;
const added = isCrit ? base * 4 : base;
clicks += added;
checkAchievements();
addFloatingText(isCrit ? `CRIT +${added}` : `+${added}`, isCrit ? 'crit' : '');
save();
updateUI();
}
function showRewardedAd() {
if (adCooldown > 0) return;
adRewardBtn.disabled = true;
adRewardBtn.innerHTML = `${iconSvg('clock')} Загрузка...`;
setTimeout(() => {
const bonusType = Math.floor(Math.random() * 3);
let msg = '';
switch (bonusType) {
case 0: {
const gain = Math.min(50, maxEnergy - energy);
if (gain > 0) { energy += gain; msg = `+${gain} энергии`; }
else { clicks += 50; msg = '+50 MOON (энергия полна)'; }
break;
}
case 1: { clicks += 50; msg = '+50 MOON'; break; }
case 2: { doubleEndTime = Date.now() + 30000; msg = 'x2 ДОХОДА на 30 с!'; break; }
}
addFloatingText(msg, 'ad-bonus');
adBonusInfo.innerHTML = `${iconSvg('check')} ${msg}`;
adCooldown = 30;
checkAchievements();
save();
updateUI();
}, 1200);
}
setInterval(() => {
if (energy < maxEnergy) { energy = Math.min(maxEnergy, energy + 1); updateUI(); }
}, 2000);
setInterval(() => {
if (!isOverheated && heat > 0) {
heat = Math.max(0, heat - (BASE_COOL + coolingLevel * 2));
updateHeat();
}
}, 200);
setInterval(() => {
if (autoClicks > 0) {
let total = autoClicks * (1 + autoEfficiency * 0.5);
if (doubleEndTime > Date.now()) total *= 2;
clicks += total;
checkAchievements();
save();
updateUI();
}
}, 1000);
setInterval(() => {
if (adCooldown > 0) { adCooldown--; if (adCooldown < 0) adCooldown = 0; updateUI(); }
if (doubleEndTime > Date.now() && Date.now() > doubleEndTime) {
doubleEndTime = 0;
updateUI();
}
}, 1000);
$('boost1').onclick = () => { if (clicks >= boost1Cost) { clicks -= boost1Cost; autoClicks++; boost1Cost *= 1.5; save(); updateUI(); } };
$('boost2').onclick = () => { if (clicks >= boost2Cost && multiplier < 10) { clicks -= boost2Cost; multiplier++; boost2Cost *= 2.5; save(); updateUI(); } };
$('boost3').onclick = () => { if (clicks >= boost3Cost) { clicks -= boost3Cost; coolingLevel++; boost3Cost *= 2.0; save(); updateUI(); } };
$('boost4').onclick = () => { if (clicks >= boost4Cost) { clicks -= boost4Cost; autoEfficiency++; boost4Cost *= 2.0; save(); updateUI(); } };
$('boost5').onclick = () => { if (clicks >= boost5Cost) { clicks -= boost5Cost; maxEnergy += 20; energy = Math.min(energy + 20, maxEnergy); boost5Cost *= 2.0; save(); updateUI(); } };
adRewardBtn.addEventListener('click', showRewardedAd);
$('resetBtn').onclick = () => { if (confirm("Reset all game data?")) { localStorage.clear(); location.reload(); } };
clickArea.addEventListener('click', handleClick);
clickArea.addEventListener('touchstart', e => { e.preventDefault(); handleClick(e); }, { passive: false });
checkAchievements();
updateUI();
updateHeat();
console.log('🌙 Moon Miner v4.20 — предельно прозрачный интерфейс');
})();
</script>
</body>
</html>Game Source: Moon Miner · Chill Space
Creator: SwiftNinja17
Libraries: none
Complexity: complex (1253 lines, 38.8 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: moon-miner-chill-space-swiftninja17" to link back to the original. Then publish at arcadelab.ai/publish.