Shooting with buttons's game

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

No:42963

←

Prev Next

→

Shooting with buttons
Developer User19028｜Date and time 24/2/13 15:44:00
Build time 14.752 sec｜Game capacity 5.218KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

This game allows you to control a player character with a smartphone buttons to shoot bullets and score points by hitting enemies. The player can tap the screen to shoot bullets. The enemies move downwards, and when a bullet collides with an enemy, both the bullet and enemy are removed, and the player's score increases. Please note that the game assumes the existence of two image files (`emozi_all/game.png` and `emozi_all/enemy.png`) for the player and enemy visuals, respectively. You can replace these with your own image files or use appropriate pictograms/icons. Feel free to modify and enhance this game to suit your needs!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        #container {
            position: relative;
            width: 300px;
            height: 400px;
            overflow: hidden;
            border: 1px solid #000;
        }
        #player {
            position: absolute;
            left: 135px;
            bottom: 10px;
            width: 30px;
            height: 30px;
            background-image: url('player.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .bullet {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: red;
        }
        .enemy {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('enemy.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="player"></div>
    </div>
    <script>
        var container = document.getElementById("container");
        var player = document.getElementById("player");
        var bullets = [];
        var enemies = [];
        
        var playerX = 135;
        var bulletSpeed = 5;
        var enemySpeed = 2;
        var score = 0;
        
        container.addEventListener("click", shoot);
        
        function shoot(event) {
            var bullet = document.createElement("div");
            bullet.classList.add("bullet");
            bullet.style.left = (playerX + 10) + "px";
            container.appendChild(bullet);
            bullets.push(bullet);
        }
        
        function moveBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                var top = parseInt(bullet.style.top || "400");
                top -= bulletSpeed;
                bullet.style.top = top + "px";
                
                if (top < -10) {
                    bullets.splice(i, 1);
                    container.removeChild(bullet);
                    i--;
                }
            }
        }
        
        function createEnemy() {
            var enemy = document.createElement("div");
            enemy.classList.add("enemy");
            enemy.style.left = Math.floor(Math.random() * 270) + "px";
            enemy.style.top = "-30px";
            container.appendChild(enemy);
            enemies.push(enemy);
        }
        
        function moveEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                var top = parseInt(enemy.style.top || "400");
                top += enemySpeed;
                enemy.style.top = top + "px";
                
                if (top > 400) {
                    enemies.splice(i, 1);
                    container.removeChild(enemy);
                    i--;
                }
            }
        }
        
        function checkCollision() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                
                for (var j = 0; j < enemies.length; j++) {
                    var enemy = enemies[j];
                    
                    var bulletRect = bullet.getBoundingClientRect();
                    var enemyRect = enemy.getBoundingClientRect();
                    
                    if (bulletRect.left < enemyRect.right && bulletRect.right > enemyRect.left &&
                        bulletRect.top < enemyRect.bottom && bulletRect.bottom > enemyRect.top) {
                        score++;
                        bullets.splice(i, 1);
                        container.removeChild(bullet);
                        i--;
                        enemies.splice(j, 1);
                        container.removeChild(enemy);
                        break;
                    }
                }
            }
        }
        
        function updateScore() {
            document.getElementById("score").innerHTML = "Score: " + score;
        }
        
        function gameLoop() {
            moveBullets();
            moveEnemies();
            checkCollision();
            updateScore();
            
            if (Math.random() < 0.02) {
                createEnemy();
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        gameLoop();
    </script>
</body>
</html>
```

Please note that the game assumes the existence of two image files (`player.png` and `enemy.png`) for the player and enemy visuals, respectively. You can replace these with your own image files or use appropriate pictograms/icons.

Feel free to modify and enhance this game to suit your needs!