Кнопки управляют движением танка. При клике - выстрел в сторону клика. Вокруг вражеские танки которые случайно двигаются и стреляют's game | AI game creator

Click here for free DL of the app version that can save data.

No:46147

124

Кнопки управляют движением танка. При клике - выст..ALL
Developer User19457｜Date and time 24/2/23 17:59:39
Build time 16.125 sec｜Game capacity 3.565KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<script>
    const tank = document.createElement('div');
    tank.style.width = '50px';
    tank.style.height = '50px';
    tank.style.backgroundColor = 'green';
    tank.style.position = 'absolute';
    tank.style.left = '50%';
    tank.style.top = '50%';
    tank.style.transform = 'translate(-50%, -50%)';
    document.body.appendChild(tank);

const enemyTanks = [];
    
    for (let i = 0; i < 3; i++) {
        const enemyTank = document.createElement('div');
        enemyTank.style.width = '50px';
        enemyTank.style.height = '50px';
        enemyTank.style.backgroundColor = 'red';
        enemyTank.style.position = 'absolute';
        enemyTank.style.left = Math.random() * window.innerWidth + 'px';
        enemyTank.style.top = Math.random() * window.innerHeight + 'px';
        document.body.appendChild(enemyTank);
        enemyTanks.push(enemyTank);
    }

window.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowUp') {
            tank.style.top = parseInt(tank.style.top) - 10 + 'px';
        } else if (e.key === 'ArrowDown') {
            tank.style.top = parseInt(tank.style.top) + 10 + 'px';
        } else if (e.key === 'ArrowLeft') {
            tank.style.left = parseInt(tank.style.left) - 10 + 'px';
        } else if (e.key === 'ArrowRight') {
            tank.style.left = parseInt(tank.style.left) + 10 + 'px';
        }
    });

window.addEventListener('click', (e) => {
        const bullet = document.createElement('div');
        bullet.style.width = '5px';
        bullet.style.height = '5px';
        bullet.style.backgroundColor = 'black';
        bullet.style.position = 'absolute';
        bullet.style.left = tank.style.left;
        bullet.style.top = tank.style.top;
        bullet.style.transform = 'translate(-50%, -50%)';
        
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        
        const angle = Math.atan2(mouseY - parseInt(tank.style.top), mouseX - parseInt(tank.style.left));
        const velocity = 5;
        const vx = Math.cos(angle) * velocity;
        const vy = Math.sin(angle) * velocity;
        
        document.body.appendChild(bullet);
        
        const bulletInterval = setInterval(() => {
            const bulletX = parseInt(bullet.style.left) + vx;
            const bulletY = parseInt(bullet.style.top) + vy;
            bullet.style.left = bulletX + 'px';
            bullet.style.top = bulletY + 'px';
            
            enemyTanks.forEach(enemyTank => {
                if (Math.abs(parseInt(bullet.style.left) - parseInt(enemyTank.style.left)) < 50 && Math.abs(parseInt(bullet.style.top) - parseInt(enemyTank.style.top)) < 50) {
                    enemyTank.style.backgroundColor = 'purple';
                    clearInterval(bulletInterval);
                    setTimeout(() => {
                        enemyTank.style.display = 'none';
                    }, 1000);
                }
            });
            
            if (bulletX < 0 || bulletX > window.innerWidth || bulletY < 0 || bulletY > window.innerHeight) {
                clearInterval(bulletInterval);
                bullet.remove();
            }
        }, 10);
    });

setInterval(() => {
        enemyTanks.forEach(enemyTank => {
            const randomX = Math.random() * 10 - 5;
            const randomY = Math.random() * 10 - 5;
            enemyTank.style.left = parseInt(enemyTank.style.left) + randomX + 'px';
            enemyTank.style.top = parseInt(enemyTank.style.top) + randomY + 'px';
        });
    }, 500);
</script>