Tank Battle

body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #222; color: white; font-family: Arial, sans-serif; } #menu { text-align: center; } #menu h1 { margin-bottom: 30px; font-size: 3em; } #menu button { display: block; width: 200px; padding: 15px; margin: 15px auto; font-size: 1.2em; cursor: pointer; background-color: #555; color: white; border: none; border-radius: 5px; transition: background-color 0.3s; } #menu button:hover { background-color: #777; } canvas { border: 1px solid #fff; background-color: #333; /* display: block; is handled by JS now */ } export function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } export function checkCollision(rect1, rect2) { return ( rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y ); } export class InputHandler { constructor() { this.keys = new Set(); window.addEventListener('keydown', (e) => { this.keys.add(e.code); // Prevent default browser behavior if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space', 'Numpad0', 'KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(e.code)) { e.preventDefault(); } }); window.addEventListener('keyup', (e) => { this.keys.delete(e.code); }); } isKeyPressed(keyCode) { return this.keys.has(keyCode); } } export class Particle { constructor(x, y, color, game) { this.game = game; this.x = x; this.y = y; this.size = Math.random() * 3 + 1; this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; this.color = color; this.life = 30; // Lifespan in frames this.maxLife = 30; this.active = true; } update() { this.x += this.speedX; this.y += this.speedY; this.life--; if (this.life <= 0) { this.active = false; } } draw(ctx) { ctx.save(); ctx.globalAlpha = this.life / this.maxLife; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } } // Simple Audio Player // Ensure audio files exist at the specified paths in index.html export const audioManager = { shoot: document.getElementById('shootSound'), ricochet: document.getElementById('ricochetSound'), hit: document.getElementById('hitSound'), play(sound) { const audioElement = this[sound]; if (audioElement) { audioElement.currentTime = 0; // Rewind to start audioElement.play().catch(error => { // Autoplay was prevented, handle if necessary // console.warn("Audio play prevented:", error); }); } else { console.warn(`Sound "${sound}" not found.`); } } }; import { audioManager } from './audio.js'; export class Bullet { constructor(x, y, angle, speed, size, color, owner, game) { this.game = game; // Reference to the game instance this.x = x; this.y = y; this.angle = angle; this.speed = speed; this.size = size; this.color = color; this.owner = owner; // Reference to the tank that fired it this.width = size; this.height = size; this.dx = Math.cos(angle) * speed; this.dy = Math.sin(angle) * speed; this.active = true; // Flag to mark for removal this.ricochetCount = 0; this.maxRicochets = 8; } update(canvas) { if (!this.active) return; let ricocheted = false; let impactX = this.x + this.size / 2; let impactY = this.y + this.size / 2; // Wall collision (ricochet) if (this.x <= 0 || this.x + this.size >= canvas.width) { this.dx *= -1; this.x = this.x <= 0 ? 0 : canvas.width - this.size; // Adjust position slightly impactX = this.x <= 0 ? 0 : canvas.width; // Impact point X impactY = this.y + this.size / 2; ricocheted = true; } if (this.y <= 0 || this.y + this.size >= canvas.height) { this.dy *= -1; this.y = this.y <= 0 ? 0 : canvas.height - this.size; // Adjust position slightly impactX = this.x + this.size / 2; impactY = this.y <= 0 ? 0 : canvas.height; // Impact point Y ricocheted = true; } if (ricocheted) { this.ricochetCount++; audioManager.play('ricochet'); this.game.addParticles(impactX, impactY, 5, 'orange'); // Add explosion particles if (this.ricochetCount >= this.maxRicochets) { this.active = false; this.game.addParticles(this.x + this.size / 2, this.y + this.size / 2, 8, 'grey'); // Fizzle particles } } // Update position after potential ricochet adjustments this.x += this.dx; this.y += this.dy; // Deactivate if somehow still out of bounds (safety net) if (this.x < -this.size * 2 || this.x > canvas.width + this.size || this.y < -this.size * 2 || this.y > canvas.height + this.size) { this.active = false; } } draw(ctx) { if (!this.active) return; ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.size, this.size); } } import { Bullet } from './bullet.js'; import { audioManager } from './audio.js'; export class Tank { constructor(x, y, color, controls, game) { this.game = game; this.initialX = x; this.initialY = y; this.x = x; this.y = y; this.width = 40; this.height = 40; this.color = color; this.controls = controls; // { up, down, left, right, fire } this.speed = 2; this.rotationSpeed = 0.05; this.angle = -Math.PI / 2; // Start facing up this.barrelLength = 30; this.barrelWidth = 8; this.shootCooldown = 500; // milliseconds this.lastShotTime = 0; this.alive = true; } update(input, canvas) { if (!this.alive) return; // Rotation if (input.isKeyPressed(this.controls.left)) { this.angle -= this.rotationSpeed; } if (input.isKeyPressed(this.controls.right)) { this.angle += this.rotationSpeed; } // Movement const moveSpeed = input.isKeyPressed(this.controls.up) ? this.speed : input.isKeyPressed(this.controls.down) ? -this.speed / 1.5 : 0; if (moveSpeed !== 0) { const moveX = Math.cos(this.angle) * moveSpeed; const moveY = Math.sin(this.angle) * moveSpeed; const nextX = this.x + moveX; const nextY = this.y + moveY; // Basic boundary collision if (nextX >= 0 && nextX + this.width <= canvas.width) { this.x = nextX; } if (nextY >= 0 && nextY + this.height <= canvas.height) { this.y = nextY; } } // Shooting const now = Date.now(); if (input.isKeyPressed(this.controls.fire) && now - this.lastShotTime > this.shootCooldown) { this.shoot(); this.lastShotTime = now; } } shoot() { const barrelEndX = this.x + this.width / 2 + Math.cos(this.angle) * (this.barrelLength); const barrelEndY = this.y + this.height / 2 + Math.sin(this.angle) * (this.barrelLength); const bullet = new Bullet( barrelEndX - 3, // Center bullet roughly at barrel end barrelEndY - 3, this.angle, 5, // Bullet speed 6, // Bullet size this.color, this, this.game // Pass game reference to bullet ); this.game.addBullet(bullet); // Add bullet to the game's central list audioManager.play('shoot'); } draw(ctx) { if (!this.alive) return; ctx.save(); // Translate context to the center of the tank for rotation ctx.translate(this.x + this.width / 2, this.y + this.height / 2); ctx.rotate(this.angle); // Draw tank body (centered at origin after translation) ctx.fillStyle = this.color; ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); // Draw barrel ctx.fillStyle = 'grey'; ctx.fillRect( 0, // Start barrel from the center -this.barrelWidth / 2, this.barrelLength, this.barrelWidth ); ctx.restore(); // Restore context to original state } hit() { if (!this.alive) return; // Prevent multiple hits while respawning this.alive = false; audioManager.play('hit'); this.game.addParticles(this.x + this.width / 2, this.y + this.height / 2, 20, this.color); // Tank explosion this.game.handleTankDeath(this); } respawn(x, y) { this.x = x; this.y = y; this.angle = -Math.PI / 2; // Reset angle this.alive = true; } } import { Tank } from './tank.js'; import { InputHandler } from './input.js'; import { getRandomInt, checkCollision } from './utils.js'; import { Particle } from './particle.js'; import { audioManager } from './audio.js'; // Import audio manager export class Game { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.width = canvas.width; this.height = canvas.height; this.input = new InputHandler(); this.bullets = []; this.particles = []; // Array for particles this.scores = { player1: 0, player2: 0 }; this.isRunning = false; // Game state flag this.animationFrameId = null; // To control the loop this.player1 = new Tank(100, this.height / 2 - 20, 'blue', { up: 'KeyW', down: 'KeyS', left: 'KeyA', right: 'KeyD', fire: 'Space' }, this); this.player2 = new Tank(this.width - 140, this.height / 2 - 20, 'red', { up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight', fire: 'Numpad0' // Changed fire key }, this); // No gameObjects array needed if we handle players directly } start() { if (this.isRunning) return; this.isRunning = true; // Reset scores and positions if needed, or handle in a separate reset method this.scores = { player1: 0, player2: 0 }; this.player1.respawn(100, this.height / 2 - 20); this.player2.respawn(this.width - 140, this.height / 2 - 20); this.bullets = []; this.particles = []; this.loop(); // Start the animation loop } stop() { this.isRunning = false; if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; } // Optionally show menu again or display final score } addBullet(bullet) { this.bullets.push(bullet); } addParticles(x, y, count, color) { for (let i = 0; i < count; i++) { this.particles.push(new Particle(x, y, color, this)); } } update() { if (!this.isRunning) return; this.player1.update(this.input, this.canvas); this.player2.update(this.input, this.canvas); // Update bullets and check collisions for (let i = this.bullets.length - 1; i >= 0; i--) { const bullet = this.bullets[i]; bullet.update(this.canvas); // Check collision with tanks [this.player1, this.player2].forEach((tank) => { if (bullet.active && tank.alive && bullet.owner !== tank) { const tankHitbox = { x: tank.x, y: tank.y, width: tank.width, height: tank.height }; const bulletHitbox = { x: bullet.x, y: bullet.y, width: bullet.size, height: bullet.size }; if (checkCollision(bulletHitbox, tankHitbox)) { tank.hit(); // Hit logic now includes sound and particles bullet.active = false; // Deactivate bullet on hit this.updateScore(bullet.owner); } } }); // Remove inactive bullets if (!bullet.active) { this.bullets.splice(i, 1); } } // Update particles for (let i = this.particles.length - 1; i >= 0; i--) { const particle = this.particles[i]; particle.update(); if (!particle.active) { this.particles.splice(i, 1); } } } draw() { if (!this.isRunning) return; // Clear canvas this.ctx.clearRect(0, 0, this.width, this.height); // Draw background this.ctx.fillStyle = '#333'; this.ctx.fillRect(0, 0, this.width, this.height); // Draw tanks this.player1.draw(this.ctx); this.player2.draw(this.ctx); // Draw bullets this.bullets.forEach(bullet => bullet.draw(this.ctx)); // Draw particles this.particles.forEach(particle => particle.draw(this.ctx)); // Draw scores this.drawScores(); } drawScores() { this.ctx.fillStyle = 'white'; this.ctx.font = '24px Arial'; this.ctx.textAlign = 'left'; this.ctx.fillText(`Player 1: ${this.scores.player1}`, 20, 40); this.ctx.textAlign = 'right'; this.ctx.fillText(`Player 2: ${this.scores.player2}`, this.width - 20, 40); } updateScore(winnerTank) { if (winnerTank === this.player1) { this.scores.player1++; } else if (winnerTank === this.player2) { this.scores.player2++; } } handleTankDeath(deadTank) { // Respawn the tank after a short delay setTimeout(() => { // Ensure the game is still running before respawning if (!this.isRunning) return; let respawnX, respawnY, collision; const safeMargin = 50; // Margin from walls and other tank const otherTank = deadTank === this.player1 ? this.player2 : this.player1; do { collision = false; respawnX = getRandomInt(safeMargin, this.width - deadTank.width - safeMargin); respawnY = getRandomInt(safeMargin, this.height - deadTank.height - safeMargin); // Check collision with the other tank if it's alive const respawnRect = { x: respawnX, y: respawnY, width: deadTank.width, height: deadTank.height }; if (otherTank.alive) { const otherTankRect = { x: otherTank.x, y: otherTank.y, width: otherTank.width, height: otherTank.height }; if (checkCollision(respawnRect, otherTankRect)) { collision = true; } } } while (collision); deadTank.respawn(respawnX, respawnY); }, 1500); // 1.5 second respawn delay } loop() { if (!this.isRunning) return; // Stop loop if game state changes this.update(); this.draw(); this.animationFrameId = requestAnimationFrame(() => this.loop()); } } import { Game } from './game.js'; const canvas = document.getElementById('gameCanvas'); const menu = document.getElementById('menu'); const startButton = document.getElementById('startButton'); const quitButton = document.getElementById('quitButton'); // Set canvas dimensions (adjust as needed) canvas.width = 800; canvas.height = 600; let game = null; // Initialize game variable startButton.addEventListener('click', () => { menu.style.display = 'none'; // Hide menu canvas.style.display = 'block'; // Show canvas // Create a new game instance only if one doesn't exist or needs reset if (!game) { game = new Game(canvas); } game.start(); // Start or restart the game logic and loop }); quitButton.addEventListener('click', () => { // In a browser context, "quitting" usually means closing the tab/window. // We can stop the game and optionally show the menu again or a message. if (game) { game.stop(); } menu.style.display = 'block'; // Show menu again canvas.style.display = 'none'; // Hide canvas // Or display a "Thanks for playing!" message in the menu div // menu.innerHTML = '

Thanks for playing!

You can close the tab now.

'; }); // Optional: Handle window resize (consider implications for menu/game state) // window.addEventListener('resize', () => { // if (canvas.style.display === 'block') { // Only resize if game is visible // canvas.width = 800; // Or adapt to window size // canvas.height = 600; // if (game) { // game.width = canvas.width; // game.height = canvas.height; // } // } // // May need to reposition elements or adjust logic on resize // }); **Important Notes:** 1. **Audio Files:** You need to create an `audio` folder in your project root and place three sound files named `shoot.wav`, `ricochet.wav`, and `hit.wav` inside it. You can use other formats like `.mp3` or `.ogg` if you prefer, just update the `src` attributes in `index.html` accordingly. 2. **Sound Autoplay:** Browsers often block audio from playing automatically until the user interacts with the page (like clicking the "Start Game" button). The current setup tries to play sounds immediately, which should work after the initial click, but be aware of potential browser restrictions. 3. **"Quit" Button:** The "Quit" button currently stops the game loop and shows the menu again. Closing the browser tab is the standard way to fully "quit" a web page. 4. **Particles:** The particle effects are simple circles fading out. You can customize their appearance, number, and lifespan in `js/particle.js` and where `game.addParticles` is called.