Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Three.js Tower Defense</title> | |
| <link rel="stylesheet" href="styles/theme.css"> | |
| <link rel="stylesheet" href="styles/ui.css"> | |
| <style> | |
| body { margin: 0; overflow: hidden; } | |
| canvas { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hud"> | |
| <div class="panel panel--compact"> | |
| <div class="chips"> | |
| <span class="chip"><span class="chip__label">Money</span><b id="money">200</b></span> | |
| <span class="chip"><span class="chip__label">Lives</span><b id="lives">10</b></span> | |
| <span class="chip"><span class="chip__label">Wave</span><b id="wave">0</b>/<b id="wavesTotal">∞</b></span> | |
| </div> | |
| <div id="messages" class="message-bar hidden"></div> | |
| <button id="restart" class="btn btn--primary hidden">Restart</button> | |
| </div> | |
| <div id="upgradePanel" class="upgrade-panel hidden"> | |
| <div class="panel-title">Selected Tower</div> | |
| <div class="stat-grid"> | |
| <div class="stat-label">Level</div><div class="stat-value" id="t_level">1</div> | |
| <div class="stat-label">Range</div><div class="stat-value" id="t_range">0</div> | |
| <div class="stat-label">Fire Rate</div><div class="stat-value" id="t_rate">0</div> | |
| <div class="stat-label">Damage</div><div class="stat-value" id="t_damage">0</div> | |
| <div class="stat-label">Next Upgrade</div><div class="stat-value" id="t_nextCost">-</div> | |
| </div> | |
| <div class="u-flex u-gap-3"> | |
| <button id="upgradeBtn" class="btn btn--primary">Upgrade</button> | |
| <button id="sellBtn" class="btn">Sell</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module" src="src/main.js"></script> | |
| </body> | |
| </html> |