Update index.html

index.html

@@ -7,6 +7,7 @@
             margin: 0;
             overflow: hidden;
             background: #333;
+            font-family: Arial;
         }
         #gameCanvas {
             background-repeat: repeat;
@@ -19,7 +20,16 @@
             background: rgba(0,0,0,0.7);
             padding: 10px;
             border-radius: 5px;
-            font-family: Arial;
+            z-index: 1000;
+        }
+        #weaponInfo {
+            position: fixed;
+            top: 100px;
+            right: 10px;
+            color: white;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
             z-index: 1000;
         }
         .button {
@@ -43,9 +53,11 @@
     <div id="instructions">
         Controls:<br>
         WASD - Move tank<br>
-        Mouse - Aim turret<br>
-        Space - Fire
+        Mouse - Aim<br>
+        Space - Fire<br>
+        R - Switch Weapon
     </div>
+    <div id="weaponInfo">Current Weapon: Cannon</div>
     <button id="nextRound" class="button">Next Round</button>
     <button id="restart" class="button">Restart Game</button>
     <canvas id="gameCanvas"></canvas>
@@ -55,48 +67,64 @@
         const ctx = canvas.getContext('2d');
         const nextRoundBtn = document.getElementById('nextRound');
         const restartBtn = document.getElementById('restart');
+        const weaponInfo = document.getElementById('weaponInfo');
 
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
 
         // Load images
-        const fieldImg = new Image();
-        fieldImg.src = 'field.png';
+        const backgroundImg = new Image();
+        backgroundImg.src = 'city.png';
 
-        const bodyImg = new Image();
-        bodyImg.src = 'body.png';
+        const playerImg = new Image();
+        playerImg.src = 'player.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');
+        const fireSound = new Audio('firemn.ogg');
 
         // Game state
         let currentRound = 1;
         let gameOver = false;
+        let currentWeapon = 'cannon';
         let enemies = [];
         let bullets = [];
-        let playerBullets = [];
         let items = [];
+        let lastShot = 0;
+
+        const weapons = {
+            cannon: {
+                fireRate: 1000,
+                damage: 0.5,
+                bulletSize: 5
+            },
+            machinegun: {
+                fireRate: 200,
+                damage: 0.05,
+                bulletSize: 2
+            }
+        };
 
-        // Tank properties
+        // Player
         const player = {
             x: canvas.width/2,
             y: canvas.height/2,
             speed: 5,
             angle: 0,
-            turretAngle: 0,
-            width: 60,
-            height: 80,
+            width: 50,
+            height: 50,
             health: 1000,
             maxHealth: 1000
         };
 
+        function drawBackground() {
+            const pattern = ctx.createPattern(backgroundImg, 'repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
         class Enemy {
             constructor() {
                 this.x = Math.random() * canvas.width;
@@ -107,16 +135,27 @@
                 this.lastShot = 0;
                 this.shootInterval = 2000;
                 this.angle = 0;
+                this.moveAngle = Math.random() * Math.PI * 2;
             }
 
             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;
+                // Movement
+                this.x += Math.cos(this.moveAngle) * this.speed;
+                this.y += Math.sin(this.moveAngle) * this.speed;
+
+                // Bounds check
+                if(this.x < 0 || this.x > canvas.width) this.moveAngle = Math.PI - this.moveAngle;
+                if(this.y < 0 || this.y > canvas.height) this.moveAngle = -this.moveAngle;
 
-                this.x = Math.max(0, Math.min(canvas.width, this.x));
-                this.y = Math.max(0, Math.min(canvas.height, this.y));
+                // Random direction change
+                if(Math.random() < 0.02) {
+                    this.moveAngle = Math.random() * Math.PI * 2;
+                }
+
+                // Aim at player
+                this.angle = Math.atan2(player.y - this.y, player.x - this.x);
 
+                // Shooting
                 const now = Date.now();
                 if (now - this.lastShot > this.shootInterval) {
                     this.shoot();
@@ -125,134 +164,114 @@
             }
 
             shoot() {
-                enemyFireSound.currentTime = 0;
-                enemyFireSound.play();
+                fireSound.cloneNode().play();
                 bullets.push({
                     x: this.x,
                     y: this.y,
                     angle: this.angle,
                     speed: 5,
-                    isEnemy: true
+                    isEnemy: true,
+                    size: 3
                 });
             }
         }
 
-        // Draw background pattern
-        function drawBackground() {
-            const pattern = ctx.createPattern(fieldImg, 'repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        function initRound() {
+            enemies = [];
+            for(let i = 0; i < 5 * currentRound; i++) {
+                enemies.push(new Enemy());
+            }
+            player.health = player.maxHealth;
+            bullets = [];
+            items = [];
         }
 
-        // 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;
+            if(e.key.toLowerCase() === 'r') {
+                currentWeapon = currentWeapon === 'cannon' ? 'machinegun' : 'cannon';
+                weaponInfo.textContent = `Current Weapon: ${currentWeapon.charAt(0).toUpperCase() + currentWeapon.slice(1)}`;
+            }
         });
 
         canvas.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
+            player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
         });
 
         function fireBullet() {
+            const weapon = weapons[currentWeapon];
             const now = Date.now();
-            if (now - lastShot > shootInterval && keys[' ']) {
-                playerFireSound.currentTime = 0;
-                playerFireSound.play();
-                playerBullets.push({
+            if (keys[' '] && now - lastShot > weapon.fireRate) {
+                fireSound.cloneNode().play();
+                bullets.push({
                     x: player.x,
                     y: player.y,
-                    angle: player.turretAngle,
-                    speed: 10
+                    angle: player.angle,
+                    speed: 10,
+                    isEnemy: false,
+                    damage: weapon.damage,
+                    size: weapon.bulletSize
                 });
                 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
-            });
-        }
+        const keys = {};
+        document.addEventListener('keydown', e => keys[e.key] = true);
+        document.addEventListener('keyup', e => keys[e.key] = false);
 
         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 movement
+            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.turretAngle = Math.atan2(mouseY - player.y, mouseX - player.x);
+            // Keep player in bounds
+            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));
 
