AI game creator

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

No:17477

←

Prev Next

→

A space shooter
Developer User7684｜Date and time 23/9/23 11:22:24
Build time 34.728 sec｜Game capacity 5.424KB｜

Script

Sure! Here's an example of a simple space shooter game implemented as a single HTML file using JavaScript. It utilizes pictograms for the game elements and is designed for smartphone operation.

To use this code, save it as a `.html` file and make sure to have `emozi_all/player.png` and `emozi_all/enemy.png` sprite images in the same directory as the HTML file. This simple space shooter game allows you to control a spaceship using the mouse (or touch on a smartphone). The spaceship can shoot bullets to destroy enemy spaceships. The goal is to survive as long as possible by avoiding enemy spaceships and shooting them down.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple space shooter game implemented as a single HTML file using JavaScript. It utilizes pictograms for the game elements and is designed for smartphone operation.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Shooter</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

#game {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: black;
        }

#player {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-image: url('player.png');
            background-size: cover;
        }

.enemy {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('enemy.png');
            background-size: cover;
        }

.bullet {
            position: absolute;
            width: 10px;
            height: 20px;
            background-color: yellow;
        }

</style>
</head>
<body>
    <div id="game"></div>

// Create Player
        player.id = 'player';
        game.appendChild(player);

// Start Game
        startGame();

function startGame() {
            gameInterval = setInterval(updateGame, 20);
            player.addEventListener('mousemove', movePlayer);
            game.addEventListener('click', shootBullet);
            spawnEnemies();
        }

function updateGame() {
            moveBullets();
            moveEnemies();
            checkCollision();
        }

function movePlayer(e) {
            var posX = e.clientX - game.getBoundingClientRect().left;
            posX = Math.max(0, Math.min(posX, game.clientWidth - player.clientWidth));
            player.style.left = posX + 'px';
        }

function shootBullet() {
            var bullet = document.createElement('div');
            bullet.className = 'bullet';
            bullet.style.left = (player.offsetLeft + player.clientWidth / 2 - bullet.clientWidth / 2) + 'px';
            bullet.style.bottom = player.clientHeight + 'px';
            game.appendChild(bullet);
            bullets.push(bullet);
        }

function moveBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.style.bottom = (parseInt(bullet.style.bottom) + 10) + 'px';

if (parseInt(bullet.style.bottom) >= game.clientHeight) {
                    bullet.parentNode.removeChild(bullet);
                    bullets.splice(i, 1);
                    i--;
                }
            }
        }

function spawnEnemies() {
            setInterval(function () {
                var enemy = document.createElement('div');
                enemy.className = 'enemy';
                enemy.style.left = Math.floor(Math.random() * (game.clientWidth - enemy.clientWidth)) + 'px';
                enemy.style.top = 0;
                game.appendChild(enemy);
                enemies.push(enemy);
            }, 2000);
        }

function moveEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.style.top = (parseInt(enemy.style.top) + 5) + 'px';

if (parseInt(enemy.style.top) >= game.clientHeight) {
                    enemy.parentNode.removeChild(enemy);
                    enemies.splice(i, 1);
                    i--;
                }
            }
        }

function checkCollision() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                var bulletRect = bullet.getBoundingClientRect();

for (var j = 0; j < enemies.length; j++) {
                    var enemy = enemies[j];
                    var enemyRect = enemy.getBoundingClientRect();

if (isColliding(bulletRect, enemyRect)) {
                        bullet.parentNode.removeChild(bullet);
                        bullets.splice(i, 1);
                        i--;

enemy.parentNode.removeChild(enemy);
                        enemies.splice(j, 1);
                        j--;
                        break;
                    }
                }
            }
        }

function isColliding(rect1, rect2) {
            return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
        }
    </script>
</body>
</html>
```

To use this code, save it as a `.html` file and make sure to have `player.png` and `enemy.png` sprite images in the same directory as the HTML file.

This simple space shooter game allows you to control a spaceship using the mouse (or touch on a smartphone). The spaceship can shoot bullets to destroy enemy spaceships. The goal is to survive as long as possible by avoiding enemy spaceships and shooting them down.