There must be a logical path through the maze to get the main character successfully from the starting point to the finish point. The water pot should change color with each move made by the main character so that we know if it will be a win or a lose when contact is made at the center point.
d32863f
verified
| 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; | |
| } |