| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1.0" | |
| > | |
| <meta | |
| name="theme-color" | |
| content="#000000" | |
| > | |
| <title>Rain Walker</title> | |
| <link | |
| rel="stylesheet" | |
| href="./css/style.css" | |
| > | |
| </head> | |
| <body> | |
| <!-- | |
| ======================================================== | |
| RAIN WALKER | |
| ======================================================== | |
| HTML stays intentionally minimal. | |
| Three.js will create the WebGL canvas and place it | |
| inside #game. | |
| Final structure: | |
| /index.html | |
| /css | |
| style.css | |
| /js | |
| main.js | |
| character.js | |
| world.js | |
| rain.js | |
| /assets | |
| /models | |
| character.glb | |
| /images | |
| cityscape.webp | |
| --> | |
| <!-- GAME / RENDER CONTAINER --> | |
| <main id="game"></main> | |
| <!-- Loading screen --> | |
| <div id="loading-screen"> | |
| <div class="loader-content"> | |
| <div class="loader-pixel"></div> | |
| <p id="loading-text"> | |
| ENTERING THE CITY... | |
| </p> | |
| </div> | |
| </div> | |
| <!-- | |
| Small cinematic overlay. | |
| We'll later use this for: | |
| - fade-in | |
| - lightning flashes | |
| - scene transitions | |
| - death / restart fades | |
| --> | |
| <div id="screen-overlay"></div> | |
| <!-- | |
| IMPORTANT: | |
| We are using ES modules. | |
| main.js becomes the entry point for the entire game. | |
| --> | |
| <script | |
| type="module" | |
| src="./js/main.js" | |
| ></script> | |
| </body> | |
| </html> |