Update index.html

index.html

@@ -67,7 +67,8 @@
         WASD - Move tank<br>
         Mouse - Aim<br>
         Space - Fire<br>
-        C - Switch Weapon
+        C - Switch Weapon<br>
+        R - Toggle Auto-fire
     </div>
     <div id="weaponInfo">Current Weapon: Cannon</div>
     <div id="countdown">3</div>
@@ -84,6 +85,7 @@
         const countdownEl = document.getElementById('countdown');
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
+        
         // Game state
         let currentRound = 1;
         let gameOver = false;
@@ -94,19 +96,22 @@
         let lastShot = 0;
         let isCountingDown = true;
         let countdownTime = 3;
+        let autoFire = false;
+      
         // Load assets
         const backgroundImg = new Image();
         backgroundImg.src = 'city.png';
         const playerImg = new Image();
         playerImg.src = 'player.png';
-        
         const enemyImg = new Image();
         enemyImg.src = 'enemy.png';
+
         // Audio setup
         const cannonSound = new Audio('firemn.ogg');
         const machinegunSound = new Audio('firemg.ogg');
         const enemyFireSound = new Audio('fireenemy.ogg');
         enemyFireSound.volume = 0.5;
+
         const weapons = {
             cannon: {
                 fireRate: 1000,
@@ -121,6 +126,7 @@
                 sound: machinegunSound
             }
         };
+
         // Player setup
         const player = {
             x: canvas.width/2,
@@ -132,6 +138,7 @@
             health: 1000,
             maxHealth: 1000
         };
+
         function startCountdown() {
             isCountingDown = true;
             countdownTime = 3;
@@ -147,6 +154,7 @@
                 countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
             }, 1000);
         }
+
         class Enemy {
             constructor() {
                 this.x = Math.random() * canvas.width;
@@ -163,6 +171,7 @@
                 this.moveInterval = Math.random() * 2000 + 1000;
                 this.moveAngle = Math.random() * Math.PI * 2;
             }
+
             update() {
                 if(isCountingDown) return;
                 const now = Date.now();
@@ -174,17 +183,21 @@
                 }
                 this.x += Math.cos(this.moveAngle) * this.speed;
                 this.y += Math.sin(this.moveAngle) * this.speed;
+                
                 // Bounds check
                 this.x = Math.max(this.width/2, Math.min(canvas.width - this.width/2, this.x));
                 this.y = Math.max(this.height/2, Math.min(canvas.height - this.height/2, this.y));
+                
                 // Aim at player
                 this.angle = Math.atan2(player.y - this.y, player.x - this.x);
+                
                 // Shooting
                 if (now - this.lastShot > this.shootInterval && !isCountingDown) {
                     this.shoot();
                     this.lastShot = now;
                 }
             }
+
             shoot() {
                 enemyFireSound.cloneNode().play();
                 bullets.push({
@@ -197,6 +210,7 @@
                 });
             }
         }
+
         function initRound() {
             enemies = [];
             for(let i = 0; i < 1 * currentRound; i++) {
@@ -207,23 +221,29 @@
             items = [];
             startCountdown();
         }
+
         document.addEventListener('keydown', (e) => {
             if(e.key.toLowerCase() === 'c') {
                 currentWeapon = currentWeapon === 'cannon' ? 'machinegun' : 'cannon';
                 weaponInfo.textContent = `Current Weapon: ${currentWeapon.charAt(0).toUpperCase() + currentWeapon.slice(1)}`;
+            } else if(e.key.toLowerCase() === 'r') {
+                autoFire = !autoFire;
             }
         });
+
         canvas.addEventListener('mousemove', (e) => {
             player.angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
         });
+
         const keys = {};
         document.addEventListener('keydown', e => keys[e.key] = true);
         document.addEventListener('keyup', e => keys[e.key] = false);
+
         function fireBullet() {
             if(isCountingDown) return;
             const weapon = weapons[currentWeapon];
             const now = Date.now();
-            if (keys[' '] && now - lastShot > weapon.fireRate) {
+            if ((keys[' '] || autoFire) && now - lastShot > weapon.fireRate) {
                 weapon.sound.cloneNode().play();
                 bullets.push({
                     x: player.x + Math.cos(player.angle) * 30,
@@ -237,6 +257,7 @@
                 lastShot = now;
             }
         }
+
         function updateGame() {
             if(gameOver) return;
             if(!isCountingDown) {
@@ -248,7 +269,9 @@
                 player.y = Math.max(player.height/2, Math.min(canvas.height - player.height/2, player.y));
                 fireBullet();
             }
+
             enemies.forEach(enemy => enemy.update());
+
             if(!isCountingDown) {
                 // Update bullets and collisions
                 bullets = bullets.filter(bullet => {
@@ -281,6 +304,7 @@
                     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) {
@@ -289,6 +313,7 @@
                     }
                     return true;
                 });
+
                 if(enemies.length === 0) {
                     if(currentRound < 10) {
                         nextRoundBtn.style.display = 'block';
@@ -299,27 +324,33 @@
                 }
             }
         }
+
         function spawnHealthItem(x, y) {
             items.push({x, y});
         }
+
         function drawHealthBar(x, y, health, maxHealth, width, height, color) {
             ctx.fillStyle = '#333';
             ctx.fillRect(x - width/2, y - height/2, width, height);
             ctx.fillStyle = color;
             ctx.fillRect(x - width/2, y - height/2, width * (health/maxHealth), height);
         }
+
         function drawGame() {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             const pattern = ctx.createPattern(backgroundImg, 'repeat');
             ctx.fillStyle = pattern;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
+
             // Draw all game objects
             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();
+
             drawHealthBar(canvas.width/2, 30, player.health, player.maxHealth, 200, 20, 'green');
+
             enemies.forEach(enemy => {
                 ctx.save();
                 ctx.translate(enemy.x, enemy.y);
@@ -328,54 +359,50 @@
                 ctx.restore();
                 drawHealthBar(enemy.x, enemy.y - 40, enemy.health, enemy.maxHealth, 60, 5, 'red');
             });
+
             bullets.forEach(bullet => {
                 ctx.beginPath();
                 ctx.fillStyle = bullet.isEnemy ? 'red' : 'yellow';
                 ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
                 ctx.fill();
             });
+
             items.forEach(item => {
                 ctx.beginPath();
                 ctx.fillStyle = 'green';
                 ctx.arc(item.x, item.y, 10, 0, Math.PI * 2);
                 ctx.fill();
             });
+
             ctx.fillStyle = 'white';
             ctx.font = '24px Arial';
             ctx.fillText(`Round ${currentRound}/10`, 10, 30);
+            
             if(isCountingDown) {
                 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
             }
         }
+
         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 => backgroundImg.onload = resolve),
-            new Promise(resolve => playerImg.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>
+            new Promise