Shooting games like free fire lobby's game

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

No:19196

←

Prev Next

→

Shooting games like free fire lobby
Developer User8462｜Date and time 23/10/2 1:06:25
Build time 30.017 sec｜Game capacity 7.302KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript. Please note that this is a basic implementation and can be further enhanced as per your requirements.

Score: 0

This HTML file displays a game area where you control a player represented by a red rectangle. To move the player, touch and drag your finger horizontally within the game area on your smartphone. To shoot bullets, remove your finger from the game area. The objective is to shoot the green enemies before they reach the bottom of the game area while avoiding collisions between the player and enemies. Please note that this is just a basic example, and you can enhance it further by adding more features, levels, power-ups, and graphics as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #score {
            font-size: 24px;
            margin-bottom: 20px;
        }
        #game-area {
            width: 200px;
            height: 400px;
            background-color: lightgray;
            position: relative;
        }
        .player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
        }
        .bullet {
            width: 10px;
            height: 20px;
            background-color: blue;
            position: absolute;
        }
        .enemy {
            width: 40px;
            height: 40px;
            background-color: green;
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score">Score: 0</div>
        <div id="game-area">
            <div id="player" class="player"></div>
        </div>
    </div>

// Generate random number between min and max
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

// Update score
        function updateScore() {
            var scoreElement = document.getElementById("score");
            scoreElement.textContent = "Score: " + score;
        }

// Move player
        function movePlayer(event) {
            var gameAreaRect = gameArea.getBoundingClientRect();
            var x = event.touches[0].clientX - gameAreaRect.left - player.clientWidth / 2;
            
            // Limit player movement within game area
            if (x < 0) {
                x = 0;
            } else if (x > gameArea.clientWidth - player.clientWidth) {
                x = gameArea.clientWidth - player.clientWidth;
            }

player.style.left = x + "px";
        }

// Shoot bullet
        function shootBullet() {
            var bullet = document.createElement("div");
            bullet.className = "bullet";
            bullet.style.left = (player.offsetLeft + player.clientWidth / 2 - 5) + "px";
            bullet.style.bottom = "50px";
            gameArea.appendChild(bullet);

bullets.push(bullet);
        }

// Move bullets
        function moveBullets() {
            for (var i = bullets.length - 1; i >= 0; i--) {
                var bullet = bullets[i];
                bullet.style.bottom = (parseInt(bullet.style.bottom) + 10) + "px";
                
                // Remove bullet if it reaches top of game area
                if (parseInt(bullet.style.bottom) >= gameArea.clientHeight) {
                    bullets.splice(i, 1);
                    bullet.parentNode.removeChild(bullet);
                } else {
                    // Check collision with enemies
                    for (var j = 0; j < enemies.length; j++) {
                        var enemy = enemies[j];
                        if (checkCollision(bullet, enemy)) {
                            bullets.splice(i, 1);
                            bullet.parentNode.removeChild(bullet);
                            score += 10;
                            updateScore();
                            enemies.splice(j, 1);
                            enemy.parentNode.removeChild(enemy);
                        }
                    }
                }
            }
        }

// Check collision between two elements
        function checkCollision(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

return rect1.left < rect2.right &&
                rect1.right > rect2.left &&
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top;
        }

// Create enemy
        function createEnemy() {
            var enemy = document.createElement("div");
            enemy.className = "enemy";
            enemy.style.left = getRandomNumber(0, gameArea.clientWidth - 40) + "px";
            gameArea.appendChild(enemy);

enemies.push(enemy);
        }

// Move enemies
        function moveEnemies() {
            for (var i = enemies.length - 1; i >= 0; i--) {
                var enemy = enemies[i];
                enemy.style.top = (parseInt(enemy.style.top) + 5) + "px";

// Remove enemy if it reaches bottom of game area
                if (parseInt(enemy.style.top) >= gameArea.clientHeight) {
                    enemies.splice(i, 1);
                    enemy.parentNode.removeChild(enemy);
                } else {
                    // Check collision with player
                    if (checkCollision(enemy, player)) {
                        gameOver();
                    }
                }
            }
        }

// Game over
        function gameOver() {
            clearInterval(gameLoop);
            alert("Game Over! Your score is: " + score);
            score = 0;
            updateScore();

// Reset game area
            while (bullets.length > 0) {
                bullets[0].parentNode.removeChild(bullets[0]);
                bullets.splice(0, 1);
            }

while (enemies.length > 0) {
                enemies[0].parentNode.removeChild(enemies[0]);
                enemies.splice(0, 1);
            }

// Start new game loop after alert
            gameLoop = setInterval(gameLoopHandler, 500);
        }

// Game loop handler
        function gameLoopHandler() {
            createEnemy();
            moveBullets();
            moveEnemies();
        }

// Start game loop
        gameLoop = setInterval(gameLoopHandler, 500);

// Register touch event listener for player movement
        gameArea.addEventListener("touchmove", movePlayer);

// Register touch event listener for shooting bullet
        gameArea.addEventListener("touchend", shootBullet);
    </script>
</body>
</html>
```

Please note that this is just a basic example, and you can enhance it further by adding more features, levels, power-ups, and graphics as per your requirements.