Create a game were the player has to shoot down spaceships to protect the world's game

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

No:20728

←

Prev Next

→

Create a game were the player has to shoot down sp..ALL
Developer User9138｜Date and time 23/10/10 21:01:13
Build time 52.73 sec｜Game capacity 7.308KB｜

Script

Sure! Here's a simple implementation of a game where the player has to shoot down spaceships to protect the world using JavaScript and pictograms. Note that due to the limitations of the text-based format of this platform, I cannot provide a live interactive game experience. However, you can copy the code provided and save it as an HTML file to run it locally on your device.

Score: 0

Game Over

To play the game, save the code in a single HTML file (e.g., `game.html`), and make sure to have two pictogram images named `emozi_all/play.png` (for the player) and `emozi_all/player.png` (for the spaceships) in the same directory as the HTML file. Then, open the HTML file in a web browser on your smartphone, and you should be able to play the game by touching and moving your finger on the screen to control the player and shoot down the spaceships.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Spaceship Shooter Game</title>
    <style>
        body {
            background-color: #000;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

#game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#player {
            position: relative;
            width: 50px;
            height: 50px;
            background-image: url('pictogram-player.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

.bullet {
            position: absolute;
            width: 10px;
            height: 30px;
            background-color: #fff;
        }

.spaceship {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('pictogram-spaceship.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 20px;
        }

#game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 30px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div id="score">Score: 0</div>
        <div id="game-over">Game Over</div>
    </div>

// Create the game entities
        function createEntities() {
            player = document.getElementById("player");
            player.style.top = window.innerHeight / 2 - player.offsetHeight / 2 + "px";
            player.style.left = window.innerWidth / 2 - player.offsetWidth / 2 + "px";

createSpaceships();
        }

// Create the spaceships
        function createSpaceships() {
            var numSpaceships = 5;

for (var i = 0; i < numSpaceships; i++) {
                var spaceship = document.createElement("div");
                spaceship.className = "spaceship";
                spaceship.style.top = Math.random() * (window.innerHeight - spaceship.offsetHeight) + "px";
                spaceship.style.left = Math.random() * (window.innerWidth - spaceship.offsetWidth) + "px";
                document.body.appendChild(spaceship);

spaceships.push(spaceship);
            }
        }

// Move the player based on touch events
        function movePlayer(event) {
            if (!gameover) {
                var touchX = event.touches[0].clientX;
                var touchY = event.touches[0].clientY;

player.style.top = touchY - player.offsetHeight / 2 + "px";
                player.style.left = touchX - player.offsetWidth / 2 + "px";
            }
        }

// Shoot bullets on touch
        function shoot(event) {
            if (!gameover) {
                var bullet = document.createElement("div");
                bullet.className = "bullet";
                bullet.style.top = player.offsetTop - bullet.offsetHeight + "px";
                bullet.style.left = player.offsetLeft + player.offsetWidth / 2 - bullet.offsetWidth / 2 + "px";
                document.body.appendChild(bullet);

bullets.push(bullet);
            }
        }

// Update the game state
        function update() {
            if (!gameover) {
                // Move the bullets
                bullets.forEach(function (bullet, index) {
                    bullet.style.top = bullet.offsetTop - 5 + "px";

// Check bullet collision with spaceships
                    spaceships.forEach(function (spaceship, spaceshipIndex) {
                        if (isCollision(bullet, spaceship)) {
                            spaceship.remove();
                            spaceships.splice(spaceshipIndex, 1);
                            bullet.remove();
                            bullets.splice(index, 1);
                            score += 10;
                            document.getElementById("score").textContent = "Score: " + score;
                        }
                    });

// Remove bullets that move offscreen
                    if (bullet.offsetTop < -bullet.offsetHeight) {
                        bullet.remove();
                        bullets.splice(index, 1);
                    }
                });

// Move the spaceships
                spaceships.forEach(function (spaceship) {
                    spaceship.style.top = spaceship.offsetTop + 2 + "px";

// Check spaceship collision with player
                    if (isCollision(player, spaceship)) {
                        endGame();
                    }
                });

// Check if all spaceships are destroyed
                if (spaceships.length === 0) {
                    endGame();
                }
            }
        }

// Check collision between two elements
        function isCollision(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

return (
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top &&
                rect1.left < rect2.right &&
                rect1.right > rect2.left
            );
        }

// End the game and display game over message
        function endGame() {
            gameover = true;
            document.getElementById("game-over").style.display = "block";
        }

// Initialize the game
        function init() {
            createEntities();

// Start game updates
            setInterval(update, 20);
        }

// Register event listeners
        document.addEventListener("DOMContentLoaded", init);
        document.addEventListener("touchmove", movePlayer);
        document.addEventListener("touchstart", shoot);
    </script>
</body>
</html>
```

To play the game, save the code in a single HTML file (e.g., `game.html`), and make sure to have two pictogram images named `pictogram-player.png` (for the player) and `pictogram-spaceship.png` (for the spaceships) in the same directory as the HTML file. Then, open the HTML file in a web browser on your smartphone, and you should be able to play the game by touching and moving your finger on the screen to control the player and shoot down the spaceships.