BlockTanks

I'll create a simplified but appealing BlockTanks game with smooth gameplay and UI. Here's the initial setup: BlockTanks

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background: #222; color: white; height: 100vh; overflow: hidden; } #game-container { position: relative; width: 100%; height: 100%; } .screen { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg, #1a1a2e, #16213e); transition: opacity 0.3s ease; } .hidden { opacity: 0; pointer-events: none; } h1 { font-size: 4rem; margin-bottom: 2rem; text-shadow: 0 0 10px rgba(0, 150, 255, 0.7); } button { background: rgba(0, 150, 255, 0.8); color: white; border: none; padding: 15px 30px; margin: 10px; font-size: 1.2rem; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; min-width: 200px; } button:hover { background: rgba(0, 180, 255, 1); transform: scale(1.05); } #game-canvas { background: #111; border: 2px solid #333; } #hud { position: absolute; top: 10px; left: 10px; display: flex; gap: 20px; } #health-bar { width: 200px; height: 20px; background: #333; border-radius: 3px; overflow: hidden; } #health-bar::after { content: ''; display: block; height: 100%; width: 100%; background: linear-gradient(to right, #ff3333, #33ff33); } #controls-screen ul { margin: 2rem 0; list-style: none; font-size: 1.2rem; } #controls-screen li { margin: 0.5rem 0; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 3px; } class Game { constructor() { this.canvas = document.getElementById('game-canvas'); this.ctx = this.canvas.getContext('2d'); this.screenWidth = window.innerWidth; this.screenHeight = window.innerHeight; this.canvas.width = this.screenWidth; this.canvas.height = this.screenHeight; this.gameState = 'menu'; this.setupEventListeners(); this.initGame(); } setupEventListeners() { document.getElementById('start-game').addEventListener('click', () => { this.showScreen('game'); this.gameState = 'playing'; this.lastTime = 0; requestAnimationFrame(this.gameLoop.bind(this)); }); document.getElementById('controls-btn').addEventListener('click', () => { this.showScreen('controls'); }); document.getElementById('back-to-menu').addEventListener('click', () => { this.showScreen('menu'); }); } showScreen(screenName) { document.querySelectorAll('.screen').forEach(screen => { screen.classList.add('hidden'); }); document.getElementById(`${screenName}-screen`).classList.remove('hidden'); } initGame() { this.player = { x: this.screenWidth / 2, y: this.screenHeight / 2, width: 40, height: 60, color: '#3498db', speed: 5, health: 100, ammo: 10, score: 0 }; this.bullets = []; this.enemies = []; this.particles = []; this.keys = {}; window.addEventListener('keydown', (e) => { this.keys[e.key] = true; }); window.addEventListener('keyup', (e) => { this.keys[e.key] = false; }); this.canvas.addEventListener('click', (e) => { if (this.gameState === 'playing' && this.player.ammo > 0) { this.shootBullet(e.clientX, e.clientY); } }); this.spawnEnemy(); } gameLoop(timestamp) { if (this.gameState !== 'playing') return; const deltaTime = timestamp - this.lastTime; this.lastTime = timestamp; this.update(deltaTime); this.render(); requestAnimationFrame(this.gameLoop.bind(this)); } update(deltaTime) { // Player movement if (this.keys['w'] || this.keys['ArrowUp']) this.player.y -= this.player.speed; if (this.keys['s'] || this.keys['ArrowDown']) this.player.y += this.player.speed; if (this.keys['a'] || this.keys['ArrowLeft']) this.player.x -= this.player.speed; if (this.keys['d'] || this.keys['ArrowRight']) this.player.x += this.player.speed; // Keep player in bounds this.player.x = Math.max(0, Math.min(this.screenWidth - this.player.width, this.player.x)); this.player.y = Math.max(0, Math.min(this.screenHeight - this.player.height, this.player.y)); // Update bullets this.bullets.forEach((bullet, index) => { bullet.x += bullet.dx * bullet.speed; bullet.y += bullet.dy * bullet.speed; // Remove bullets that are out of bounds if (bullet.x < 0 || bullet.x > this.screenWidth || bullet.y < 0 || bullet.y > this.screenHeight) { this.bullets.splice(index, 1); } }); // Update HUD document.getElementById('ammo-count').textContent = `Ammo: ${this.player.ammo}`; document.getElementById('score').textContent = `Score: ${this.player.score}`; document.getElementById('health-bar').style.width = `${this.player.health}%`; } render() { // Clear canvas this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // Draw player this.ctx.fillStyle = this.player.color; this.ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height); // Draw tank barrel (always points to mouse) this.ctx.save(); this.ctx.translate(this.player.x + this.player.width / 2, this.player.y + this.player.height / 2); this.ctx.rotate(Math.atan2(this.mouseY - (this.player.y + this.player.height / 2), this.mouseX - (this.player.x + this.player.width / 2))); this.ctx.fillStyle = '#555'; this.ctx.fillRect(0, -5, 30, 10); this.ctx.restore(); // Draw bullets this.ctx.fillStyle = '#f1c40f'; this.bullets.forEach(bullet => { this.ctx.beginPath(); this.ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI * 2); this.ctx.fill(); }); } shootBullet(targetX, targetY) { if (this.player.ammo <= 0) return; const angle = Math.atan2( targetY - (this.player.y + this.player.height / 2), targetX - (this.player.x + this.player.width / 2) ); this.bullets.push({ x: this.player.x + this.player.width / 2, y: this.player.y + this.player.height / 2, dx: Math.cos(angle), dy: Math.sin(angle), speed: 10 }); this.player.ammo--; } spawnEnemy() { // Simple enemy spawning logic setInterval(() => { if (this.gameState !== 'playing') return; const side = Math.floor(Math.random() * 4); let x, y; switch (side) { case 0: // top x = Math.random() * this.screenWidth; y = -50; break; case 1: // right x = this.screenWidth + 50; y = Math.random() * this.screenHeight; break; case 2: // bottom x = Math.random() * this.screenWidth; y = this.screenHeight + 50; break; case 3: // left x = -50; y = Math.random() * this.screenHeight; break; } this.enemies.push({ x, y, width: 40, height: 60, color: '#e74c3c', speed: 2, health: 100 }); }, 2000); } } // Initialize game when DOM is loaded document.addEventListener('DOMContentLoaded', () => { const game = new Game(); }); This sets up a basic BlockTanks game with: - Main menu with start/controls buttons - Game screen with tank controls (WASD to move, mouse to aim, click to shoot) - HUD showing health, ammo, and score - Enemy spawning system - Smooth animations and transitions The game features responsive design and will adapt to different screen sizes. The tank's barrel always points toward the mouse cursor for aiming.

BLOCKTANKS

CONTROLS