AI game creator

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

No:15969

←

Prev Next

→

Space invader
Developer User7025｜Date and time 23/9/14 9:34:46
Build time 36.967 sec｜Game capacity 4.147KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Space Invader</title>
    <style>
        #game-board {
            position: relative;
            width: 350px;
            height: 400px;
            border: 2px solid black;
            background-color: #000;
            margin: 0 auto;
        }
        #spaceship {
            position: absolute;
            bottom: 15px;
            left: 45%;
            width: 50px;
        }
        .invader {
            position: absolute;
            width: 30px;
            height: 30px;
        }
        #score {
            margin-top: 20px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <img id="spaceship" src="https://img.icons8.com/emoji/48/000000/rocket-emji.png">
    </div>
    <div id="score">Score: 0</div>

// Game initialization
        function initialize() {
            spaceship = document.getElementById("spaceship");

// Create invaders
            for (var i = 0; i < 10; i++) {
                var invader = document.createElement("img");
                invader.src = "https://img.icons8.com/emoji/48/000000/alien-monster-emoji.png";
                invader.className = "invader";
                invader.style.left = (i * 35) + "px";
                document.getElementById("game-board").appendChild(invader);
                invaders.push(invader);
            }
        }

// Game controls
        function moveLeft() {
            var left = parseInt(spaceship.style.left);
            if (left > 0) {
                spaceship.style.left = (left - 10) + "px";
            }
        }

function moveRight() {
            var left = parseInt(spaceship.style.left);
            if (left < 300) {
                spaceship.style.left = (left + 10) + "px";
            }
        }

function shoot() {
            var bullet = document.createElement("div");
            bullet.className = "bullet";
            bullet.style.left = (parseInt(spaceship.style.left) + 20) + "px";
            document.getElementById("game-board").appendChild(bullet);

// Move the bullet upwards
            var interval = setInterval(function() {
                var top = parseInt(bullet.style.top);
                bullet.style.top = (top - 10) + "px";

// Check for collision with invaders
                for (var i = 0; i < invaders.length; i++) {
                    if (checkCollision(bullet, invaders[i])) {
                        invaders[i].style.display = "none";
                        invaders.splice(i, 1);
                        bullet.remove();
                        score += 10;
                        document.getElementById("score").innerText = "Score: " + score;
                    }
                }

// Check if bullet is out of game board
                if (top <= 0) {
                    bullet.remove();
                    clearInterval(interval);
                }
            }, 30);
        }

// Collision detection
        function checkCollision(obj1, obj2) {
            var rect1 = obj1.getBoundingClientRect();
            var rect2 = obj2.getBoundingClientRect();
            return (
                rect1.left < rect2.left + rect2.width &&
                rect1.left + rect1.width > rect2.left &&
                rect1.top < rect2.top + rect2.height &&
                rect1.top + rect1.height > rect2.top
            );
        }

// Event listeners for key presses
        window.addEventListener("keydown", function(event) {
            if (event.code === "ArrowLeft") {
                moveLeft();
            }
            else if (event.code === "ArrowRight") {
                moveRight();
            }
            else if (event.code === "Space") {
                shoot();
            }
        });

// Initialize the game
        initialize();
    </script>
</body>
</html>