Spaces:

cutechicken
/

tankwar

Running

App Files Files Community

cutechicken commited on Nov 28, 2024

Commit

d951e0c

verified ·

1 Parent(s): 44e9133

Update index.html

Browse files

Files changed (1) hide show

index.html +386 -1

index.html CHANGED Viewed

	@@ -1 +1,386 @@
1	- <!DOCTYPE html~~><html><head><title~~>TB</title><style>body{margin:0;overflow:hidden;background:#333;font-family:Arial}._a{background-repeat:repeat}._b{position:fixed;color:#fff;background:rgba(0,0,0,.7);border-radius:5px;z-index:1e3}._c{top:10px;right:10px;padding:10px}._d{top:150px;right:10px;padding:10px;font-size:18px}._e{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px 40px;font-size:24px;background:#4CAF50;color:#fff;border:none;border-radius:5px;cursor:pointer;display:none;z-index:1e3}._f{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:72px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:1e3;display:none}</style></head><body><div class="_b _c">Controls:<br>WASD - Move tank<br>Mouse - Aim<br>Space - Fire<br>C - Switch Weapon R - Toggle Auto-fire</div><div class="_b _d" id="_g">Current Weapon: Cannon</div><div class="_f" id="_h">3</div><button class="_e" id="_i">Next Round</button><button class="_e" id="_j">Restart Game</button><canvas id="_k"></canvas><script>(function(){var _0x4ae9=['getContext','width','height','innerWidth','innerHeight','getElementById','_k','_i','_j','_g','_h','city.png','player.png','enemy.png','firemn.ogg','firemg.ogg','fireenemy.ogg'];var _0x5f=function(_0x56b4){return _0x4ae9[_0x56b4]};var _c=document[_0x5f(5)](_0x5f(6));var _ctx=_c[_0x5f(0)]('2d');var _n=document[_0x5f(5)](_0x5f(7));var _r=document[_0x5f(5)](_0x5f(8));var _w=document[_0x5f(5)](_0x5f(9));var _cd=document[_0x5f(5)](_0x5f(10));_c[_0x5f(1)]=window[_0x5f(3)];_c[_0x5f(2)]=window[_0x5f(4)];var _cr=1,_go=!1,_cw='cannon',_e=[],_b=[],_i=[],_ls=0,_ic=!0,_ct=3,_af=!1;var _bg=new Image();_bg.src=_0x5f(11);var _p=new Image();_p.src=_0x5f(12);var _ei=new Image();_ei.src=_0x5f(13);var _cs=new Audio(_0x5f(14));var _ms=new Audio(_0x5f(15));var _es=new Audio(_0x5f(16));_es.volume=.5;var _ws={cannon:{fireRate:1e3,damage:.25,bulletSize:5,sound:_cs},machinegun:{fireRate:200,damage:.05,bulletSize:2,sound:_ms}};var _pl={x:_c[_0x5f(1)]/2,y:_c[_0x5f(2)]/2,speed:5,angle:0,width:100,height:45,health:1e3,maxHealth:1e3};function _sc(){_ic=!0;_ct=3;_cd.style.display='block';_cd.textContent=_ct;var _ci=setInterval(function(){_ct--;if(_ct<=0){clearInterval(_ci);_cd.style.display='none';_ic=!1}_cd.textContent=_ct>0?_ct:'GO!'},1e3)}class _En{constructor(){this.x=Math.random()_c[_0x5f(1)];this.y=Math.random()_c[_0x5f(2)];this.health=1e3;this.maxHealth=1e3;this.speed=2;this.lastShot=0;this.shootInterval=1e3;this.angle=0;this.width=100;this.height=45;this.moveTimer=0;this.moveInterval=Math.random()2e3+1e3;this.moveAngle=Math.random()Math.PI2}update(){if(_ic)return;var _n=Date.now();if(_n-this.moveTimer>this.moveInterval){this.moveAngle=Math.random()Math.PI2;this.moveTimer=_n}this.x+=Math.cos(this.moveAngle)this.speed;this.y+=Math.sin(this.moveAngle)this.speed;this.x=Math.max(this.width/2,Math.min(_c[_0x5f(1)]-this.width/2,this.x));this.y=Math.max(this.height/2,Math.min(_c[_0x5f(2)]-this.height/2,this.y));this.angle=Math.atan2(_pl.y-this.y,_pl.x-this.x);if(_n-this.lastShot>this.shootInterval&&!_ic){this.shoot();this.lastShot=_n}}shoot(){_es.cloneNode().play();_b.push({x:this.x+Math.cos(this.angle)30,y:this.y+Math.sin(this.angle)30,angle:this.angle,speed:5,isEnemy:!0,size:3})}}function _ir(){_e=[];for(var i=0;i<1_cr;i++){_e.push(new _En())}_pl.health=_pl.maxHealth;_b=[];_i=[];_sc()}_c.addEventListener('mousemove',function(e){_pl.angle=Math.atan2(e.clientY-_pl.y,e.clientX-_pl.x)});var _k={};document.addEventListener('keydown',function(e){_k[e.key]=!0;if(e.key.toLowerCase()==='c'){_cw=_cw==='cannon'?'machinegun':'cannon';_w.textContent='Current Weapon: '+_cw.charAt(0).toUpperCase()+_cw.slice(1)}else if(e.key.toLowerCase()==='r'){_af=!_af}});document.addEventListener('keyup',function(e){_k[e.key]=!1});function _fb(){if(_ic)return;var _w=_ws[_cw];var _n=Date.now();if((_k[' ']\|\|_af)&&_n-_ls>_w.fireRate){_w.sound.cloneNode().play();_b.push({x:_pl.x+Math.cos(_pl.angle)30,y:_pl.y+Math.sin(_pl.angle)30,angle:_pl.angle,speed:10,isEnemy:!1,damage:_w.damage,size:_w.bulletSize});_ls=_n}}function _ug(){if(_go)return;if(!_ic){if(_k['w'])_pl.y-=_pl.speed;if(_k['s'])_pl.y+=_pl.speed;if(_k['a'])_pl.x-=_pl.speed;if(_k['d'])_pl.x+=_pl.speed;_pl.x=Math.max(_pl.width/2,Math.min(_c[_0x5f(1)]-_pl.width/2,_pl.x));_pl.y=Math.max(_pl.height/2,Math.min(_c[_0x5f(2)]-_pl.height/2,_pl.y));_fb()}_e.forEach(function(e){e.update()});if(!_ic){_b=_b.filter(function(b){b.x+=Math.cos(b.angle)b.speed;b.y+=Math.sin(b.angle)b.speed;if(!b.isEnemy){_e=_e.filter(function(e){var d=Math.hypot(b.x-e.x,b.y-e.y);if(d<30){e.health-=e.maxHealthb.damage;if(e.health<=0){_shi(e.x,e.y);return!1}return!0}return!0})}else{var d=Math.hypot(b.x-_pl.x,b.y-_pl.y);if(d<30){_pl.health-=100;if(_pl.health<=0){_go=!0;_r.style.display='block'}return!1}}return b.x>=0&&b.x<=_c[_0x5f(1)]&&b.y>=0&&b.y<=_c[_0x5f(2)]});_i=_i.filter(function(i){var d=Math.hypot(i.x-_pl.x,i.y-_pl.y);if(d<30){_pl.health=Math.min(_pl.health+200,_pl.maxHealth);return!1}return!0});if(_e.length===0){if(_cr<10){_n.style.display='block'}else{_go=!0;_r.style.display='block'}}}}function _shi(x,y){_i.push({x:x,y:y})}function _dhb(x,y,h,m,w,h,c){_ctx.fillStyle='#333';_ctx.fillRect(x-w/2,y-h/2,w,h);_ctx.fillStyle=c;_ctx.fillRect(x-w/2,y-h/2,w(h/m),h)}function _dg(){_ctx.clearRect(0,0,_c[_0x5f(1)],_c[_0x5f(2)]);var p=_ctx.createPattern(_bg,'repeat');_ctx.fillStyle=p;_ctx.fillRect(0,0,_c[_0x5f(1)],_c[_0x5f(2)]);_ctx.save();_ctx.translate(_pl.x,_pl.y);_ctx.rotate(_pl.angle);_ctx.drawImage(_p,-_pl.width/2,-_pl.height/2,_pl.width,_pl.height);_ctx.restore();_dhb(_c[_0x5f(1)]/2,30,_pl.health,_pl.maxHealth,200,20,'green');_e.forEach(function(e){_ctx.save();_ctx.translate(e.x,e.y);_ctx.rotate(e.angle);_ctx.drawImage(_ei,-e.width/2,-e.height/2,e.width,e.height);_ctx.restore();_dhb(e.x,e.y-40,e.health,e.maxHealth,60,5,'red')});_b.forEach(function(b){_ctx.beginPath();_ctx.fillStyle=b.isEnemy?'red':'yellow';_ctx.arc(b.x,b.y,b.size,0,Math.PI2);_ctx.fill()});_i.forEach(function(i){_ctx.beginPath();_ctx.fillStyle='green';_ctx.arc(i.x,i.y,10,0,Math.PI2);_ctx.fill()});_ctx.fillStyle='white';_ctx.font='24px Arial';_ctx.fillText('Round '+_cr+'/10',10,30);if(_ic){_ctx.fillStyle='rgba(0, 0, 0, 0.5)';_ctx.fillRect(0,0,_c[_0x5f(1)],_c[_0x5f(2)])}}function _gl(){_ug();_dg();requestAnimationFrame(_gl)}_n.addEventListener('click',function(){_cr++;_n.style.display='none';_ir()});_r.addEventListener('click',function(){_cr=1;_go=!1;_r.style.display='none';_ir()});Promise.all([new Promise(function(r){_bg.onload=r}),new Promise(function(r){_p.onload=r}),new Promise(function(r){_ei.onload=r})]).then(function(){_ir();_gl()});window.addEventListener('resize',function(){_c[_0x5f(1)]=window[_0x5f(3)];_c[_0x5f(2)]=window[_0x5f(4)]})})();</script></body></html>

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Tank Battle</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #333;
+            font-family: Arial;
+        }
+        #gameCanvas {
+            background-repeat: repeat;
+        }
+        #instructions {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            color: white;
+            background: rgba(0,0,0,0.7);
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 1000;
+        }
+        #weaponInfo {
+            position: fixed;
+            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;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 20px 40px;
+            font-size: 24px;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            display: none;
+            z-index: 1000;
+        }
+        #countdown {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 72px;
+            color: white;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+            z-index: 1000;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="instructions">
+        Controls:<br>
+        WASD - Move tank<br>
+        Mouse - Aim<br>
+        Space - Fire<br>
+        C - Switch Weapon
+        R - Toggle Auto-fire
+    </div>
+    <div id="weaponInfo">Current Weapon: Cannon</div>
+    <div id="countdown">3</div>
+    <button id="nextRound" class="button">Next Round</button>
+    <button id="restart" class="button">Restart Game</button>
+    <canvas id="gameCanvas"></canvas>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const nextRoundBtn = document.getElementById('nextRound');
+        const restartBtn = document.getElementById('restart');
+        const weaponInfo = document.getElementById('weaponInfo');
+        const countdownEl = document.getElementById('countdown');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        // Game state
+        let currentRound = 1;
+        let gameOver = false;
+        let currentWeapon = 'cannon';
+        let enemies = [];
+        let bullets = [];
+        let items = [];
+        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,
+                damage: 0.25,
+                bulletSize: 5,
+                sound: cannonSound
+            },
+            machinegun: {
+                fireRate: 200,
+                damage: 0.05,
+                bulletSize: 2,
+                sound: machinegunSound
+            }
+        };
+        // Player setup
+        const player = {
+            x: canvas.width/2,
+            y: canvas.height/2,
+            speed: 5,
+            angle: 0,
+            width: 100,
+            height: 45,
+            health: 1000,
+            maxHealth: 1000
+        };
+        function startCountdown() {
+            isCountingDown = true;
+            countdownTime = 3;
+            countdownEl.style.display = 'block';
+            countdownEl.textContent = countdownTime;
+            const countInterval = setInterval(() => {
+                countdownTime--;
+                if(countdownTime <= 0) {
+                    clearInterval(countInterval);
+                    countdownEl.style.display = 'none';
+                    isCountingDown = false;
+                }
+                countdownEl.textContent = countdownTime > 0 ? countdownTime : 'GO!';
+            }, 1000);
+        }
+        class Enemy {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.health = 1000;
+                this.maxHealth = 1000;
+                this.speed = 2;
+                this.lastShot = 0;
+                this.shootInterval = 1000;
+                this.angle = 0;
+                this.width = 100;
+                this.height = 45;
+                this.moveTimer = 0;
+                this.moveInterval = Math.random() * 2000 + 1000;
+                this.moveAngle = Math.random() * Math.PI * 2;
+            }
+            update() {
+                if(isCountingDown) return;
+                const now = Date.now();
+                // Movement
+                if (now - this.moveTimer > this.moveInterval) {
+                    this.moveAngle = Math.random() * Math.PI * 2;
+                    this.moveTimer = now;
+                }
+                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({
+                    x: this.x + Math.cos(this.angle) * 30,
+                    y: this.y + Math.sin(this.angle) * 30,
+                    angle: this.angle,
+                    speed: 5,
+                    isEnemy: true,
+                    size: 3
+                });
+            }
+        }
+        function initRound() {
+            enemies = [];
+            for(let i = 0; i < 1 * currentRound; i++) {
+                enemies.push(new Enemy());
+            }
+            player.health = player.maxHealth;
+            bullets = [];
+            items = [];
+            startCountdown();
+        }
+        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;
+          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;
+          }
+      });
+        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) {
+                weapon.sound.cloneNode().play();
+                bullets.push({
+                    x: player.x + Math.cos(player.angle) * 30,
+                    y: player.y + Math.sin(player.angle) * 30,
+                    angle: player.angle,
+                    speed: 10,
+                    isEnemy: false,
+                    damage: weapon.damage,
+                    size: weapon.bulletSize
+                });
+                lastShot = now;
+            }
+        }
+        function updateGame() {
+            if(gameOver) return;
+            if(!isCountingDown) {
+                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.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();
+            }
+            enemies.forEach(enemy => enemy.update());
+            if(!isCountingDown) {
+                // Update bullets and collisions
+                bullets = bullets.filter(bullet => {
+                    bullet.x += Math.cos(bullet.angle) * bullet.speed;
+                    bullet.y += Math.sin(bullet.angle) * bullet.speed;
+                    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 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) {
+                        player.health = Math.min(player.health + 200, player.maxHealth);
+                        return false;
+                    }
+                    return true;
+                });
+                if(enemies.length === 0) {
+                    if(currentRound < 10) {
+                        nextRoundBtn.style.display = 'block';
+                    } else {
+                        gameOver = true;
+                        restartBtn.style.display = 'block';
+                    }
+                }
+            }
+        }
+        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);
+                ctx.rotate(enemy.angle);
+                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, 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>