Circles and squares shooting out projectiles And other things appear And they home in at it's game

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

No:44814

106

←

Prev Next

→

Circles and squares shooting out projectiles And o..ALL
Developer User19470｜Date and time 24/2/19 6:33:48
Build time 8.161 sec｜Game capacity 2.699KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projectile Shooter Game</title>
<style>
    #game-container {
        width: 100vw;
        height: 100vh;
        background-color: black;
    }

.player {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        bottom: 10px;
        left: calc(50% - 25px);
    }

.projectile {
        width: 10px;
        height: 10px;
        background-color: blue;
        position: absolute;
    }
</style>
</head>
<body>
<div id="game-container"></div>

let projectiles = [];

window.addEventListener('deviceorientation', handleDeviceOrientation);

function handleDeviceOrientation(event) {
        const x = event.beta; // In degree in the range [-180,180]
        const y = event.gamma; // In degree in the range [-90,90]

const playerX = window.innerWidth / 2 + x;
        player.style.left = playerX + 'px';

if (Math.random() < 0.05) {
            const projectile = document.createElement('div');
            projectile.classList.add('projectile');
            projectile.style.left = Math.random() * window.innerWidth + 'px';
            gameContainer.appendChild(projectile);
            projectiles.push(projectile);
        }

projectiles.forEach((projectile, index) => {
            const projectileY = projectile.offsetTop + 1;
            projectile.style.top = projectileY + 'px';

// Collision detection
            if (isCollision(player, projectile)) {
                alert('Game Over! Your score: ' + index);
                projectiles.forEach(proj => gameContainer.removeChild(proj));
                projectiles = [];
            }

// Clean up projectiles that go off screen
            if (projectile.offsetTop > window.innerHeight) {
                gameContainer.removeChild(projectile);
                projectiles.splice(index, 1);
            }
        });
    }

function isCollision(player, projectile) {
        const playerRect = player.getBoundingClientRect();
        const projectileRect = projectile.getBoundingClientRect();

return !(
            playerRect.right < projectileRect.left ||
            playerRect.left > projectileRect.right ||
            playerRect.bottom < projectileRect.top ||
            playerRect.top > projectileRect.bottom
        );
    }
</script>
</body>
</html>