AI game creator

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

No:10890

118

←

Prev Next

→

Shooting Game
Developer User4710｜Date and time 23/8/5 16:12:59
Build time 40.242 sec｜Game capacity 6.907KB｜

Script

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript. The game can be played on a smartphone and uses pictograms for visuals.

To play the game: 1. Copy the above code into a new HTML file (e.g., shooting_game.html). 2. Open the file in a web browser on your smartphone. 3. Use the left and right arrow keys to move the player (red square). 4. Press the spacebar to shoot bullets (yellow circles) at the falling emoji enemies. 5. Avoid colliding with the enemies and try to shoot them down to increase your score. 6. The game will be over if an enemy reaches the bottom of the game board or if the player collides with an enemy. 7. After the game ends, you can restart the game by tapping on the alert prompt. Note: This is a basic implementation of a shooting game and can be further enhanced with additional features, levels, and animations. Feel free to modify and improve it according to your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript. The game can be played on a smartphone and uses pictograms for visuals.

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            width: 100%;
            height: 400px;
            background-color: black;
            position: relative;
        }
        
        #player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .bullet {
            width: 10px;
            height: 10px;
            background-color: yellow;
            position: absolute;
        }
        
        .emoji {
            font-size: 60px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player"></div>
    </div>
    
    <script>
        function createBullet() {
            const bullet = document.createElement('div');
            bullet.className = 'bullet';
            bullet.style.bottom = '50px';
            bullet.style.left = `${playerLeft + 20}px`;
            gameBoard.appendChild(bullet);
            
            const bulletMoveInterval = setInterval(() => {
                const bulletTop = parseInt(bullet.style.bottom);
                bullet.style.bottom = `${bulletTop + 5}px`;
                
                if (checkCollision(bullet)) {
                    clearInterval(bulletMoveInterval);
                    bullet.remove();
                    increaseScore();
                } else if (bulletTop > 400) {
                    clearInterval(bulletMoveInterval);
                    bullet.remove();
                }
            }, 10);
        }
        
        function checkCollision(bullet) {
            const enemies = document.querySelectorAll('.emoji');
            
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                const rect1 = bullet.getBoundingClientRect();
                const rect2 = enemy.getBoundingClientRect();
                
                if (rect1.top <= rect2.bottom &&
                    rect1.right >= rect2.left &&
                    rect1.bottom >= rect2.top &&
                    rect1.left <= rect2.right) {
                    enemy.remove();
                    return true;
                }
            }
            
            return false;
        }
        
        function createEnemy() {
            const emoji = document.createElement('div');
            emoji.className = 'emoji';
            emoji.innerText = getEmoji();
            emoji.style.top = '-60px';
            emoji.style.left = `${getRandomPosition()}px`;
            gameBoard.appendChild(emoji);
            
            const enemyMoveInterval = setInterval(() => {
                const enemyTop = parseInt(emoji.style.top);
                emoji.style.top = `${enemyTop + 5}px`;
                
                if (enemyTop > 400) {
                    clearInterval(enemyMoveInterval);
                    gameOver();
                }
            }, 10);
        }
        
        function getEmoji() {
            const emojis = ['🚀', '🛸', '🌟', '🎯', '💣'];
            return emojis[Math.floor(Math.random() * emojis.length)];
        }
        
        function getRandomPosition() {
            return Math.floor(Math.random() * (window.innerWidth - 60));
        }
        
        function increaseScore() {
            score++;
            scoreDisplay.innerText = `Score: ${score}`;
        }
        
        function gameOver() {
            alert(`Game Over! Your Score: ${score}`);
            clearInterval(enemyInterval);
            clearInterval(gameInterval);
            
            const bullets = document.querySelectorAll('.bullet');
            const enemies = document.querySelectorAll('.emoji');
            
            bullets.forEach(bullet => bullet.remove());
            enemies.forEach(enemy => enemy.remove());
            
            score = 0;
            scoreDisplay.innerText = 'Score: 0';
            
            startGame();
        }
        
        function movePlayer(event) {
            if (event.key === 'ArrowLeft') {
                playerLeft -= 10;
                player.style.left = `${playerLeft}px`;
            }
            
            if (event.key === 'ArrowRight') {
                playerLeft += 10;
                player.style.left = `${playerLeft}px`;
            }
            
            if (event.key === ' ') {
                createBullet();
            }
        }
        
        let score = 0;
        const gameBoard = document.getElementById('game-board');
        const player = document.getElementById('player');
        const scoreDisplay = document.createElement('div');
        scoreDisplay.className = 'emoji';
        scoreDisplay.innerText = 'Score: 0';
        scoreDisplay.style.top = '10px';
        scoreDisplay.style.right = '10px';
        gameBoard.appendChild(scoreDisplay);
        
        let playerLeft = window.innerWidth / 2 - 25;
        window.addEventListener('keydown', movePlayer);
        
        function startGame() {
            enemyInterval = setInterval(createEnemy, 1000);
            gameInterval = setInterval(() => {
                const playerRect = player.getBoundingClientRect();
                const enemies = document.querySelectorAll('.emoji');
                
                enemies.forEach(enemy => {
                    const enemyRect = enemy.getBoundingClientRect();
                    
                    if (playerRect.top <= enemyRect.bottom &&
                        playerRect.right >= enemyRect.left &&
                        playerRect.bottom >= enemyRect.top &&
                        playerRect.left <= enemyRect.right) {
                        gameOver();
                    }
                });
            }, 10);
        }
        
        startGame();
    </script>
</body>
</html>
```

To play the game:
1. Copy the above code into a new HTML file (e.g., shooting_game.html).
2. Open the file in a web browser on your smartphone.
3. Use the left and right arrow keys to move the player (red square).
4. Press the spacebar to shoot bullets (yellow circles) at the falling emoji enemies.
5. Avoid colliding with the enemies and try to shoot them down to increase your score.
6. The game will be over if an enemy reaches the bottom of the game board or if the player collides with an enemy.
7. After the game ends, you can restart the game by tapping on the alert prompt.

Note: This is a basic implementation of a shooting game and can be further enhanced with additional features, levels, and animations. Feel free to modify and improve it according to your requirements.