AI game creator

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

No:31590

←

Prev Next

→

Shooting battle
Developer User15185｜Date and time 23/12/27 16:42:28
Build time 36.506 sec｜Game capacity 5.203KB｜

Script

Sure, here's a simple shooting battle game implemented as a single HTML file using JavaScript:

This game allows the player to control a character (represented by a white square) at the bottom of the screen using left and right arrow keys. The player can shoot bullets (represented by blue squares) using the spacebar key to hit the descending enemies (represented by red squares). The objective is to shoot down as many enemies as possible, and the score is displayed in the title of the browser tab.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple shooting battle game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Battle Game</title>
    <style>
        body {
            background-color: black;
            overflow: hidden;
        }
        #player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: white;
        }
        .enemy {
            position: absolute;
            bottom: 100%;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .bullet {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <script>
        // Game variables
        var player = document.getElementById('player');
        var enemies = [];
        var bullets = [];
        var score = 0;
        
        // Player controls
        document.addEventListener('keydown', function(event) {
            if (event.keyCode === 37) { // Left arrow key
                movePlayer(-10);
            } else if (event.keyCode === 39) { // Right arrow key
                movePlayer(10);
            } else if (event.keyCode === 32) { // Space key (Shoot)
                shoot();
            }
        });
        
        setInterval(gameLoop, 20);
        
        // Game loop
        function gameLoop() {
            createEnemy();
            moveEnemies();
            moveBullets();
            detectCollision();
            updateScore();
        }
        
        // Move player
        function movePlayer(delta) {
            var playerPos = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
            player.style.left = (playerPos + delta) + 'px';
        }
        
        // Create enemy
        function createEnemy() {
            var enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.left = Math.random() * (window.innerWidth - 30) + 'px';
            document.body.appendChild(enemy);
            enemies.push(enemy);
        }
        
        // Move enemies
        function moveEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemyPos = parseInt(window.getComputedStyle(enemies[i]).getPropertyValue('bottom'));
                enemies[i].style.bottom = (enemyPos - 3) + 'px';
                if (enemyPos < -30) {
                    enemies[i].parentNode.removeChild(enemies[i]);
                    enemies.splice(i, 1);
                    score -= 10;
                }
            }
        }
        
        // Shoot bullets
        function shoot() {
            var bullet = document.createElement('div');
            bullet.className = 'bullet';
            bullet.style.left = (parseInt(player.style.left) + 20) + 'px';
            bullet.style.bottom = '50px';
            document.body.appendChild(bullet);
            bullets.push(bullet);
        }
        
        // Move bullets
        function moveBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bulletPos = parseInt(window.getComputedStyle(bullets[i]).getPropertyValue('bottom'));
                bullets[i].style.bottom = (bulletPos + 5) + 'px';
                if (bulletPos > window.innerHeight) {
                    bullets[i].parentNode.removeChild(bullets[i]);
                    bullets.splice(i, 1);
                }
            }
        }
        
        // Detect collision
        function detectCollision() {
            for (var i = 0; i < bullets.length; i++) {
                for (var j = 0; j < enemies.length; j++) {
                    var bulletRect = bullets[i].getBoundingClientRect();
                    var enemyRect = enemies[j].getBoundingClientRect();
                    if (bulletRect.left < enemyRect.left + enemyRect.width &&
                        bulletRect.left + bulletRect.width > enemyRect.left &&
                        bulletRect.top < enemyRect.top + enemyRect.height &&
                        bulletRect.top + bulletRect.height > enemyRect.top) {
                        bullets[i].parentNode.removeChild(bullets[i]);
                        bullets.splice(i, 1);
                        enemies[j].parentNode.removeChild(enemies[j]);
                        enemies.splice(j, 1);
                        score += 100;
                    }
                }
            }
        }
        
        // Update score
        function updateScore() {
            document.title = 'Score: ' + score;
        }
    </script>
</body>
</html>
```