A space shooter game's game | AI game creator

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

No:46141

194

A space shooter game
Developer Bowgray｜Date and time 24/2/23 17:09:40
Build time 16.601 sec｜Game capacity 4.055KB｜

0

→ 　

0　

0　

　

　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const gameContainer = document.getElementById("gameContainer");
        const spaceship = document.getElementById("spaceship");
        const bullets = document.getElementsByClassName("bullet");
        const aliens = document.getElementsByClassName("alien");
        const scoreDisplay = document.getElementById("score");
        let score = 0;
        
        const gameWidth = gameContainer.clientWidth;
        const gameHeight = gameContainer.clientHeight;
        
        let spaceshipX = gameWidth / 2;
        
        window.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                spaceshipX -= 10;
                if (spaceshipX < 0) {
                    spaceshipX = 0;
                }
            } else if (event.key === "ArrowRight") {
                spaceshipX += 10;
                if (spaceshipX > gameWidth - spaceship.clientWidth) {
                    spaceshipX = gameWidth - spaceship.clientWidth;
                }
            } else if (event.key === " ") {
                shoot();
            }
            spaceship.style.left = spaceshipX + "px";
        });
        
        function shoot() {
            const bullet = document.createElement("div");
            bullet.classList.add("bullet");
            bullet.style.left = spaceshipX + spaceship.clientWidth / 2 + "px";
            gameContainer.appendChild(bullet);
            
            const bulletMove = setInterval(function() {
                bullet.style.top = (bullet.offsetTop - 10) + "px";
                
                if (bullet.offsetTop < 0) {
                    clearInterval(bulletMove);
                    gameContainer.removeChild(bullet);
                }
                
                for (let i = 0; i < aliens.length; i++) {
                    if (checkCollision(bullet, aliens[i])) {
                        score += 10;
                        scoreDisplay.textContent = score;
                        
                        clearInterval(bulletMove);
                        gameContainer.removeChild(bullet);
                        gameContainer.removeChild(aliens[i]);
                    }
                }
            }, 10);
        }
        
        function checkCollision(obj1, obj2) {
            const rect1 = obj1.getBoundingClientRect();
            const rect2 = obj2.getBoundingClientRect();
            
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }
        
        setInterval(function() {
            const alien = document.createElement("div");
            alien.classList.add("alien");
            alien.style.top = "0";
            alien.style.left = Math.random() * (gameWidth - alien.clientWidth) + "px";
            gameContainer.appendChild(alien);
            
            const alienMove = setInterval(function() {
                alien.style.top = (alien.offsetTop + 1) + "px";
                
                if (alien.offsetTop > gameHeight) {
                    clearInterval(alienMove);
                    gameContainer.removeChild(alien);
                }
                
                if (checkCollision(spaceship, alien)) {
                    clearInterval(alienMove);
                    gameContainer.removeChild(alien);
                    alert("Game Over! Your final score is: " + score);
                    score = 0;
                    scoreDisplay.textContent = score;
                }
            }, 10);
        }, 2000);
    });
</script>

<div id="gameContainer" style="width: 100%; height: 500px; background-color: black; position: relative;">
    <div id="spaceship" style="width: 50px; height: 50px; background-color: white; position: absolute; bottom: 10px;"></div>
    <div id="score" style="color: white; position: absolute; top: 10px; right: 10px;">0</div>
</div>