World-of-Tank-GAME

Running

App Files Files Community

cutechicken commited on Nov 28, 2024

Commit

342d5b8

verified ·

1 Parent(s): 86ba1f9

Update index.html

Browse files

Files changed (1) hide show

index.html +33 -35

index.html CHANGED Viewed

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
     <style>
         body {
             margin: 0;
@@ -96,10 +95,7 @@
         const PLAYER_SIZE = 30;
         const BULLET_SPEED = 10;
         const ENEMY_SPEED = 2;
-        const SHOOTING_INTERVAL = 333;
-        // Base64 encoded shot sound (very short beep)
-        const SHOT_SOUND = 'data:audio/wav;base64,UklGRigCAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQQCAACBhYqFbF1pbphwX4WqY0J0zGYhdPV3I2vyd5qCvHKTlZJ0j6p+cJGYhIaHmH1li6R9YH6hooCEjaB0f4SOo3yLkZSCeq+bXY/FdWt9tnhcl69yZ5mfdGSSoYKEkZuBdYqgeIKEm4Joe6GJfX+VmnuBjZaFhqmQYY7Hc36QiXd6kpWLgpSieIeQnICEkZeEhJOcfH6Om4GBjZWEgpOYfICLl4OBjZSEgZKYfICKloKBjJODgZGXe3+JlYGAi5KCgJCWen+IlICAfoh+gY2ScICBjX+ChImFhYuJhYeHhoeHh4iIiIiIiIiIiIiIiIiIiIiI';
         let game = {
             player: {
@@ -120,29 +116,7 @@
             shooting: false
         };
-        // Create audio context on user interaction
-        let audioContext;
-        document.addEventListener('click', initAudio, { once: true });
-        document.addEventListener('keydown', initAudio, { once: true });
-        function initAudio() {
-            audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        }
-        function playShot() {
-            if (!audioContext) return;
-            fetch(SHOT_SOUND)
-                .then(response => response.arrayBuffer())
-                .then(buffer => audioContext.decodeAudioData(buffer))
-                .then(decodedData => {
-                    const source = audioContext.createBufferSource();
-                    source.buffer = decodedData;
-                    source.connect(audioContext.destination);
-                    source.start(0);
-                })
-                .catch(err => console.log('Sound play failed:', err));
-        }
         function spawnEnemies() {
             const enemyCount = game.round * 5;
@@ -187,7 +161,7 @@
                         angle: angle + (Math.random() - 0.5) * 0.2
                     });
                 }
-                playShot();
                 game.lastShot = Date.now();
             }
