<!DOCTYPE html> <html> <head> <title>Tank Battle</title> <style> body { margin: 0; overflow: hidden; background: #333; } #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; font-family: Arial; z-index: 1000; } .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; } </style> </head> <body> <div id="instructions"> Controls:<br> WASD - Move tank<br> Mouse - Aim turret<br> Space - Fire </div> <button id="nextRound" class="button">Next Round</button> <button id="restart" class="button">Restart Game</button> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const nextRoundBtn = document.getElementById('nextRound'); const restartBtn = document.getElementById('restart'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Load images const fieldImg = new Image(); fieldImg.src = 'field.png'; const bodyImg = new Image(); bodyImg.src = 'body.png'; const turretImg = new Image(); turretImg.src = 'turret.png'; const enemyImg = new Image(); enemyImg.src = 'enemy.png'; // Audio const playerFireSound = new Audio('fire.mp3'); const enemyFireSound = new Audio('fire2.mp3'); // Game state let currentRound = 1; let gameOver = false; let enemies = []; let bullets = []; let playerBullets = []; let items = []; // Tank properties const player = { x: canvas.width/2, y: canvas.height/2, speed: 5, angle: 0, turretAngle: 0, width: 60, height: 80, health: 1000, maxHealth: 1000 }; class Enemy { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.health = 1000; this.maxHealth = 1000; this.speed = 2; this.lastShot = 0; this.shootInterval = 2000; this.angle = 0; } update() { this.angle = Math.atan2(player.y - this.y, player.x - this.x); this.x += Math.cos(this.angle) * this.speed * 0.5; this.y += Math.sin(this.angle) * this.speed * 0.5; this.x = Math.max(0, Math.min(canvas.width, this.x)); this.y = Math.max(0, Math.min(canvas.height, this.y)); const now = Date.now(); if (now - this.lastShot > this.shootInterval) { this.shoot(); this.lastShot = now; } } shoot() { enemyFireSound.currentTime = 0; enemyFireSound.play(); bullets.push({ x: this.x, y: this.y, angle: this.angle, speed: 5, isEnemy: true }); } } // Draw background pattern function drawBackground() { const pattern = ctx.createPattern(fieldImg, 'repeat'); ctx.fillStyle = pattern; ctx.fillRect(0, 0, canvas.width, canvas.height); } // Game controls const keys = {}; let mouseX = 0; let mouseY = 0; let lastShot = 0; const shootInterval = 1000; document.addEventListener('keydown', (e) => { keys[e.key] = true; }); document.addEventListener('keyup', (e) => { keys[e.key] = false; }); canvas.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }); function fireBullet() { const now = Date.now(); if (now - lastShot > shootInterval && keys[' ']) { playerFireSound.currentTime = 0; playerFireSound.play(); playerBullets.push({ x: player.x, y: player.y, angle: player.turretAngle, speed: 10 }); lastShot = now; } } function initRound() { enemies = []; for(let i = 0; i < 5 * currentRound; i++) { enemies.push(new Enemy()); } player.health = player.maxHealth; bullets = []; playerBullets = []; items = []; } function spawnHealthItem(x, y) { items.push({ x: x, y: y, width: 20, height: 20 }); } function updateGame() { if(gameOver) return; if(keys['w']) player.y = Math.max(player.y - player.speed, player.height/2); if(keys['s']) player.y = Math.min(player.y + player.speed, canvas.height - player.height/2); if(keys['a']) player.x = Math.max(player.x - player.speed, player.width/2); if(keys['d']) player.x = Math.min(player.x + player.speed, canvas.width - player.width/2); player.turretAngle = Math.atan2(mouseY - player.y, mouseX - player.x); if(keys[' ']) fireBullet(); enemies.forEach(enemy => enemy.update()); // Update bullets and collision detection playerBullets = playerBullets.filter(bullet => { bullet.x += Math.cos(bullet.angle) * bullet.speed; bullet.y += Math.sin(bullet.angle) * bullet.speed; enemies = enemies.filter(enemy => { const dist = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y); if(dist < 30) { enemy.health -= enemy.maxHealth / 2; if(enemy.health <= 0) { spawnHealthItem(enemy.x, enemy.y); return false; } return true; } return true; }); return bullet.x >= 0 && bullet.x <= canvas.width && bullet.y >= 0 && bullet.y <= canvas.height; }); bullets = bullets.filter(bullet => { bullet.x += Math.cos(bullet.angle) * bullet.speed; bullet.y += Math.sin(bullet.angle) * bullet.speed; const dist = Math.hypot(bullet.x - player.x, bullet.y - player.y); if(dist < 30) { player.health -= 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(currentRound < 10) { nextRoundBtn.style.display = 'block'; } else { gameOver = true; restartBtn.style.display = 'block'; } } } function drawHealthBar(x, y, health, maxHealth, width, height, color) { const barX = x - width/2; const barY = y - 50; ctx.fillStyle = '#333'; ctx.fillRect(barX, barY, width, height); ctx.fillStyle = color; ctx.fillRect(barX, barY, width * (health/maxHealth), height); } function drawGame() { drawBackground(); // Draw player ctx.save(); ctx.translate(player.x, player.y); ctx.drawImage(bodyImg, -player.width/2, -player.height/2, player.width, player.height); ctx.rotate(player.turretAngle); ctx.drawImage(turretImg, -player.width/2, -player.height/2, player.width, player.height); ctx.restore(); // Draw player health bar drawHealthBar(canvas.width/2, 30, player.health, player.maxHealth, 200, 20, 'green'); // Draw enemies enemies.forEach(enemy => { ctx.save(); ctx.translate(enemy.x, enemy.y); ctx.rotate(enemy.angle); ctx.drawImage(enemyImg, -30, -40, 60, 80); ctx.restore(); drawHealthBar(enemy.x, enemy.y, enemy.health, enemy.maxHealth, 60, 5, 'red'); }); // Draw bullets ctx.fillStyle = 'yellow'; [...playerBullets, ...bullets].forEach(bullet => { ctx.beginPath(); ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2); ctx.fill(); }); // Draw items ctx.fillStyle = 'green'; items.forEach(item => { ctx.beginPath(); ctx.arc(item.x, item.y, 10, 0, Math.PI * 2); ctx.fill(); }); // Draw round number ctx.fillStyle = 'white'; ctx.font = '24px Arial'; ctx.fillText(`Round ${currentRound}/10`, 10, 30); } function gameLoop() { updateGame(); drawGame(); requestAnimationFrame(gameLoop); } nextRoundBtn.addEventListener('click', () => { currentRound++; nextRoundBtn.style.display = 'none'; initRound(); }); restartBtn.addEventListener('click', () => { currentRound = 1; gameOver = false; restartBtn.style.display = 'none'; initRound(); }); Promise.all([ new Promise(resolve => fieldImg.onload = resolve), new Promise(resolve => bodyImg.onload = resolve), new Promise(resolve => turretImg.onload = resolve), new Promise(resolve => enemyImg.onload = resolve) ]).then(() => { initRound(); gameLoop(); }); window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html>