цикл день-ночь, кролики, кровавая луна

This commit is contained in:
azykov@mail.ru
2026-09-04 20:31:53 +03:00
parent 982bbce813
commit 396a604671
17 changed files with 1061 additions and 171 deletions
+86 -25
View File
@@ -199,6 +199,23 @@
user-select: none;
}
.health-bar {
position: absolute;
width: 28px;
height: 5px;
transform: translate(-50%, -100%);
background: rgba(0, 0, 0, 0.5);
border: 1px solid #1b1611;
z-index: 500;
pointer-events: none;
}
.health-bar__fill {
height: 100%;
background: #4caf50;
transition: none;
}
.entity {
position: absolute;
transform: translate(-50%, -50%);
@@ -250,6 +267,24 @@
z-index: 0;
}
.entity.rabbit-shadow {
width: 18px;
height: 9px;
border-radius: 50%;
margin: 32px 10px 0px 0px;
background: rgba(0, 0, 0, 0.35);
z-index: 0;
}
.entity.meat-shadow {
width: 18px;
height: 9px;
border-radius: 50%;
margin: 7px 0px 0px 0px;
background: rgba(0, 0, 0, 0.35);
z-index: 0;
}
.entity.tree {
pointer-events: auto;
cursor: pointer;
@@ -264,6 +299,13 @@
margin: -8px;
}
.entity.rabbit {
pointer-events: auto;
cursor: pointer;
padding: 6px;
margin: -6px;
}
.entity.chopping svg {
animation: chop-shake 0.12s infinite;
}
@@ -276,37 +318,56 @@
animation: walk-bob 0.3s infinite steps(2);
}
.next-level-btn {
.day-night-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 9999;
}
.blood-moon-banner {
position: absolute;
top: 15%;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
padding: 16px 24px;
background: var(--panel-bg);
border: 4px solid var(--accent);
color: var(--accent);
font-family: inherit;
font-size: 14px;
text-shadow: 2px 2px 0 var(--panel-border);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
cursor: pointer;
animation: next-level-pop 0.6s ease-out;
transform: translateX(-50%);
pointer-events: none;
z-index: 9999;
font-size: 24px;
color: #e63946;
text-shadow: 3px 3px 0 #2a0505;
animation: blood-moon-pulse 1s ease-in-out infinite;
white-space: nowrap;
}
.next-level-btn:hover {
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
margin: -4px 0px 0px -4px;
}
@keyframes next-level-pop {
0% {
transform: translate(-50%, -50%) scale(0.85);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
@keyframes blood-moon-pulse {
0%, 100% {
opacity: 1;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 0.75;
transform: translateX(-50%) scale(1.08);
}
}
.game-over-overlay {
position: absolute;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
.game-over-overlay__message {
font-size: 16px;
color: var(--accent);
text-shadow: 2px 2px 0 var(--panel-border);
text-align: center;
padding: 0 20px;
}
@keyframes chop-shake {