Spaces:

cutechicken
/

tankwar

Running

App Files Files Community

tankwar / index.html

cutechicken

Update index.html

0584ea6 verified about 2 months ago

raw

history blame

38.9 kB

	<!DOCTYPE html>
	<html>
	<head>
	<title>Tank Battle</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: #333;
	font-family: Arial;
	}
	#gameCanvas {
	background-repeat: repeat;
	}
	#instructions {
	position: fixed;
	top: 10px;
	right: 10px;
	color: white;
	background: rgba(0,0,0,0.7);
	padding: 10px;
	border-radius: 5px;
	z-index: 1000;
	}
	#weaponInfo {
	position: fixed;
	top: 150px;
	right: 10px;
	color: white;
	background: rgba(0,0,0,0.7);
	padding: 10px;
	border-radius: 5px;
	z-index: 1000;
	font-size: 18px;
	}
	.button {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px 40px;
	font-size: 24px;
	background: #4CAF50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	display: none;
	z-index: 1000;
	}
	#nextRound {
	top: 80% !important;
	}
	#restart {
	top: 80% !important; /* 재시작 버튼 위치 추가 */
	}
	#winMessage {
	top: 30% !important; /* 승리 메시지 위치 추가 */
	font-size: 72px;
	background: none;
	}
	#countdown {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 72px;
	color: white;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	z-index: 1000;
	display: none;
	}
	#titleScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('city2.png') no-repeat center center;
	background-size: cover;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	#titleScreen h1 {
	font-size: 72px;
	color: white;
	text-shadow: 2px 2px 5px black;
	margin-bottom: 50px;
	}
	.stageButton {
	padding: 15px 30px;
	font-size: 24px;
	background: #4CAF50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin: 10px;
	}
	.stageButton:disabled {
	background: #666;
	cursor: not-allowed;
	}
	#shop {
	position: fixed;
	top: 30% !important;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.9);
	padding: 20px;
	border-radius: 10px;
	color: white;
	z-index: 1000;
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="instructions">
	Controls:<br>
	WASD - Move tank<br>
	Mouse - Aim<br>
	Space - Fire<br>
	C - Switch Weapon<br>
	R - Toggle Auto-fire
	</div>
	<div id="weaponInfo">Current Weapon: Cannon</div>
	<div id="countdown">3</div>
	<button id="nextRound" class="button">Next Round</button>
	<button id="restart" class="button">Restart Game</button>
	<canvas id="gameCanvas"></canvas>

	<div id="titleScreen">
	<h1>TANK WAR</h1>
	<div id="stageSelect">
	<button class="stageButton" onclick="startStage(1)">Stage 1</button>
	<button class="stageButton" disabled>Stage 2</button>
	<button class="stageButton" disabled>Stage 3</button>
	<button class="stageButton" disabled>Stage 4</button>
	</div>
	</div>

	<div id="shop" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.9); padding:20px; border-radius:10px; color:white; z-index:1000;">
	<h2>Tank Shop</h2>
	<div style="display:flex; gap:20px;">
	<div id="tank1" style="text-align:center;">
	<h3>PZ.IV</h3>
	<img src="player2.png" width="90" height="50">
	<p>300 Gold</p>
	<p style="color: #4CAF50;">+50% HP</p>
	<button onclick="buyTank('player2.png', 300, 'tank1')">Buy</button>
	</div>
	<div id="tank2" style="text-align:center;">
	<h3>TIGER</h3>
	<img src="player3.png" width="110" height="55">
	<p>500 Gold</p>
	<p style="color: #4CAF50;">+100% HP</p>
	<p style="color: #ff6b6b;">-30% Speed</p>
	<button onclick="buyTank('player3.png', 500, 'tank2')">Buy</button>
	</div>
	<div id="bf109" style="text-align:center;">
	<h3>BF-109</h3>
	<img src="bf109.png" width="100" height="100">
	<p>1000 Gold</p>
	<p style="color: #4CAF50;">Air support from BF-109</p>
	<button onclick="buyBF109()">Buy</button>
	</div>
	<div id="ju87" style="text-align:center;">
	<h3>JU-87</h3>
	<img src="ju87.png" width="100" height="100">
	<p>1500 Gold</p>
	<p style="color: #4CAF50;">Get ju-87 air support</p>
	<button onclick="buyJU87()">Buy</button>
	</div>
	<div id="apcr" style="text-align:center;">
	<h3>APCR</h3>
	<img src="apcr.png" width="80" height="20">
	<p>1000 Gold</p>
	<p style="color: #4CAF50;">+100% Bullet Speed</p>
	<button onclick="buyAPCR()">Buy</button>
	</div>
	</div>
	</div>
	<button id="bossButton" class="button">Fight Boss!</button>
	<div id="winMessage" class="button" style="font-size: 72px; background: none;">You Win!</div>

	<script>
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const nextRoundBtn = document.getElementById('nextRound');
	const restartBtn = document.getElementById('restart');
	const weaponInfo = document.getElementById('weaponInfo');
	const countdownEl = document.getElementById('countdown');
	const bossButton = document.getElementById('bossButton');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	// Game state
	let currentRound = 1;
	let gameOver = false;
	let currentWeapon = 'cannon';
	let enemies = [];
	let bullets = [];
	let items = [];
	let lastShot = 0;
	let isCountingDown = true;
	let countdownTime = 3;
	let autoFire = false;
	let gold = 0;
	let isBossStage = false;
	let effects = [];
	let hasAPCR = false;
	let hasBF109 = false;
	let hasJU87 = false;
	let lastJU87Spawn = 0;
	let supportUnits = [];
	let lastSupportSpawn = 0;
	let gameStarted = false;

	// Load assets
	const backgroundImg = new Image();
	backgroundImg.src = 'city.png';
	const playerImg = new Image();
	playerImg.src = 'player.png';
	const enemyImg = new Image();
	enemyImg.src = 'enemy.png';
	const bulletImg = new Image();
	bulletImg.src = 'apcr2.png';

	// Audio setup
	const cannonSound = new Audio('firemn.ogg');
	const machinegunSound = new Audio('firemg.ogg');
	const enemyFireSound = new Audio('fireenemy.ogg');
	let bgm = new Audio('title.ogg');
	const countSound = new Audio('count.ogg');
	const deathSound = new Audio('death.ogg');
	bgm.loop = true;
	enemyFireSound.volume = 0.5;

	const weapons = {
	cannon: {
	fireRate: 1000,
	damage: 0.25,
	bulletSize: 5,
	sound: cannonSound
	},
	machinegun: {
	fireRate: 200,
	damage: 0.05,
	bulletSize: 2,
	sound: machinegunSound
	}
	};

	const player = {
	x: canvas.width/2,
	y: canvas.height/2,
	speed: 5,
	angle: 0,
	width: 100,
	height: 45,
	health: 1000,
	maxHealth: 1000
	};

	function startStage(stageNumber) {
	console.log("Starting stage:", stageNumber);
	const titleScreen = document.getElementById('titleScreen');
	if (stageNumber === 1) {
	titleScreen.style.display = 'none';
	document.getElementById('instructions').style.display = 'block';
	document.getElementById('weaponInfo').style.display = 'block';
	document.getElementById('gameCanvas').style.display = 'block';

	bgm.pause();
	bgm = new Audio('BGM2.ogg');
	bgm.loop = true;
	bgm.play().catch(err => console.error("Error playing game music:", err));

	gameStarted = true;
	currentRound = 1;
	initRound();
	gameLoop();
	}
	}

	function startCountdown() {
	isCountingDown = true;
	countdownTime = 3;
	countdownEl.style.display = 'block';
	countdownEl.textContent = countdownTime;
	bgm.pause();
	countSound.play();

	const countInterval = setInterval(() => {
	countdownTime--;
	if(countdownTime <= 0) {
	clearInterval(countInterval);
	countdownEl.style.display = 'none';
	isCountingDown = false;
	bgm.play();
	}
	countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
	}, 1000);
	}

	function initRound() {
	console.log(`Initializing round ${currentRound}`);

	// 버튼 상태 초기화
	nextRoundBtn.style.display = 'none';
	document.getElementById('bossButton').style.display = 'none';
	document.getElementById('shop').style.display = 'none';
	document.getElementById('winMessage').style.display = 'none';

	// 적 생성
	enemies = [];
	const enemyCount = currentRound;
	for(let i = 0; i < enemyCount; i++) {
	let x, y;
	const edge = Math.floor(Math.random() * 4);

	switch(edge) {
	case 0: x = Math.random() * canvas.width; y = 0; break;
	case 1: x = canvas.width; y = Math.random() * canvas.height; break;
	case 2: x = Math.random() * canvas.width; y = canvas.height; break;
	case 3: x = 0; y = Math.random() * canvas.height; break;
	}

	const enemy = new Enemy();
	enemy.x = x;
	enemy.y = y;
	enemies.push(enemy);
	}

	// 게임 상태 초기화
	player.health = player.maxHealth;
	bullets = [];
	items = [];
	supportUnits = [];
	lastSupportSpawn = 0;

	console.log(`Round ${currentRound} initialized with ${enemies.length} enemies`);

	// 카운트다운 시작
	startCountdown();

	// JU87 스폰 설정
	if (hasJU87) {
	setTimeout(() => {
	supportUnits.push(new JU87());
	lastJU87Spawn = Date.now();
	}, 3000);
	}
	}

	function checkRoundClear() {
	if(enemies.length === 0) {
	console.log(`Checking round clear: Current round ${currentRound}, Boss stage: ${isBossStage}`);

	if (!isBossStage) {
	if(currentRound < 10) {
	console.log('Normal round clear - showing next round button and shop');
	nextRoundBtn.style.display = 'block';
	document.getElementById('bossButton').style.display = 'none';
	showShop();
	} else {
	console.log('Final round clear - showing boss button');
	nextRoundBtn.style.display = 'none';
	document.getElementById('bossButton').style.display = 'block';
	document.getElementById('shop').style.display = 'none';
	}
	} else {
	console.log('Boss clear - showing victory message');
	gameOver = true;
	document.getElementById('winMessage').style.display = 'block';
	document.getElementById('bossButton').style.display = 'none';
	nextRoundBtn.style.display = 'none';
	document.getElementById('shop').style.display = 'none';
	restartBtn.style.display = 'block';
	bgm.pause();
	const victorySound = new Audio('victory.ogg');
	victorySound.play();
	}
	}
	}

	function showShop() {
	document.getElementById('shop').style.display = 'block';
	}

	const defaultPlayerStats = {
	maxHealth: 1000,
	speed: 5,
	width: 100,
	height: 45
	};

	// player 부분 수정 (buyTank 함수)
	function buyTank(tankImg, cost, tankId) {
	if (gold >= cost) {
	gold -= cost;
	playerImg.src = tankImg;
	document.getElementById(tankId).style.display = 'none';
	document.getElementById('shop').style.display = 'none';

	if (tankId === 'tank1') {
	player.maxHealth = 1500;
	player.speed = defaultPlayerStats.speed;
	player.width = 90;
	player.height = 50;
	} else if (tankId === 'tank2') {
	player.maxHealth = 2000;
	player.speed = defaultPlayerStats.speed * 0.7;
	player.width = 100;
	player.height = 45;
	}

	player.health = player.maxHealth;
	}
	}

	function buyAPCR() {
	if (gold >= 1000 && !hasAPCR) {
	gold -= 1000;
	hasAPCR = true;
	document.getElementById('apcr').style.display = 'none';
	document.getElementById('shop').style.display = 'none';
	}
	}

	function buyBF109() {
	if (gold >= 1000 && !hasBF109) {
	gold -= 1000;
	hasBF109 = true;
	document.getElementById('bf109').style.display = 'none';
	document.getElementById('shop').style.display = 'none';
	}
	}

	function buyJU87() {
	if (gold >= 1500 && !hasJU87) {
	gold -= 1500;
	hasJU87 = true;
	document.getElementById('ju87').style.display = 'none';
	document.getElementById('shop').style.display = 'none';
	lastJU87Spawn = Date.now();
	}
	}

	function updateGame() {
	if(gameOver) return;
	if(!isCountingDown) {
	// 플레이어 움직임
	if(keys['w']) player.y -= player.speed;
	if(keys['s']) player.y += player.speed;
	if(keys['a']) player.x -= player.speed;
	if(keys['d']) player.x += player.speed;

	player.x = Math.max(player.width/2, Math.min(canvas.width - player.width/2, player.x));
	player.y = Math.max(player.height/2, Math.min(canvas.height - player.height/2, player.y));

	fireBullet();
	}

	// BF109 관련 코드
	if (hasBF109 && !isCountingDown) {
	const now = Date.now();
	if (now - lastSupportSpawn > 10000) { // 10초마다
	supportUnits.push(
	new SupportUnit(canvas.height * 0.2),
	new SupportUnit(canvas.height * 0.5),
	new SupportUnit(canvas.height * 0.8)
	);
	lastSupportSpawn = now;
	}
	}

	// JU87 관련 코드
	if (hasJU87 && !isCountingDown) {
	const now = Date.now();
	if (now - lastJU87Spawn > 15000) { // 15초마다
	supportUnits.push(new JU87());
	lastJU87Spawn = now;
	}
	}

	// 지원 유닛 업데이트
	supportUnits = supportUnits.filter(unit => unit.update());

	// 적 업데이트 - 한 번만 실행
	enemies.forEach(enemy => enemy.update());

	if(!isCountingDown) {
	// 총알 처리
	bullets = bullets.filter(bullet => {
	bullet.x += Math.cos(bullet.angle) * bullet.speed;
	bullet.y += Math.sin(bullet.angle) * bullet.speed;

	if(!bullet.isEnemy) {
	enemies = enemies.filter(enemy => {
	const dist = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
	if(dist < 30) {
	let damage = currentWeapon === 'cannon' ? 250 : 50;
	enemy.health -= damage;
	if(enemy.health <= 0) {
	spawnHealthItem(enemy.x, enemy.y);
	gold += 100;
	effects.push(new Effect(enemy.x, enemy.y, 1000, 'death'));
	deathSound.cloneNode().play();
	return false;
	}
	return true;
	}
	return true;
	});
	} else {
	const dist = Math.hypot(bullet.x - player.x, bullet.y - player.y);
	if(dist < 30) {
	player.health -= bullet.damage \|\| 100;
	if(player.health <= 0) {
	gameOver = true;
	restartBtn.style.display = 'block';
	effects.push(new Effect(player.x, player.y, 1000, 'death'));
	deathSound.cloneNode().play();
	}
	return false;
	}
	}
	return bullet.x >= 0 && bullet.x <= canvas.width &&
	bullet.y >= 0 && bullet.y <= canvas.height;
	});

	// 아이템 처리
	items = items.filter(item => {
	const dist = Math.hypot(item.x - player.x, item.y - player.y);
	if(dist < 30) {
	player.health = Math.min(player.health + 200, player.maxHealth);
	return false;
	}
	return true;
	});

	// 라운드 클리어 체크
	checkRoundClear();
	}
	}

	function drawGame() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// 배경 그리기
	const pattern = ctx.createPattern(backgroundImg, 'repeat');
	ctx.fillStyle = pattern;
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// 플레이어 그리기
	ctx.save();
	ctx.translate(player.x, player.y);
	ctx.rotate(player.angle);
	ctx.drawImage(playerImg, -player.width/2, -player.height/2, player.width, player.height);
	ctx.restore();

	// 체력바 그리기
	drawHealthBar(canvas.width/2, 30, player.health, player.maxHealth, 200, 20, 'green');

	// 적 그리기
	enemies.forEach(enemy => {
	ctx.save();
	ctx.translate(enemy.x, enemy.y);
	ctx.rotate(enemy.angle);
	const img = enemy.isBoss ? enemy.enemyImg : (enemy.enemyImg \|\| enemyImg);
	ctx.drawImage(img, -enemy.width/2, -enemy.height/2, enemy.width, enemy.height);
	ctx.restore();
	drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 60, 5, 'red');
	});

	// 지원 유닛 그리기
	supportUnits.forEach(unit => {
	ctx.save();
	ctx.translate(unit.x, unit.y);
	ctx.rotate(unit.angle);
	ctx.drawImage(unit.img, -unit.width/2, -unit.height/2, unit.width, unit.height);
	ctx.restore();
	});

	// 총알 그리기
	bullets.forEach(bullet => {
	if (bullet.isEnemy \|\| !bullet.isAPCR) {
	ctx.beginPath();
	ctx.fillStyle = bullet.isEnemy ? 'red' : 'blue';
	ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
	ctx.fill();
	} else {
	ctx.save();
	ctx.translate(bullet.x, bullet.y);
	ctx.rotate(bullet.angle);
	const width = currentWeapon === 'machinegun' ? 10 : 20;
	const height = currentWeapon === 'machinegun' ? 5 : 10;
	ctx.drawImage(bulletImg, -width/2, -height/2, width, height);
	ctx.restore();
	}
	});

	// 아이템 그리기
	items.forEach(item => {
	ctx.beginPath();
	ctx.fillStyle = 'green';
	ctx.arc(item.x, item.y, 10, 0, Math.PI * 2);
	ctx.fill();
	});

	// UI 그리기
	ctx.fillStyle = 'white';
	ctx.font = '24px Arial';
	ctx.fillText(`Round ${currentRound}/10`, 10, 30);
	ctx.fillText(`Gold: ${gold}`, 10, 60);

	// 이펙트 그리기
	effects = effects.filter(effect => !effect.isExpired());
	effects.forEach(effect => {
	effect.update();
	ctx.save();
	ctx.translate(effect.x, effect.y);
	if (effect.type === 'fire') ctx.rotate(effect.angle);
	const size = effect.type === 'death' ? 75 : 42;
	ctx.drawImage(effect.img, -size/2, -size/2, size, size);
	ctx.restore();
	});

	// 카운트다운 오버레이
	if (isCountingDown) {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
	}

	function gameLoop() {
	if (!gameOver && gameStarted) {
	updateGame();
	drawGame();
	requestAnimationFrame(gameLoop);
	}
	}

	// 이벤트 리스너
	document.addEventListener('DOMContentLoaded', () => {
	const titleScreen = document.getElementById('titleScreen');
	const instructions = document.getElementById('instructions');
	const weaponInfo = document.getElementById('weaponInfo');
	const gameCanvas = document.getElementById('gameCanvas');

	instructions.style.display = 'none';
	weaponInfo.style.display = 'none';
	gameCanvas.style.display = 'none';

	bgm.play().catch(err => console.error("Error playing title music:", err));

	// 다음 라운드 버튼 클릭 이벤트
	nextRoundBtn.addEventListener('click', () => {
	currentRound++;
	nextRoundBtn.style.display = 'none';
	document.getElementById('shop').style.display = 'none';
	initRound();
	});

	// 재시작 버튼 클릭 이벤트
	restartBtn.addEventListener('click', () => {
	location.reload();
	});

	// 보스 버튼 클릭 이벤트
	document.getElementById('bossButton').addEventListener('click', () => {
	startBossStage();
	});
	});

	// 키보드 및 마우스 이벤트
	const keys = {};
	document.addEventListener('keydown', e => {
	keys[e.key] = true;
	if(e.key.toLowerCase() === 'c') {
	currentWeapon = currentWeapon === 'cannon' ? 'machinegun' : 'cannon';
	weaponInfo.textContent = `Current Weapon: ${currentWeapon.charAt(0).toUpperCase() + currentWeapon.slice(1)}`;
	} else if(e.key.toLowerCase() === 'r') {
	autoFire = !autoFire;
	}
	});

	document.addEventListener('keyup', e => keys[e.key] = false);

	canvas.addEventListener('mousemove', (e) => {
	player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
	});

	window.addEventListener('resize', () => {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	});

	function spawnHealthItem(x, y) {
	items.push({x, y});
	}

	function drawHealthBar(x, y, health, maxHealth, width, height, color) {
	ctx.fillStyle = '#333';
	ctx.fillRect(x - width/2, y - height/2, width, height);
	ctx.fillStyle = color;
	ctx.fillRect(x - width/2, y - height/2, width * (health/maxHealth), height);
	}

	function fireBullet() {
	if(isCountingDown) return;
	const weapon = weapons[currentWeapon];
	const now = Date.now();
	if ((keys[' '] \|\| autoFire) && now - lastShot > weapon.fireRate) {
	weapon.sound.cloneNode().play();
	effects.push(new Effect(
	player.x + Math.cos(player.angle) * 30,
	player.y + Math.sin(player.angle) * 30,
	500,
	'fire',
	player.angle,
	player
	));

	bullets.push({
	x: player.x + Math.cos(player.angle) * 30,
	y: player.y + Math.sin(player.angle) * 30,
	angle: player.angle,
	speed: hasAPCR ? 20 : 10,
	isEnemy: false,
	damage: weapon.damage,
	size: weapon.bulletSize,
	isAPCR: hasAPCR
	});
	lastShot = now;
	}
	}

	function startBossStage() {
	isBossStage = true;
	enemies = [];
	enemies.push(new Enemy(true));
	player.health = player.maxHealth;
	bullets = [];
	items = [];
	document.getElementById('bossButton').style.display = 'none';
	bgm.src = 'BGM.ogg';
	bgm.loop = true;
	bgm.play();
	startCountdown();
	}

	// Enemy 클래스
	class Enemy {
	constructor(isBoss = false) {
	this.x = Math.random() * canvas.width;
	this.y = Math.random() * canvas.height;
	this.health = isBoss ? 15000 : 1000;
	this.maxHealth = this.health;
	this.speed = isBoss ? 1 : 2;
	this.lastShot = 0;
	this.shootInterval = isBoss ? 1000 : 1000;
	this.angle = 0;
	this.width = 100;
	this.height = 45;
	this.moveTimer = 0;
	this.moveInterval = Math.random() * 2000 + 1000;
	this.moveAngle = Math.random() * Math.PI * 2;
	this.isBoss = isBoss;

	if (isBoss) {
	this.enemyImg = new Image();
	this.enemyImg.src = 'boss.png';
	} else if (currentRound >= 7) {
	this.enemyImg = new Image();
	this.enemyImg.src = 'enemy3.png';
	} else if (currentRound >= 4) {
	this.enemyImg = new Image();
	this.enemyImg.src = 'enemy2.png';
	}
	}

	update() {
	if(isCountingDown) return;
	const now = Date.now();

	if (now - this.moveTimer > this.moveInterval) {
	this.moveAngle = Math.random() * Math.PI * 2;
	this.moveTimer = now;
	}

	// 적 움직임 업데이트
	this.x += Math.cos(this.moveAngle) * this.speed;
	this.y += Math.sin(this.moveAngle) * this.speed;

	// 화면 경계 처리
	this.x = Math.max(this.width/2, Math.min(canvas.width - this.width/2, this.x));
	this.y = Math.max(this.height/2, Math.min(canvas.height - this.height/2, this.y));

	// 플레이어를 향해 각도 조정
	this.angle = Math.atan2(player.y - this.y, player.x - this.x);

	// 발사 타이밍 체크
	if (now - this.lastShot > this.shootInterval && !isCountingDown) {
	this.shoot();
	this.lastShot = now;
	}
	}

	shoot() {
	const sound = this.isBoss ? new Audio('firemn.ogg') : enemyFireSound.cloneNode();
	sound.play();

	// 발사 이펙트 추가
	effects.push(new Effect(
	this.x + Math.cos(this.angle) * 30,
	this.y + Math.sin(this.angle) * 30,
	500,
	'fire',
	this.angle,
	this
	));

	// 총알 생성
	bullets.push({
	x: this.x + Math.cos(this.angle) * 30,
	y: this.y + Math.sin(this.angle) * 30,
	angle: this.angle,
	speed: this.isBoss ? 10 : 5,
	isEnemy: true,
	size: this.isBoss ? 5 : 3,
	damage: this.isBoss ? 300 : 150
	});
	}
	}
	// Effect 클래스
	class Effect {
	constructor(x, y, duration, type, angle = 0, parent = null) {
	this.x = x;
	this.y = y;
	this.startTime = Date.now();
	this.duration = duration;
	this.type = type;
	this.angle = angle;
	this.parent = parent;
	this.offset = { x: Math.cos(angle) * 30, y: Math.sin(angle) * 30 };
	this.img = new Image();
	this.img.src = type === 'death' ? 'bang.png' : 'fire2.png';
	}

	update() {
	if(this.parent && this.type === 'fire') {
	this.x = this.parent.x + this.offset.x;
	this.y = this.parent.y + this.offset.y;
	this.angle = this.parent.angle;
	}
	}

	isExpired() {
	return Date.now() - this.startTime > this.duration;
	}
	}

	// SupportUnit 클래스
	class SupportUnit {
	constructor(yPosition) {
	this.x = 0;
	this.y = yPosition;
	this.speed = 5;
	this.lastShot = 0;
	this.width = 100;
	this.height = 100;
	this.angle = 0;
	this.img = new Image();
	this.img.src = 'bf109.png';
	this.hasPlayedSound = false;
	this.mgSound = null;
	}

	update() {
	this.x += this.speed;

	if (isCountingDown) {
	if (this.mgSound) {
	this.mgSound.pause();
	this.mgSound.currentTime = 0;
	}
	this.hasPlayedSound = false;
	}

	const now = Date.now();
	if (now - this.lastShot > 200 && !isCountingDown) {
	this.shoot();
	this.lastShot = now;
	}
	return this.x < canvas.width;
	}

	shoot() {
	if (!this.hasPlayedSound) {
	const firstSound = new Audio('bf109mg.ogg');
	firstSound.volume = 0.7;
	firstSound.play();
	this.hasPlayedSound = true;
	}

	if (!isCountingDown) {
	const shootSound = new Audio('bf109mgse.ogg');
	shootSound.volume = 0.3;
	shootSound.play();
	}

	bullets.push({
	x: this.x + Math.cos(this.angle) * 30,
	y: this.y + Math.sin(this.angle) * 30,
	angle: this.angle,
	speed: 10,
	isEnemy: false,
	damage: weapons.machinegun.damage,
	size: weapons.machinegun.bulletSize
	});
	}
	}

	// JU87 클래스
	class JU87 {
	constructor() {
	this.x = canvas.width;
	this.y = 50;
	this.speed = 5;
	this.width = 100;
	this.height = 100;
	this.angle = Math.PI;
	this.img = new Image();
	this.img.src = 'ju87.png';
	this.target = null;
	this.lastShot = 0;
	this.spawnTime = Date.now();
	this.hasPlayedSound = false;
	this.hasPlayedMGSound = false;
	this.isReturning = false;
	this.circleAngle = 0;
	this.returningToCenter = false;
	}

	selectTarget() {
	return enemies.length > 0 ?
	enemies[Math.floor(Math.random() * enemies.length)] : null;
	}

	update() {
	if (!this.hasPlayedSound) {
	const sirenSound = new Audio('ju87siren.ogg');
	sirenSound.volume = 1.0;
	sirenSound.play();
	this.hasPlayedSound = true;
	}

	const timeSinceSpawn = Date.now() - this.spawnTime;
	const centerX = canvas.width / 2;
	const centerY = canvas.height / 2;

	if (timeSinceSpawn > 5000) {
	if (!this.isReturning) {
	this.isReturning = true;
	this.target = null;
	this.angle = Math.atan2(centerY - this.y, centerX - this.x);
	} else {
	this.angle = Math.PI;
	this.x -= this.speed;
	return this.x > 0;
	}
	} else if (this.returningToCenter) {
	const distToCenter = Math.hypot(this.x - centerX, this.y - centerY);
	if (distToCenter > 50) {
	this.angle = Math.atan2(centerY - this.y, centerX - this.x);
	} else {
	this.returningToCenter = false;
	this.target = this.selectTarget();
	}
	} else if (this.target) {
	const distToTarget = Math.hypot(this.x - this.target.x, this.y - this.target.y);

	if (!enemies.includes(this.target) \|\| distToTarget < 30) {
	this.returningToCenter = true;
	this.target = null;
	} else {
	this.angle = Math.atan2(this.target.y - this.y, this.target.x - this.x);
	}
	} else {
	this.target = this.selectTarget();

	if (!this.target) {
	this.circleAngle += 0.02;
	const radius = Math.min(canvas.width, canvas.height) / 4;
	const targetX = centerX + Math.cos(this.circleAngle) * radius;
	const targetY = centerY + Math.sin(this.circleAngle) * radius;
	this.angle = Math.atan2(targetY - this.y, targetX - this.x);
	}
	}

	this.x += Math.cos(this.angle) * this.speed;
	this.y += Math.sin(this.angle) * this.speed;

	if (!this.returningToCenter && !this.isReturning && this.target &&
	Date.now() - this.lastShot > 200) {
	this.shoot();
	this.lastShot = Date.now();
	}

	return true;
	}

	shoot() {
	if (!this.hasPlayedMGSound && !isCountingDown) {
	const mgSound = new Audio('ju87mg.ogg');
	mgSound.volume = 1.0;
	mgSound.play();
	this.hasPlayedMGSound = true;
	}

	[[20, 50], [80, 50]].forEach(([x, y]) => {
	const offsetX = x - 50;
	const offsetY = y - 50;

	const rotatedX = this.x + (Math.cos(this.angle) * offsetX - Math.sin(this.angle) * offsetY);
	const rotatedY = this.y + (Math.sin(this.angle) * offsetX + Math.cos(this.angle) * offsetY);

	bullets.push({
	x: rotatedX,
	y: rotatedY,
	angle: this.angle,
	speed: 10,
	isEnemy: false,
	damage: weapons.machinegun.damage * 2,
	size: weapons.machinegun.bulletSize
	});
	});
	}
	}
	</script>
	</body>
	</html>