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

No:10292

115

←

Prev Next

→

Shooting Game
Developer User4521｜Date and time 23/7/30 2:21:20
Build time 38.369 sec｜Game capacity 6.499KB｜

Script

Sure, here's a simple shooting game implemented as a single HTML file using JavaScript. The game can be played on a smartphone device and includes pictograms for a better visual experience.

Shooting Game

🚀

To play the game, you can copy the above code and save it as an HTML file. Then, open the file in a web browser on your smartphone. You will see a rocket pictogram representing the player at the bottom of the screen. Tap anywhere on the screen to shoot bullets and try to hit the red enemies (represented by circles). The player can move left and right by dragging across the screen. The objective is to shoot down as many enemies as possible before they reach the bottom of the screen. Good luck and have fun!

←

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 device and includes pictograms for a better visual experience.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        body {
            text-align: center;
            background-color: black;
            color: white;
            font-family: Arial, sans-serif;
        }
        
        #game-container {
            position: relative;
            width: 100%;
            height: 400px;
        }
        
        #player {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 50px;
        }
        
        .bullet {
            position: absolute;
            width: 10px;
            height: 20px;
            background-color: white;
        }
        
        .enemy {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h1>Shooting Game</h1>
    <div id="game-container">
        <div id="player">🚀</div>
    </div>
    
    <script>
        // Game configuration
        const BULLET_SPEED = 5; // Speed in pixels
        const ENEMY_SPEED = 2; // Speed in pixels
        const ENEMY_SPAWN_INTERVAL = 1500; // Interval in milliseconds
        
        let gameContainer;
        let player;
        let bullets;
        let enemies;
        let lastEnemySpawnTime;
        let gameInterval;
        
        // Initialize the game
        function init() {
            gameContainer = document.getElementById('game-container');
            player = document.getElementById('player');
            bullets = [];
            enemies = [];
            lastEnemySpawnTime = Date.now();
            
            // Event listener for player shooting
            gameContainer.addEventListener('click', shoot);
            
            // Start the game loop
            gameInterval = setInterval(gameLoop, 10);
        }
        
        // Main game loop
        function gameLoop() {
            updatePlayer();
            updateBullets();
            updateEnemies();
        }
        
        // Update player position according to touch event
        function updatePlayer() {
            gameContainer.addEventListener('touchmove', function(event) {
                event.preventDefault();
                let touch = event.touches[0];
                let newX = touch.clientX - gameContainer.offsetLeft;
                if (newX >= player.offsetWidth / 2 && newX <= gameContainer.offsetWidth - player.offsetWidth / 2) {
                    player.style.left = newX + 'px';
                }
            });
        }
        
        // Player shoots bullets
        function shoot(event) {
            event.stopPropagation();
            let bullet = document.createElement('div');
            bullet.classList.add('bullet');
            bullet.style.left = (player.offsetLeft + player.offsetWidth / 2 - bullet.offsetWidth / 2) + 'px';
            bullets.push(bullet);
            gameContainer.appendChild(bullet);
        }
        
        // Update bullets position and check for collisions
        function updateBullets() {
            for (let i = bullets.length - 1; i >= 0; i--) {
                let bullet = bullets[i];
                let bulletTop = bullet.offsetTop - BULLET_SPEED;
                if (bulletTop < 0) {
                    bullets.splice(i, 1);
                    gameContainer.removeChild(bullet);
                } else {
                    bullet.style.top = bulletTop + 'px';
                }
            }
        }
        
        // Update enemies position, check for collisions, and spawn new enemies
        function updateEnemies() {
            for (let i = enemies.length - 1; i >= 0; i--) {
                let enemy = enemies[i];
                let enemyTop = enemy.offsetTop + ENEMY_SPEED;
                if (enemyTop > gameContainer.offsetHeight) {
                    enemies.splice(i, 1);
                    gameContainer.removeChild(enemy);
                } else {
                    enemy.style.top = enemyTop + 'px';
                    checkCollision(enemy);
                }
            }
            
            if (Date.now() - lastEnemySpawnTime > ENEMY_SPAWN_INTERVAL) {
                spawnEnemy();
                lastEnemySpawnTime = Date.now();
            }
        }
        
        // Spawn a new enemy at a random position
        function spawnEnemy() {
            let enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.style.left = Math.random() * (gameContainer.offsetWidth - enemy.offsetWidth) + 'px';
            gameContainer.appendChild(enemy);
            enemies.push(enemy);
        }
        
        // Check for collision between bullets and enemies
        function checkCollision(enemy) {
            for (let i = bullets.length - 1; i >= 0; i--) {
                let bullet = bullets[i];
                if (isColliding(bullet, enemy)) {
                    bullets.splice(i, 1);
                    enemies.splice(enemies.indexOf(enemy), 1);
                    gameContainer.removeChild(bullet);
                    gameContainer.removeChild(enemy);
                }
            }
        }
        
        // Check if two elements are colliding
        function isColliding(element1, element2) {
            let rect1 = element1.getBoundingClientRect();
            let rect2 = element2.getBoundingClientRect();
            return !(
                rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom
            );
        }
        
        // Start the game
        init();
    </script>
</body>
</html>
```