Spaces:

cutechicken
/

TankWar3D

Running

App Files Files Community

TankWar3D / index.html

cutechicken

Update index.html

b2a9297 verified 9 days ago

raw

history blame

9.72 kB

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>
	<title>Tank Combat Simulator - FPS Mode</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;
	}

	#gameContainer {
	position: relative;
	width: 100vw;
	height: 100vh;
	cursor: crosshair;
	}

	#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: 25%;
	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;
	mix-blend-mode: difference;
	}

	#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;
	}

	#gameTitle {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	color: #0f0;
	background: rgba(0,20,0,0.7);
	padding: 10px 20px;
	font-size: 20px;
	z-index: 1001;
	border: 1px solid #0f0;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: 2px;
	}
	#ammoDisplay {
	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;
	}

	#reloadingText {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ff0000;
	font-size: 24px;
	font-weight: bold;
	display: none;
	z-index: 1002;
	}

	#radar {
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 200px;
	height: 200px;
	background: rgba(0,20,0,0.3);
	border: 2px solid #0f0;
	border-radius: 50%;
	z-index: 1001;
	overflow: hidden;
	}

	#radarLine {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 2px;
	background: #0f0;
	transform-origin: left center;
	animation: radar-sweep 4s infinite linear;
	}

	.enemy-dot {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #ff0000;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	}

	@keyframes radar-sweep {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}

	#gameStats {
	position: absolute;
	top: 10px;
	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;
	text-align: right;
	}

	.start-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 2000;
	}

	.start-button {
	padding: 15px 30px;
	font-size: 24px;
	background: #0f0;
	color: #000;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 20px;
	transition: transform 0.2s;
	}

	.start-button:hover {
	transform: scale(1.1);
	}

	#minimap {
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 200px;
	height: 200px;
	background: rgba(0,20,0,0.7);
	border: 2px solid #0f0;
	border-radius: 5px;
	z-index: 1001;
	}
	</style>
	</head>
	<body>
	<div id="loading">
	<div class="loading-spinner"></div>
	<div class="loading-text">Loading tank assets...</div>
	</div>

	<div class="start-screen" id="startScreen">
	<h1 style="color: #0f0; font-size: 48px; margin-bottom: 20px;">Tank Combat Simulator</h1>
	<button class="start-button" onclick="startGame()">Start Game</button>
	<div style="color: #0f0; margin-top: 20px; text-align: center;">
	<p>Controls:</p>
	<p>W,A,S,D - Move Tank</p>
	<p>Mouse - Look Around</p>
	<p>Left Click - Fire</p>
	<p>ESC - Pause</p>
	</div>
	</div>


	<div id="gameContainer">
	<div id="gameTitle">Tank Combat Simulator</div>
	<div id="gameStats">
	<div id="score">Score: 0</div>
	<div id="time">Time: 180s</div>
	</div>
	<div id="crosshair"></div>

	<!-- 체력바 -->
	<div id="healthBar">
	<div id="health"></div>
	</div>

	<!-- 포탑 정보 -->
	<div id="turretInfo">Turret Angle: 0°</div>

	<!-- 새로운 탄약 시스템 -->
	<div id="ammoDisplay">APFSDS: 1/1</div>

	<!-- 리로딩 텍스트 -->
	<div id="reloadingText">RELOADING...</div>

	<!-- 레이더 -->
	<div id="radar">
	<div id="radarLine"></div>
	</div>
	</div>


	<script>
	function startGame() {
	document.getElementById('startScreen').style.display = 'none';
	// 여기에 게임 시작 로직 추가
	document.body.requestPointerLock();
	}

	// 포인터 락 이벤트 처리
	document.addEventListener('pointerlockchange', () => {
	if (document.pointerLockElement === document.body) {
	console.log('Pointer locked');
	} else {
	console.log('Pointer unlocked');
	}
	});
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r155/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/loaders/GLTFLoader.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/controls/PointerLockControls.js"></script>
	<script src="game.js"></script>
	</body>
	</html>