-            if(keys[' ']) fireBullet();
+            fireBullet();
 
+            // Update enemies
             enemies.forEach(enemy => enemy.update());
 
-            // Update bullets and collision detection
-            playerBullets = playerBullets.filter(bullet => {
+            // Update bullets
+            bullets = bullets.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;
+                if(!bullet.isEnemy) {
+                    enemies = enemies.filter(enemy => {
+                        const dist = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
+                        if(dist < 30) {
+                            enemy.health -= enemy.maxHealth * bullet.damage;
+                            if(enemy.health <= 0) {
+                                spawnHealthItem(enemy.x, enemy.y);
+                                return false;
+                            }
+                            return true;
                         }
                         return true;
+                    });
+                } else {
+                    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 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;
             });
 
+            // Update items
             items = items.filter(item => {
                 const dist = Math.hypot(item.x - player.x, item.y - player.y);
                 if(dist < 30) {
@@ -262,6 +281,7 @@
                 return true;
             });
 
+            // Check win condition
             if(enemies.length === 0) {
                 if(currentRound < 10) {
                     nextRoundBtn.style.display = 'block';
@@ -272,24 +292,25 @@
             }
         }
 
+        function spawnHealthItem(x, y) {
+            items.push({x, y});
+        }
+
         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.fillRect(x - width/2, y - height/2, width, height);
             ctx.fillStyle = color;
-            ctx.fillRect(barX, barY, width * (health/maxHealth), height);
+            ctx.fillRect(x - width/2, y - height/2, 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.rotate(player.angle);
+            ctx.drawImage(playerImg, -player.width/2, -player.height/2, player.width, player.height);
             ctx.restore();
 
             // Draw player health bar
@@ -300,20 +321,20 @@
                 ctx.save();
                 ctx.translate(enemy.x, enemy.y);
                 ctx.rotate(enemy.angle);
-                ctx.drawImage(enemyImg, -30, -40, 60, 80);
+                ctx.drawImage(enemyImg, -25, -25, 50, 50);
                 ctx.restore();
-                drawHealthBar(enemy.x, enemy.y, enemy.health, enemy.maxHealth, 60, 5, 'red');
+                drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 50, 5, 'red');
             });
 
             // Draw bullets
-            ctx.fillStyle = 'yellow';
-            [...playerBullets, ...bullets].forEach(bullet => {
+            bullets.forEach(bullet => {
                 ctx.beginPath();
-                ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
+                ctx.fillStyle = bullet.isEnemy ? 'red' : 'yellow';
+                ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
                 ctx.fill();
             });
 
-            // Draw items
+            // Draw health items
             ctx.fillStyle = 'green';
             items.forEach(item => {
                 ctx.beginPath();
@@ -347,9 +368,8 @@
         });
 
         Promise.all([
-            new Promise(resolve => fieldImg.onload = resolve),
-            new Promise(resolve => bodyImg.onload = resolve),
-            new Promise(resolve => turretImg.onload = resolve),
+            new Promise(resolve => backgroundImg.onload = resolve),
+            new Promise(resolve => playerImg.onload = resolve),
             new Promise(resolve => enemyImg.onload = resolve)
         ]).then(() => {
             initRound();