Update index.html

index.html

@@ -67,8 +67,7 @@
         WASD - Move tank<br>
         Mouse - Aim<br>
         Space - Fire<br>
-        C - Switch Weapon<br>
-        R - Toggle Auto-fire
+        C - Switch Weapon
     </div>
     <div id="weaponInfo">Current Weapon: Cannon</div>
     <div id="countdown">3</div>
@@ -85,7 +84,6 @@
         const countdownEl = document.getElementById('countdown');
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
-        
         // Game state
         let currentRound = 1;
         let gameOver = false;
@@ -96,22 +94,20 @@
         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,
@@ -126,7 +122,6 @@
                 sound: machinegunSound
             }
         };
-
         // Player setup
         const player = {
             x: canvas.width/2,
@@ -138,7 +133,6 @@
             health: 1000,
             maxHealth: 1000
         };
-
         function startCountdown() {
             isCountingDown = true;
             countdownTime = 3;
@@ -154,7 +148,6 @@
                 countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
             }, 1000);
         }
-
         class Enemy {
             constructor() {
                 this.x = Math.random() * canvas.width;
@@ -171,7 +164,6 @@
                 this.moveInterval = Math.random() * 2000 + 1000;
                 this.moveAngle = Math.random() * Math.PI * 2;
             }
-
             update() {
                 if(isCountingDown) return;
                 const now = Date.now();
@@ -183,21 +175,17 @@
                 }
                 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({
@@ -210,7 +198,6 @@
                 });
             }
         }
-
         function initRound() {
             enemies = [];
             for(let i = 0; i < 1 * currentRound; i++) {
@@ -221,29 +208,23 @@
             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[' '] || autoFire) && now - lastShot > weapon.fireRate) {
+            if (keys[' '] && now - lastShot > weapon.fireRate) {
                 weapon.sound.cloneNode().play();
                 bullets.push({
                     x: player.x + Math.cos(player.angle) * 30,
@@ -257,7 +238,6 @@
                 lastShot = now;
             }
         }
-
         function updateGame() {
             if(gameOver) return;
             if(!isCountingDown) {
@@ -269,9 +249,7 @@
                 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 => {
@@ -304,7 +282,6 @@
                     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) {
@@ -313,7 +290,6 @@
                     }
                     return true;
                 });
-
                 if(enemies.length === 0) {
                     if(currentRound < 10) {
                         nextRoundBtn.style.display = 'block';
@@ -324,33 +300,27 @@
                 }
             }
         }
-
         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);
@@ -359,50 +329,54 @@
                 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
+            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>