File size: 2,410 Bytes
41b1f50 8055c60 41b1f50 8055c60 41b1f50 8055c60 a7c5b6a 8055c60 a7c5b6a 41b1f50 8055c60 41b1f50 8055c60 1780a45 8055c60 41b1f50 6b74c43 8055c60 a7c5b6a 8055c60 1780a45 8055c60 6b74c43 8055c60 6b74c43 8055c60 6b74c43 8055c60 d32863f 8055c60 6b74c43 d32863f 8055c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | body {
font-family: 'Comic Sans MS', cursive, sans-serif;
}
.game-container {
max-width: 600px;
}
.maze-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
background-color: #f8fafc;
border: 2px solid #4ade80;
}
.maze-border {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.maze-grid {
display: grid;
grid-template-columns: repeat(41, 1fr);
grid-template-rows: repeat(41, 1fr);
z-index: 2;
}
.cell {
width: 0.25rem;
height: 0.25rem;
font-size: 0.5rem;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
position: relative;
transition: all 0.2s ease;
}
.wall {
background-color: #4ade80;
border: 1px solid #22c55e;
}
.path.goal {
background-color: #fecaca;
animation: pulse 1s infinite;
}
.player {
background-color: #f0fdf4;
font-size: 0.6rem;
z-index: 10;
}
.enemy {
background-color: #fdf2f8;
animation: pulse 2s infinite;
z-index: 5;
font-size: 0.5rem;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.food {
background-color: #ffedd5;
z-index: 3;
font-size: 0.5rem;
}
.water {
background-color: #e0f2fe;
border: 1px solid #38bdf8;
animation: ripple 3s infinite, colorChange 2s infinite alternate;
z-index: 4;
font-size: 0.5rem;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
@keyframes colorChange {
0% { opacity: 0.8; }
100% { opacity: 1; }
}
@keyframes ripple {
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}
.path {
background-color: #f8fafc;
}
.game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
z-index: 100;
}
.game-over h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.game-over button {
margin-top: 1rem;
padding: 0.5rem 1rem;
background-color: #4ade80;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
} |