Simple platformer like super mario bros.'s game

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

No:39222

←

Prev Next

→

Simple platformer like super mario bros.
Developer User17554｜Date and time 24/1/27 9:20:55
Build time 11.649 sec｜Game capacity 3.644KB｜

Script

Sure! Here's a simple platformer game resembling Super Mario Bros implemented as a single HTML file using JavaScript:

In this game, a player represented by a colored square can move horizontally using the left and right arrow keys and jump using the up arrow key. The player needs to navigate through the platforms represented by colored rectangles without falling off. You can view and play the game by saving the above code as a `.html` file and opening it in a web browser. The player can move left and right, and will collide with the platforms to prevent falling through them. You can modify the styling, physics, and add more levels to make it a complete game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple platformer game resembling Super Mario Bros implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Simple Platformer Game</title>
    <style>
        #game {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: #a9d0f5;
            overflow: hidden;
        }

#player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #f5b7b1;
            bottom: 0;
            left: 0;
        }

.platform {
            position: absolute;
            width: 100px;
            height: 20px;
            background-color: #58d68d;
        }

#platform1 {
            bottom: 100px;
            left: 100px;
        }

#platform2 {
            bottom: 200px;
            left: 200px;
        }

#platform3 {
            bottom: 300px;
            left: 300px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
        <div id="platform1" class="platform"></div>
        <div id="platform2" class="platform"></div>
        <div id="platform3" class="platform"></div>
    </div>

// Platform variables
        var platforms = document.getElementsByClassName('platform');

// Event listener to control player movement
        document.addEventListener('keydown', function (event) {
            if (event.key === 'ArrowRight') {
                playerLeft += 10;
                player.style.left = playerLeft + 'px';
            } else if (event.key === 'ArrowLeft') {
                playerLeft -= 10;
                player.style.left = playerLeft + 'px';
            } else if (event.key === 'ArrowUp') {
                playerBottom += 100;
                player.style.bottom = playerBottom + 'px';
            }
        });

// Collision detection between player and platforms
        function detectCollision() {
            for (var i = 0; i < platforms.length; i++) {
                var platform = platforms[i];
                var platformRect = platform.getBoundingClientRect();
                var playerRect = player.getBoundingClientRect();

if (
                    playerRect.bottom >= platformRect.top &&
                    playerRect.bottom <= platformRect.bottom &&
                    playerRect.left >= platformRect.left &&
                    playerRect.right <= platformRect.right
                ) {
                    playerBottom = platformRect.top - player.offsetHeight;
                    player.style.bottom = playerBottom + 'px';
                }
            }
        }

// Game loop
        function gameLoop() {
            detectCollision();
            requestAnimationFrame(gameLoop);
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>
```

You can view and play the game by saving the above code as a `.html` file and opening it in a web browser. The player can move left and right, and will collide with the platforms to prevent falling through them. You can modify the styling, physics, and add more levels to make it a complete game.