Shooting Game's game | AI game creator

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

No:9552

83

Shooting Game
Developer FirstNormalPerson｜Date and time 23/7/26 1:42:51
Build time 35.047 sec｜Game capacity 5.176KB｜

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript and enclosed in `` tags: <br><br> <br> <style> #game { width: 100%; height: 70vh; background-color: #000; justify-content: center; align-items: center; overflow: hidden; } #player { width: 50px; height: 50px; background-color: #fff; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .bullet { width: 10px; height: 20px; background-color: #f00; position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); } .enemy { width: 40px; height: 40px; background-color: #0f0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } </style> <div id="game"> <div id="player"></div> </div>

This code creates a simple shooting game where you control a player object and shoot bullets to hit moving enemy objects. The score is displayed in the page's title, and the game ends if an enemy collides with the player object. The game restarts after displaying the final score in an alert box. Please note that this is a basic implementation and can be improved upon with additional features and better game mechanics.

→ 　

0　

0　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript and enclosed in `<script>` tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        #game {
            width: 100%;
            height: 100vh;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .bullet {
            width: 10px;
            height: 20px;
            background-color: #f00;
            position: absolute;
            bottom: calc(100% + 5px);
            left: 50%;
            transform: translateX(-50%);
        }
        .enemy {
            width: 40px;
            height: 40px;
            background-color: #0f0;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
    </div>

<script>
        // Game variables
        var game = document.querySelector('#game');
        var player = document.querySelector('#player');
        var bullets = [];
        var enemies = [];
        var score = 0;

// Move player
        game.addEventListener('mousemove', function(event) {
            var xPosition = event.clientX - game.offsetLeft;
            player.style.left = xPosition + 'px';
        });

// Shoot bullets
        game.addEventListener('click', function() {
            var bullet = document.createElement('div');
            bullet.classList.add('bullet');
            bullet.style.left = player.offsetLeft + player.offsetWidth / 2 + 'px';
            game.appendChild(bullet);
            bullets.push(bullet);
        });

// Enemy creation and movement
        setInterval(function() {
            var enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.style.left = Math.random() * (game.offsetWidth - 40) + 'px';
            game.appendChild(enemy);
            enemies.push(enemy);
        }, 1000);

// Update game state
        setInterval(function() {
            // Move bullets
            bullets.forEach(function(bullet, bulletIndex) {
                var bulletTop = bullet.offsetTop;
                bullet.style.top = (bulletTop - 10) + 'px';

// Remove bullets when out of screen
                if (bulletTop <= -10) {
                    bullets.splice(bulletIndex, 1);
                    bullet.parentNode.removeChild(bullet);
                }

// Check for bullet collision with enemies
                enemies.forEach(function(enemy, enemyIndex) {
                    var bulletRect = bullet.getBoundingClientRect();
                    var enemyRect = enemy.getBoundingClientRect();

if (bulletRect.top <= enemyRect.bottom && bulletRect.right >= enemyRect.left && bulletRect.left <= enemyRect.right) {
                        bullets.splice(bulletIndex, 1);
                        bullet.parentNode.removeChild(bullet);

enemies.splice(enemyIndex, 1);
                        enemy.parentNode.removeChild(enemy);

score++;
                    }
                });
            });

// Move enemies
            enemies.forEach(function(enemy, enemyIndex) {
                var enemyTop = enemy.offsetTop;
                enemy.style.top = (enemyTop + 3) + 'px';

// Remove enemies when out of screen
                if (enemyTop >= game.offsetHeight) {
                    enemies.splice(enemyIndex, 1);
                    enemy.parentNode.removeChild(enemy);
                }

// Check for enemy collision with player
                var enemyRect = enemy.getBoundingClientRect();
                var playerRect = player.getBoundingClientRect();

if (enemyRect.bottom >= playerRect.top && enemyRect.right >= playerRect.left && enemyRect.left <= playerRect.right) {
                    endGame();
                }
            });

updateScore();
        }, 20);

// Update score
        function updateScore() {
            document.title = 'Score: ' + score;
        }

// End game
        function endGame() {
            clearInterval();
            alert('Game Over! Your score: ' + score);
            location.reload();
        }
    </script>
</body>
</html>
```

This code creates a simple shooting game where you control a player object and shoot bullets to hit moving enemy objects. The score is displayed in the page's title, and the game ends if an enemy collides with the player object. The game restarts after displaying the final score in an alert box.

Please note that this is a basic implementation and can be improved upon with additional features and better game mechanics.