Make a simple 2d side scrolling platformer game where I am trying to jump on all the blue platforms. Make there be three buttons: forward arrow(move forward. Backwar arrow. Move back. And jump. When I collide with a platform from below i go thru it, but if I collide from the top or side it is solid.'s game

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

No:10544

195

←

Prev Next

→

Make a simple 2d side scrolling platformer game wh..ALL
Developer Micah｜Date and time 23/8/1 1:42:24
Build time 45.745 sec｜Game capacity 5.857KB｜

Script

Sure! Here's an example of a simple 2D side-scrolling platformer game implemented as a single HTML file, using JavaScript and pictograms:

In this game, you control a player character represented by the pictogram `emozi_all/game.png`. The three buttons on your smartphone screen are emulated through the arrow keys on your keyboard. The blue platforms are solid, and you can jump on them or move left/right using the arrow keys. To play the game, copy the entire code and save it in a new HTML file. Make sure to replace `emozi_all/play.png` with an actual image file for the player character. Open the HTML file in a web browser that supports JavaScript, and you should be able to play the side-scrolling platformer game.

←

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 side-scrolling platformer game implemented as a single HTML file, using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Side-Scrolling Platformer</title>
    <style>
        #game {
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }

.player {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('player.png');
            background-size: cover;
        }

.platform {
            position: absolute;
            width: 80px;
            height: 20px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player" class="player"></div>
        <div id="platform1" class="platform" style="left: 100px; top: 100px;"></div>
        <div id="platform2" class="platform" style="left: 200px; top: 150px;"></div>
        <div id="platform3" class="platform" style="left: 300px; top: 50px;"></div>
    </div>

// Set initial player position and velocity
            var playerX = 0;
            var playerY = 0;
            var playerVX = 0;
            var playerVY = 0;
            var gravity = 0.5;

// Button event listeners
            document.addEventListener('keydown', function(event) {
                if (event.key === 'ArrowRight') {
                    playerVX = 3; // Move right
                } else if (event.key === 'ArrowLeft') {
                    playerVX = -3; // Move left
                } else if (event.key === 'ArrowUp') {
                    playerVY = -10; // Jump
                }
            });

document.addEventListener('keyup', function(event) {
                if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
                    playerVX = 0; // Stop horizontal movement
                }
            });

// Game loop
            function gameLoop() {
                // Update player position
                playerX += playerVX;
                playerY += playerVY;

// Apply gravity to player
                playerVY += gravity;

// Check collision with platforms
                for (var i = 0; i < platforms.length; i++) {
                    var platform = platforms[i];
                    var rect1 = player.getBoundingClientRect();
                    var rect2 = platform.getBoundingClientRect();
                    
                    if (rect1.bottom >= rect2.top &&
                        rect1.top <= rect2.bottom &&
                        rect1.right >= rect2.left &&
                        rect1.left <= rect2.right) {
                        // Collision occurred, check collision direction
                        var playerCenterX = playerX + rect1.width / 2;
                        var playerCenterY = playerY + rect1.height / 2;
                        var platformCenterX = rect2.left + rect2.width / 2;
                        var platformCenterY = rect2.top + rect2.height / 2;

var dx = playerCenterX - platformCenterX;
                        var dy = playerCenterY - platformCenterY;
                        var widthHalf = (rect1.width + rect2.width) / 2;
                        var heightHalf = (rect1.height + rect2.height) / 2;

if (Math.abs(dx) <= widthHalf && Math.abs(dy) <= heightHalf) {
                            var wy = widthHalf * dy;
                            var hx = heightHalf * dx;

if (wy > hx) {
                                if (wy > -hx) {
                                    playerY = rect2.top - rect1.height;
                                    playerVY = 0; // Colliding from top
                                } else {
                                    playerX = rect2.right;
                                    playerVX = 0; // Colliding from right
                                }
                            } else {
                                if (wy > -hx) {
                                    playerX = rect2.left - rect1.width;
                                    playerVX = 0; // Colliding from left
                                } else {
                                    playerY = rect2.bottom;
                                    playerVY = 0; // Colliding from bottom
                                }
                            }
                        }
                    }
                }

// Update player position on screen
                player.style.left = playerX + 'px';
                player.style.top = playerY + 'px';

// Request next frame
                requestAnimationFrame(gameLoop);
            }

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

In this game, you control a player character represented by the pictogram `player.png`. The three buttons on your smartphone screen are emulated through the arrow keys on your keyboard. The blue platforms are solid, and you can jump on them or move left/right using the arrow keys.

To play the game, copy the entire code and save it in a new HTML file. Make sure to replace `player.png` with an actual image file for the player character. Open the HTML file in a web browser that supports JavaScript, and you should be able to play the side-scrolling platformer game.