A 2d platformer were you collect all the stars to complete the level's game

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

No:9577

119

←

Prev Next

→

A 2d platformer were you collect all the stars to ..ALL
Developer User4385｜Date and time 23/7/26 3:54:19
Build time 28.938 sec｜Game capacity 3.733KB｜

Script

Sure! Here's an example of a simple 2D platformer game where you need to collect all the stars to complete the level. It uses pictograms and can be played as a finished game. Note that this is just a basic implementation and can be expanded upon or customized further:

To play the game: 1. Copy the above code into a text editor and save it with a .html extension (e.g., game.html). 2. Open the file in a web browser. 3. Use the arrow keys to move the player left, right, or jump (arrow up). 4. Collect all the yellow stars to complete the level. 5. If you clear all the stars, an alert will appear congratulating you for completing the level. Feel free to customize the game further, add more levels, or enhance the graphics as desired.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>2D Platformer Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: left 0.2s, bottom 0.2s;
        }
        .star {
            width: 30px;
            height: 30px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="player"></div>
        <div class="star" style="top: 250px; left: 150px;"></div>
        <div class="star" style="top: 100px; left: 300px;"></div>
        
    </div>

let levelComplete = false;

function checkCollision() {
                for (const star of stars) {
                    if (isColliding(player, star)) {
                        star.style.display = "none";
                    }
                }

if (stars.every(star => star.style.display === "none")) {
                    levelComplete = true;
                    alert("Congratulations! You completed the level.");
                }
            }

function isColliding(element1, element2) {
                const rect1 = element1.getBoundingClientRect();
                const rect2 = element2.getBoundingClientRect();

return !(rect1.top > rect2.bottom ||
                    rect1.right < rect2.left ||
                    rect1.bottom < rect2.top ||
                    rect1.left > rect2.right);
            }

document.addEventListener("keydown", function(event) {
                const key = event.key;
                const playerLeft = parseInt(player.style.left);
                const playerBottom = parseInt(player.style.bottom);

if (levelComplete) {
                    return;
                }

if (key === "ArrowRight") {
                    player.style.left = (playerLeft + 10) + "px";
                } else if (key === "ArrowLeft") {
                    player.style.left = (playerLeft - 10) + "px";
                } else if (key === "ArrowUp") {
                    player.style.bottom = (playerBottom + 50) + "px";
                    setTimeout(() => {
                        player.style.bottom = playerBottom + "px";
                    }, 200);
                }

checkCollision();
            });
        });
    </script>
</body>
</html>
```

To play the game:
1. Copy the above code into a text editor and save it with a .html extension (e.g., game.html).
2. Open the file in a web browser.
3. Use the arrow keys to move the player left, right, or jump (arrow up).
4. Collect all the yellow stars to complete the level.
5. If you clear all the stars, an alert will appear congratulating you for completing the level.

Feel free to customize the game further, add more levels, or enhance the graphics as desired.