@@ -197,12 +171,13 @@
                 bullet.x += Math.cos(bullet.angle) * BULLET_SPEED;
                 bullet.y += Math.sin(bullet.angle) * BULLET_SPEED;
                 if(bullet.x < 0 || bullet.x > canvas.width ||
                    bullet.y < 0 || bullet.y > canvas.height) {
                     game.player.bullets.splice(i, 1);
-                    continue;
                 }
                 for(let j = game.enemies.length - 1; j >= 0; j--) {
                     const enemy = game.enemies[j];
                     const dx = bullet.x - enemy.x;
@@ -213,6 +188,7 @@
                         if(enemy.health <= 0) {
                             game.enemies.splice(j, 1);
                             game.player.bulletsPerShot++;
                             game.items.push({
                                 x: enemy.x,
                                 y: enemy.y,
@@ -226,12 +202,15 @@
             // Update enemies
             game.enemies.forEach(enemy => {
                 enemy.x += enemy.direction.x * ENEMY_SPEED;
                 enemy.y += enemy.direction.y * ENEMY_SPEED;
                 if(enemy.x < 0 || enemy.x > canvas.width) enemy.direction.x *= -1;
                 if(enemy.y < 0 || enemy.y > canvas.height) enemy.direction.y *= -1;
                 if(Date.now() - enemy.lastShot > 1000) {
                     const angle = Math.atan2(
                         game.player.y - enemy.y,
@@ -245,11 +224,13 @@
                     enemy.lastShot = Date.now();
                 }
                 for(let i = enemy.bullets.length - 1; i >= 0; i--) {
                     const bullet = enemy.bullets[i];
                     bullet.x += Math.cos(bullet.angle) * BULLET_SPEED/2;
                     bullet.y += Math.sin(bullet.angle) * BULLET_SPEED/2;
                     const dx = bullet.x - game.player.x;
                     const dy = bullet.y - game.player.y;
                     if(Math.sqrt(dx*dx + dy*dy) < PLAYER_SIZE/2) {
@@ -263,6 +244,7 @@
                         }
                     }
                     if(bullet.x < 0 || bullet.x > canvas.width ||
                        bullet.y < 0 || bullet.y > canvas.height) {
                         enemy.bullets.splice(i, 1);
@@ -293,7 +275,7 @@
                     document.getElementById('round').textContent = `Round ${game.round}`;
                     game.player.health = game.player.maxHealth;
                     document.getElementById('health').style.width = '100%';
-                    game.player.bulletsPerShot = 1;
                     spawnEnemies();
                 }
             }
@@ -303,9 +285,9 @@
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             // Draw player
-            ctx.font = '24px Arial';
             ctx.fillStyle = 'white';
-            ctx.fillText('mouse', game.player.x - 12, game.player.y + 8);
             // Draw player bullets
             ctx.fillStyle = 'yellow';
@@ -319,7 +301,7 @@
             game.enemies.forEach(enemy => {
                 // Enemy
                 ctx.fillStyle = 'white';
-                ctx.fillText('cat', enemy.x - 12, enemy.y + 8);
                 // Health bar
                 ctx.fillStyle = '#600';
@@ -380,4 +362,20 @@
         // Event listeners
         window.addEventListener('keydown', e => game.keys[e.key] = true);
         window.addEventListener('keyup', e => game.keys[e.key] = false);
-        window.

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         body {
             margin: 0;
         const PLAYER_SIZE = 30;
         const BULLET_SPEED = 10;
         const ENEMY_SPEED = 2;
+        const SHOOTING_INTERVAL = 333; // 3 shots per second
         let game = {
             player: {
             shooting: false
         };
+        const gunSound = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YWoGAACBhYqFbF1pbphwX4WqY0J0zGYhdPV3I2vyd5qCvHKTlZJ0j6p+cJGYhIaHmH1li6R9YH6hooCEjaB0f4SOo3yLkZSCeq+bXY/FdWt9tnhcl69yZ5mfdGSSoYKEkZuBdYqgeIKEm4Joe6GJfX+VmnuBjZaFhqmQYY7Hc36QiXd6kpWLgpSieIeQnICEkZeEhJOcfH6Om4GBjZWEgpOYfICLl4OBjZSEgZKYfICKloKBjJODgZGXe3+JlYGAi5KCgJCWen+IlICAfoh+gY2ScICBjX+ChImFhYuJhYeHhoeHh4iIiIiIiIiIiIiIiIiIiIiIiIiHh4aGhYSCgYB/fn18fHx9fn+AgYKEhYeIiYuMjo+RkpSVl5iZmptcW15hZGhrbW5vcHFydHZ4enx+gIKEh4mMj5GSk5OTkpGQjo2LiomIiImKi4yOj5GSlJWXmJqbnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drbAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/wABAgMEBQYHCAkKCwwNDg8QERITFBUWFxgZGhscHR4fICEiIyQlJicoKSorLC0uLzAxMjM0NTY3ODk6Ozw9Pj9AQUJDREVGR0hJSktMTU5PUFFSU1RVVldYWVpbXF1eX2BhYmNkZWZnaGlqa2xtbm9wcXJzdHV2d3h5ent8fX5/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8=');
         function spawnEnemies() {
             const enemyCount = game.round * 5;
                         angle: angle + (Math.random() - 0.5) * 0.2
                     });
                 }
+                gunSound.cloneNode().play();
                 game.lastShot = Date.now();
             }
                 bullet.x += Math.cos(bullet.angle) * BULLET_SPEED;
                 bullet.y += Math.sin(bullet.angle) * BULLET_SPEED;
+                // Remove out of bounds bullets
                 if(bullet.x < 0 || bullet.x > canvas.width ||
                    bullet.y < 0 || bullet.y > canvas.height) {
                     game.player.bullets.splice(i, 1);
                 }
+                // Check enemy hits
                 for(let j = game.enemies.length - 1; j >= 0; j--) {
                     const enemy = game.enemies[j];
                     const dx = bullet.x - enemy.x;
                         if(enemy.health <= 0) {
                             game.enemies.splice(j, 1);
                             game.player.bulletsPerShot++;
+                            // Drop health item
                             game.items.push({
                                 x: enemy.x,
                                 y: enemy.y,
             // Update enemies
             game.enemies.forEach(enemy => {
+                // Movement
                 enemy.x += enemy.direction.x * ENEMY_SPEED;
                 enemy.y += enemy.direction.y * ENEMY_SPEED;
+                // Bounce off walls
                 if(enemy.x < 0 || enemy.x > canvas.width) enemy.direction.x *= -1;
                 if(enemy.y < 0 || enemy.y > canvas.height) enemy.direction.y *= -1;
+                // Shooting
                 if(Date.now() - enemy.lastShot > 1000) {
                     const angle = Math.atan2(
                         game.player.y - enemy.y,
                     enemy.lastShot = Date.now();
                 }
+                // Update enemy bullets
                 for(let i = enemy.bullets.length - 1; i >= 0; i--) {
                     const bullet = enemy.bullets[i];
                     bullet.x += Math.cos(bullet.angle) * BULLET_SPEED/2;
                     bullet.y += Math.sin(bullet.angle) * BULLET_SPEED/2;
+                    // Check player hit
                     const dx = bullet.x - game.player.x;
                     const dy = bullet.y - game.player.y;
                     if(Math.sqrt(dx*dx + dy*dy) < PLAYER_SIZE/2) {
                         }
                     }
+                    // Remove out of bounds bullets
                     if(bullet.x < 0 || bullet.x > canvas.width ||
                        bullet.y < 0 || bullet.y > canvas.height) {
                         enemy.bullets.splice(i, 1);
                     document.getElementById('round').textContent = `Round ${game.round}`;
                     game.player.health = game.player.maxHealth;
                     document.getElementById('health').style.width = '100%';
+                    game.player.bulletsPerShot = 1; // Reset bullets per shot
                     spawnEnemies();
                 }
             }
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             // Draw player
             ctx.fillStyle = 'white';
+            ctx.font = '30px Arial';
+            ctx.fillText('🐭', game.player.x - 15, game.player.y + 15);
             // Draw player bullets
             ctx.fillStyle = 'yellow';
             game.enemies.forEach(enemy => {
                 // Enemy
                 ctx.fillStyle = 'white';
+                ctx.fillText('🐱', enemy.x - 15, enemy.y + 15);
                 // Health bar
                 ctx.fillStyle = '#600';
         // Event listeners
         window.addEventListener('keydown', e => game.keys[e.key] = true);
         window.addEventListener('keyup', e => game.keys[e.key] = false);
+        window.addEventListener('mousemove', e => {
+            game.mouse.x = e.clientX;
+            game.mouse.y = e.clientY;
+        });
+        window.addEventListener('keydown', e => {
+            if(e.code === 'Space') game.shooting = true;
+        });
+        window.addEventListener('keyup', e => {
+            if(e.code === 'Space') game.shooting = false;
+        });
+        // Start game
+        spawnEnemies();
+        gameLoop();
+    </script>
+</body>
+</html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>