AI game creator

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

No:17116

118

←

Prev Next

→

Space Invaders
Developer User7570｜Date and time 23/9/22 8:58:22
Build time 35.786 sec｜Game capacity 6.092KB｜

Script

Sure! Here's a simple implementation of the classic game, Space Invaders, in a single HTML file using JavaScript and enclosed within script tags. Please note that this is a basic implementation and can be further enhanced and stylized to make it a complete game.

To make the game playable on a smartphone, you can adjust the game area dimensions to fit the smartphone screen and use touch events instead of keyboard events for control. Additionally, you would need to provide appropriate player, enemy, and bullet images (player.png and enemy.png) to display on the game area.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Space Invaders</title>
    <style>
        #game-area {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="game-area"></div>

// Game state
        var player;
        var bullets = [];
        var enemies = [];
        var gameOver = false;

// Create player object
        function createPlayer() {
            return {
                x: GAME_WIDTH / 2 - PLAYER_WIDTH / 2,
                y: GAME_HEIGHT - PLAYER_HEIGHT - 10,
                width: PLAYER_WIDTH,
                height: PLAYER_HEIGHT,
                speed: 10
            };
        }

// Create enemy objects
        function createEnemies() {
            var enemiesArr = [];
            var startX = 10;
            var startY = 10;

for (var i = 0; i < ENEMY_COUNT; i++) {
                var enemy = {
                    x: startX,
                    y: startY,
                    width: ENEMY_WIDTH,
                    height: ENEMY_HEIGHT,
                    speed: 2
                };

enemiesArr.push(enemy);

startX += ENEMY_WIDTH + 10;
                if (startX + ENEMY_WIDTH > GAME_WIDTH) {
                    startX = 10;
                    startY += ENEMY_HEIGHT + 10;
                }
            }

return enemiesArr;
        }

// Create bullet object
        function createBullet(x, y) {
            return {
                x: x,
                y: y,
                width: BULLET_WIDTH,
                height: BULLET_HEIGHT,
                speed: 5
            };
        }

// Handle keyboard input
        function handleKeys() {
            window.addEventListener('keydown', function (event) {
                if (event.key === 'ArrowLeft') {
                    player.x -= player.speed;
                } else if (event.key === 'ArrowRight') {
                    player.x += player.speed;
                } else if (event.key === ' ') {
                    bullets.push(createBullet(player.x + player.width / 2 - BULLET_WIDTH / 2, player.y));
                }
            });
        }

// Check collision between two rectangles
        function isColliding(rect1, rect2) {
            return rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y;
        }

// Game loop
        function update() {
            if (gameOver) return;

// Clear game area
            gameArea.innerHTML = '';

// Move bullets
            bullets.forEach(function (bullet, bulletIndex) {
                bullet.y -= bullet.speed;

if (bullet.y < 0) {
                    bullets.splice(bulletIndex, 1);
                }
            });

// Move enemies
            enemies.forEach(function (enemy, enemyIndex) {
                enemy.x += enemy.speed;

// Check if enemy reached player
                if (enemy.y + enemy.height >= player.y) {
                    gameOver = true;
                }

// Check if enemy collided with any bullet
                bullets.forEach(function (bullet, bulletIndex) {
                    if (isColliding(enemy, bullet)) {
                        bullets.splice(bulletIndex, 1);
                        enemies.splice(enemyIndex, 1);
                    }
                });

// Check if enemy reached game area border
                if (enemy.x + enemy.width > GAME_WIDTH || enemy.x < 0) {
                    enemy.speed *= -1;
                    enemy.y += enemy.height;
                }
            });

// Draw player
            gameArea.innerHTML += `<img src="player.png" style="position:absolute; left:${player.x}px; top:${player.y}px; width:${player.width}px; height:${player.height}px;">`;

// Draw bullets
            bullets.forEach(function (bullet) {
                gameArea.innerHTML += `<div style="position:absolute; background-color:white; left:${bullet.x}px; top:${bullet.y}px; width:${bullet.width}px; height:${bullet.height}px;"></div>`;
            });

// Draw enemies
            enemies.forEach(function (enemy) {
                gameArea.innerHTML += `<img src="enemy.png" style="position:absolute; left:${enemy.x}px; top:${enemy.y}px; width:${enemy.width}px; height:${enemy.height}px;">`;
            });

// Check if game over
            if (enemies.length === 0) {
                gameOver = true;
            }

// Call update function again
            requestAnimationFrame(update);
        }

// Create game area and start the game
        var gameArea = document.getElementById('game-area');
        gameArea.style.width = GAME_WIDTH + 'px';
        gameArea.style.height = GAME_HEIGHT + 'px';

player = createPlayer();
        enemies = createEnemies();
        handleKeys();
        update();
    </script>
</body>
</html>
```