AI game creator

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

No:30716

174

←

Prev Next

→

Jump and run game
Developer User14077｜Date and time 23/12/24 1:30:12
Build time 17.369 sec｜Game capacity 3.768KB｜

Script

Als Programmierer werde ich ein Jump-and-Run-Spiel als einzelne HTML-Datei implementieren, das JavaScript verwendet und von script-Tags umschlossen ist. Das Spiel wird für die Bedienung auf einem Smartphone ausgelegt sein und, wenn möglich, Piktogramme verwenden. Das Programm wird vollständig sein und direkt ausgeführt werden können. Viel Spaß beim Spielen!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jump and Run Spiel</title>
    <style>
        #game {
            position: relative;
            width: 100%;
            height: 300px; /* Anpassen Sie die Höhe entsprechend Ihrer Bedürfnisse */
            background-color: #c7e0f4; /* Ändern Sie dies für die Spielhintergrundfarbe */
        }
        #player {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px; /* Anpassen Sie die Spielergröße entsprechend Ihrer Bedürfnisse */
            height: 50px;
            background-color: red; /* Ändern Sie dies für die Spielerfarbe */
        }
        .obstacle {
            position: absolute;
            bottom: 0;
            width: 50px; /* Anpassen Sie die Hindernisgröße entsprechend Ihrer Bedürfnisse */
            height: 50px;
            background-color: black; /* Ändern Sie dies für die Hindernisfarbe */
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
    </div>
    <script>
        // Spieler-Objekt mit Position und Geschwindigkeit
        var player = {
            x: 0,
            y: 0,
            speed: 5
        };

// Hindernis-Array
        var obstacles = [];

// Spielbereich
        var gameElement = document.getElementById("game");

// Spieler-Element
        var playerElement = document.getElementById("player");

// Spielschleife
        function gameLoop() {
            // Bewegung des Spielers
            player.x += player.speed;

// Kollisionserkennung
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
                if (player.x < obstacle.x + obstacle.width &&
                    player.x + playerElement.offsetWidth > obstacle.x &&
                    player.y < obstacle.y + obstacle.height &&
                    player.y + playerElement.offsetHeight > obstacle.y) {
                    // Kollision mit Hindernis
                    player.speed = 0;
                    alert("Spiel vorbei!");
                    break;
                }
            }

// Spieler-Elemente aktualisieren
            playerElement.style.left = player.x + "px";
            playerElement.style.top = player.y + "px";

// Nächster Schleifendurchlauf
            requestAnimationFrame(gameLoop);
        }

// Hindernisse erstellen und platziere
        function createObstacle() {
            var obstacle = document.createElement("div");
            obstacle.classList.add("obstacle");
            obstacle.x = gameElement.offsetWidth;
            obstacle.y = gameElement.offsetHeight - obstacle.offsetHeight;
            obstacle.style.left = obstacle.x + "px";
            obstacle.style.top = obstacle.y + "px";
            obstacles.push(obstacle);
            gameElement.appendChild(obstacle);
        }

// Tastatureingabe erfassen (hier für Smartphone nicht relevant)
        window.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp" || event.keyCode === 32) {
                // Springen
                player.y -= player.speed * 2;
            }
        });

// Spiel starten
        gameLoop();

// Hindernisse erstellen (alle 2 Sekunden)
        setInterval(createObstacle, 2000);
    </script>
</body>
</html>