| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>First Person Explorer 3D</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/PointerLockControls.js"></script> |
| | <style> |
| | body { |
| | margin: 0; |
| | overflow: hidden; |
| | font-family: 'Inter', sans-serif; |
| | } |
| | canvas { |
| | display: block; |
| | } |
| | #ui { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | pointer-events: none; |
| | } |
| | #controls { |
| | position: absolute; |
| | bottom: 20px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | background: rgba(0, 0, 0, 0.5); |
| | padding: 10px 20px; |
| | border-radius: 10px; |
| | color: white; |
| | display: flex; |
| | gap: 20px; |
| | } |
| | #title { |
| | position: absolute; |
| | top: 20px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | background: rgba(0, 0, 0, 0.5); |
| | padding: 10px 20px; |
| | border-radius: 10px; |
| | color: white; |
| | text-align: center; |
| | } |
| | .control-item { |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900"> |
| | <canvas id="gameCanvas"></canvas> |
| | <div id="ui"> |
| | <div id="title"> |
| | <h1 class="text-xl font-bold">3D Maze Adventure</h1> |
| | <p class="text-sm">WASD: Move | SPACE: Jump | E: Interact | Click to play</p> |
| | </div> |
| | <div id="controls"> |
| | <div class="control-item"> |
| | <span class="bg-gray-700 px-2 py-1 rounded mb-1">W</span> |
| | <span>Forward</span> |
| | </div> |
| | <div class="control-item"> |
| | <span class="bg-gray-700 px-2 py-1 rounded mb-1">A</span> |
| | <span>Left</span> |
| | </div> |
| | <div class="control-item"> |
| | <span class="bg-gray-700 px-2 py-1 rounded mb-1">S</span> |
| | <span>Back</span> |
| | </div> |
| | <div class="control-item"> |
| | <span class="bg-gray-700 px-2 py-1 rounded mb-1">D</span> |
| | <span>Right</span> |
| | </div> |
| | <div class="control-item"> |
| | <span class="bg-gray-700 px-2 py-1 rounded mb-1">SPACE</span> |
| | <span>Jump</span> |
| | </div> |
| | <div class="control-item"> |
| | <span class="bg-gray-700 px-2 py-1 rounded mb-1">E</span> |
| | <span>Interact</span> |
| | </div> |
| | </div> |
| | </div> |
| | <script src="script.js"></script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
