Make a 2d platformer with falling bullets's game

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

No:13123

130

←

Prev Next

→

Make a 2d platformer with falling bullets
Developer User5767｜Date and time 23/8/27 3:07:04
Build time 21.634 sec｜Game capacity 4.139KB｜

Script

Sure, here's an example of a simple 2D platformer game with falling bullets implemented in a single HTML file using JavaScript:

This code sets up a game window with a player character (red square) and falling bullets (black circles). The player can be moved left or right using the arrow keys, and bullets are continuously created and dropped from the top of the window. If the player collides with a bullet, a "Game Over!" message is displayed. You can save this code in a `.html` file and run it in a web browser to play the game. Note that this implementation assumes desktop keyboard inputs, but you can adapt it to smartphone touch controls if needed.

←

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 2D platformer game with falling bullets implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            left: 0;
            top: 0;
        }
        
        .bullet {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <script>
        // Game settings
        var gameWidth = 500;
        var gameHeight = 300;
        var playerSpeed = 5;
        var bulletSpeed = 3;
        
        var playerX = 0;
        var playerY = 0;
        var bullets = [];
        
        // Create the player
        var player = document.createElement('div');
        player.id = 'player';
        document.body.appendChild(player);
        
        // Function to handle player movement
        function movePlayer(event) {
            var key = event.keyCode || event.which;
            switch (key) {
                case 37: // Left arrow key
                    playerX -= playerSpeed;
                    break;
                case 39: // Right arrow key
                    playerX += playerSpeed;
                    break;
            }
        }
        
        // Function to create and drop bullets
        function createBullet() {
            var bullet = document.createElement('div');
            bullet.className = 'bullet';
            bullet.style.left = Math.floor(Math.random() * (gameWidth - 10)) + 'px'; // Random X position
            bullet.style.top = '0px'; // Start from top
            document.body.appendChild(bullet);
            bullets.push(bullet);
        }
        
        // Function to move bullets downwards
        function moveBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                var bulletPosY = parseInt(bullet.style.top);
                if (bulletPosY >= gameHeight) {
                    // Bullet reached bottom, remove it
                    bullet.parentNode.removeChild(bullet);
                    bullets.splice(i, 1);
                } else {
                    bullet.style.top = (bulletPosY + bulletSpeed) + 'px';
                }
            }
        }
        
        // Function to check for collisions between player and bullets
        function checkCollisions() {
            var playerRect = player.getBoundingClientRect();
            
            for (var i = 0; i < bullets.length; i++) {
                var bulletRect = bullets[i].getBoundingClientRect();
                
                if (playerRect.left < bulletRect.right &&
                    playerRect.right > bulletRect.left &&
                    playerRect.top < bulletRect.bottom &&
                    playerRect.bottom > bulletRect.top) {
                    // Player collided with a bullet
                    alert('Game Over!');
                }
            }
        }
        
        // Game loop
        function gameLoop() {
            moveBullets();
            checkCollisions();
            
            player.style.left = playerX + 'px';
            
            requestAnimationFrame(gameLoop);
        }
        
        // Start game loop
        document.addEventListener('keydown', movePlayer);
        setInterval(createBullet, 1000); // Create a bullet every second
        gameLoop();
    </script>
</body>
</html>
```

This code sets up a game window with a player character (red square) and falling bullets (black circles). The player can be moved left or right using the arrow keys, and bullets are continuously created and dropped from the top of the window. If the player collides with a bullet, a "Game Over!" message is displayed.

You can save this code in a `.html` file and run it in a web browser to play the game. Note that this implementation assumes desktop keyboard inputs, but you can adapt it to smartphone touch controls if needed.