|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tank Combat Simulator</title> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
overflow: hidden; |
|
|
background: #000; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
#loading { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
background: rgba(0,0,0,0.8); |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
z-index: 2000; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border: 5px solid #0f0; |
|
|
border-top: 5px solid transparent; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 0 auto 20px; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.loading-text { |
|
|
color: #0f0; |
|
|
font-size: 24px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
#info { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
color: #0f0; |
|
|
background: rgba(0,20,0,0.7); |
|
|
padding: 10px; |
|
|
font-size: 14px; |
|
|
z-index: 1001; |
|
|
border: 1px solid #0f0; |
|
|
border-radius: 5px; |
|
|
user-select: none; |
|
|
} |
|
|
|
|
|
#crosshair { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border: 2px solid rgba(255,0,0,0.7); |
|
|
border-radius: 50%; |
|
|
z-index: 1001; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
#crosshair::before, |
|
|
#crosshair::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
background: rgba(255,0,0,0.7); |
|
|
} |
|
|
|
|
|
#crosshair::before { |
|
|
top: 50%; |
|
|
left: -10px; |
|
|
right: -10px; |
|
|
height: 2px; |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
|
|
|
#crosshair::after { |
|
|
left: 50%; |
|
|
top: -10px; |
|
|
bottom: -10px; |
|
|
width: 2px; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
#healthBar { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
left: 20px; |
|
|
width: 200px; |
|
|
height: 20px; |
|
|
background: rgba(0,20,0,0.7); |
|
|
border: 2px solid #0f0; |
|
|
z-index: 1001; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#health { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, #0f0, #00ff00); |
|
|
transition: width 0.3s; |
|
|
} |
|
|
|
|
|
#ammo { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
color: #0f0; |
|
|
background: rgba(0,20,0,0.7); |
|
|
padding: 10px; |
|
|
font-size: 20px; |
|
|
z-index: 1001; |
|
|
border: 1px solid #0f0; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
#turretInfo { |
|
|
position: absolute; |
|
|
top: 50px; |
|
|
right: 20px; |
|
|
color: #0f0; |
|
|
background: rgba(0,20,0,0.7); |
|
|
padding: 10px; |
|
|
font-size: 16px; |
|
|
z-index: 1001; |
|
|
border: 1px solid #0f0; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
#controls { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
color: #0f0; |
|
|
background: rgba(0,20,0,0.7); |
|
|
padding: 10px; |
|
|
font-size: 14px; |
|
|
z-index: 1001; |
|
|
border: 1px solid #0f0; |
|
|
border-radius: 5px; |
|
|
text-align: center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="loading"> |
|
|
<div class="loading-spinner"></div> |
|
|
<div class="loading-text">Loading tank assets...</div> |
|
|
</div> |
|
|
|
|
|
<div id="info"> |
|
|
Click to start<br> |
|
|
W - Forward<br> |
|
|
S - Backward<br> |
|
|
A - Rotate Left<br> |
|
|
D - Rotate Right<br> |
|
|
Mouse - Aim Turret<br> |
|
|
Left Click - Fire |
|
|
</div> |
|
|
|
|
|
<div id="controls">Tank Combat Simulator</div> |
|
|
<div id="crosshair"></div> |
|
|
<div id="healthBar"><div id="health"></div></div> |
|
|
<div id="ammo">Ammo: 10/10</div> |
|
|
<div id="turretInfo">Turret Angle: 0°</div> |
|
|
|
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"three": "https://unpkg.com/[email protected]/build/three.module.js", |
|
|
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script type="module" src="game.js"></script> |
|
|
</body> |
|
|
</html> |
