Update index.html

index.html

@@ -24,13 +24,14 @@
         }
         #weaponInfo {
             position: fixed;
-            top: 100px;
+            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;
@@ -83,7 +84,9 @@
         enemyImg.src = 'enemy.png';
 
         // Audio
-        const fireSound = new Audio('firemn.ogg');
+        const cannonSound = new Audio('firemn.ogg');
+        const machinegunSound = new Audio('firemg.ogg');
+        const enemyFireSound = new Audio('firemg.ogg');
 
         // Game state
         let currentRound = 1;
@@ -97,13 +100,15 @@
         const weapons = {
             cannon: {
                 fireRate: 1000,
-                damage: 0.5,
-                bulletSize: 5
+                damage: 0.50,
+                bulletSize: 5,
+                sound: cannonSound
             },
             machinegun: {
                 fireRate: 200,
                 damage: 0.05,
-                bulletSize: 2
+                bulletSize: 2,
+                sound: machinegunSound
             }
         };
 
@@ -113,18 +118,12 @@
             y: canvas.height/2,
             speed: 5,
             angle: 0,
-            width: 50,
-            height: 50,
+            width: 132,
+            height: 72,
             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;
@@ -136,26 +135,23 @@
                 this.shootInterval = 2000;
                 this.angle = 0;
                 this.moveAngle = Math.random() * Math.PI * 2;
+                this.width = 132;
+                this.height = 72;
             }
 
             update() {
-                // 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;
 
-                // 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();
@@ -164,7 +160,7 @@
             }
 
             shoot() {
-                fireSound.cloneNode().play();
+                enemyFireSound.cloneNode().play();
                 bullets.push({
                     x: this.x,
                     y: this.y,
@@ -176,6 +172,12 @@
             }
         }
 
+        function drawBackground() {
+            const pattern = ctx.createPattern(backgroundImg, 'repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
         function initRound() {
             enemies = [];
             for(let i = 0; i < 5 * currentRound; i++) {
@@ -201,10 +203,10 @@
             const weapon = weapons[currentWeapon];
             const now = Date.now();
             if (keys[' '] && now - lastShot > weapon.fireRate) {
-                fireSound.cloneNode().play();
+                weapon.sound.cloneNode().play();
                 bullets.push({
-                    x: player.x,
-                    y: player.y,
+                    x: player.x + Math.cos(player.angle) * 30,
+                    y: player.y + Math.sin(player.angle) * 30,
                     angle: player.angle,
                     speed: 10,
                     isEnemy: false,
@@ -222,22 +224,18 @@
         function updateGame() {
             if(gameOver) return;
 
-            // 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;
 
-            // 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));
 
             fireBullet();
 
-            // Update enemies
             enemies.forEach(enemy => enemy.update());
 
-            // Update bullets
             bullets = bullets.filter(bullet => {
                 bullet.x += Math.cos(bullet.angle) * bullet.speed;
                 bullet.y += Math.sin(bullet.angle) * bullet.speed;
@@ -245,7 +243,7 @@
                 if(!bullet.isEnemy) {
                     enemies = enemies.filter(enemy => {
                         const dist = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
-                        if(dist < 30) {
+                        if(dist < 40) {
                             enemy.health -= enemy.maxHealth * bullet.damage;
                             if(enemy.health <= 0) {
                                 spawnHealthItem(enemy.x, enemy.y);
@@ -257,7 +255,7 @@
                     });
                 } else {
                     const dist = Math.hypot(bullet.x - player.x, bullet.y - player.y);
-                    if(dist < 30) {
+                    if(dist < 40) {
                         player.health -= 100;
                         if(player.health <= 0) {
                             gameOver = true;
@@ -271,17 +269,15 @@
                        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) {
+                if(dist < 40) {
                     player.health = Math.min(player.health + 200, player.maxHealth);
                     return false;
                 }
                 return true;
             });
 
-            // Check win condition
             if(enemies.length === 0) {
                 if(currentRound < 10) {
                     nextRoundBtn.style.display = 'block';
@@ -306,27 +302,23 @@
         function drawGame() {
             drawBackground();
 
-            // Draw player
             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();
 
-            // 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, -25, -25, 50, 50);
+                ctx.drawImage(enemyImg, -enemy.width/2, -enemy.height/2, enemy.width, enemy.height);
                 ctx.restore();
-                drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 50, 5, 'red');
+                drawHealthBar(enemy.x, enemy.y - 50, enemy.health, enemy.maxHealth, 60, 5, 'red');
             });
 
-            // Draw bullets
             bullets.forEach(bullet => {
                 ctx.beginPath();
                 ctx.fillStyle = bullet.isEnemy ? 'red' : 'yellow';
@@ -334,7 +326,6 @@
                 ctx.fill();
             });
 
-            // Draw health items
             ctx.fillStyle = 'green';
             items.forEach(item => {
                 ctx.beginPath();
@@ -342,7 +333,6 @@
                 ctx.fill();
             });
 
-            // Draw round number
             ctx.fillStyle = 'white';
             ctx.font = '24px Arial';
             ctx.fillText(`Round ${currentRound}/10`, 10, 30);