<!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; } #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; } #winMessage { font-size: 72px; background: none; top: 30%; /* 화면의 위쪽으로 이동 */ left: 50%; transform: translate(-50%, -50%); z-index: 1001; /* 다음 라운드 버튼보다 위로 설정 */ } #nextRound { top: 80%; /* 화면의 아래쪽으로 이동 */ z-index: 1000; /* "You Win"보다 아래로 설정 */ } #nextRound { top: 80%; /* 아래쪽으로 이동 */ } </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="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> </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 = []; // 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'; // Audio setup const cannonSound = new Audio('firemn.ogg'); const machinegunSound = new Audio('firemg.ogg'); const enemyFireSound = new Audio('fireenemy.ogg'); const bgm = new Audio('BGM.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 } }; // Player setup const player = { x: canvas.width/2, y: canvas.height/2, speed: 5, angle: 0, width: 100, height: 45, health: 1000, maxHealth: 1000 }; 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); } 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' : 'fire.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; } } class Enemy { constructor(isBoss = false) { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.health = isBoss ? 10000 : 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 }); } } function showShop() { document.getElementById('shop').style.display = 'block'; } // 플레이어의 기본 상태를 저장 const defaultPlayerStats = { maxHealth: 1000, speed: 5, width: 100, height: 45 }; 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') { // PZ.IV player.maxHealth = 1500; player.speed = defaultPlayerStats.speed; // 기본 이동속도로 복구 player.width = 90; // PZ.IV의 크기 설정 player.height = 50; // PZ.IV의 크기 설정 } else if (tankId === 'tank2') { // TIGER player.maxHealth = 2000; player.speed = defaultPlayerStats.speed * 0.7; player.width = 100; // TIGER는 기본 크기 유지 player.height = 45; // TIGER는 기본 크기 유지 } player.health = player.maxHealth; } } function initRound() { enemies = []; for(let i = 0; i < 1 * currentRound; i++) { enemies.push(new Enemy()); } player.health = player.maxHealth; bullets = []; items = []; startCountdown(); } function startBossStage() { isBossStage = true; enemies = []; enemies.push(new Enemy(true)); player.health = player.maxHealth; bullets = []; items = []; document.getElementById('bossButton').style.display = 'none'; startCountdown(); } canvas.addEventListener('mousemove', (e) => { player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x); }); 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); 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 // player를 부모로 전달 )); bullets.push({ x: player.x + Math.cos(player.angle) * 30, y: player.y + Math.sin(player.angle) * 30, angle: player.angle, speed: 10, isEnemy: false, damage: weapon.damage, size: weapon.bulletSize }); lastShot = 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(); } 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; } if(player.health <= 0) { gameOver = true; restartBtn.style.display = 'block'; effects.push(new Effect(player.x, player.y, 1000, 'death')); deathSound.cloneNode().play(); } 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'; } 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; }); if(enemies.length === 0) { if (!isBossStage) { if(currentRound < 10) { nextRoundBtn.style.display = 'block'; showShop(); } else { document.getElementById('bossButton').style.display = 'block'; } } else { gameOver = true; document.getElementById('winMessage').style.display = 'block'; restartBtn.style.display = 'block'; bgm.pause(); } } } enemies.forEach(enemy => enemy.update()); } 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 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'); }); // 총알 그리기 bullets.forEach(bullet => { ctx.beginPath(); ctx.fillStyle = bullet.isEnemy ? 'red' : 'blue'; ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2); ctx.fill(); }); // 아이템 그리기 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); // bang.png는 1.5배 크게 const size = effect.type === 'death' ? 75 : 25; // death는 75px (1.5배), fire는 25px 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); } } // drawGame 함수 밖으로 이동 function gameLoop() { updateGame(); drawGame(); requestAnimationFrame(gameLoop); } nextRoundBtn.addEventListener('click', () => { currentRound++; nextRoundBtn.style.display = 'none'; document.getElementById('shop').style.display = 'none'; initRound(); }); bossButton.addEventListener('click', startBossStage); restartBtn.addEventListener('click', () => { currentRound = 1; gameOver = false; isBossStage = false; gold = 0; restartBtn.style.display = 'none'; document.getElementById('winMessage').style.display = 'none'; document.getElementById('tank1').style.display = 'block'; document.getElementById('tank2').style.display = 'block'; playerImg.src = 'player.png'; bgm.play(); initRound(); }); Promise.all([ new Promise(resolve => backgroundImg.onload = resolve), new Promise(resolve => playerImg.onload = resolve), new Promise(resolve => enemyImg.onload = resolve) ]).then(() => { initRound(); gameLoop(); bgm.play(); }); window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html>