AI game creator

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

No:12532

←

Prev Next

→

Car racing
Developer User5180｜Date and time 23/8/19 9:18:06
Build time 17.474 sec｜Game capacity 4.527KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #222;
            color: white;
            text-align: center;
            font-family: Arial, sans-serif;
        }

.car {
            position: absolute;
            bottom: 0;
            width: 64px;
            height: 128px;
            background-image: url('car.png');
            background-size: cover;
        }
    </style>
    <script>
        // Variablen für das Spiel
        var car;
        var road;
        var gameLoop;
        var carSpeed = 5;
        var roadSpeed = 10;

// Funktion zum Starten des Spiels
        function startGame() {
            // Erstellung des Autos und der Straße
            car = new component(64, 128, "car.png", window.innerWidth / 2 - 32, window.innerHeight - 160, "image");
            road = new component(window.innerWidth, window.innerHeight, "#444", 0, 0);

// Anzeige der Spielkomponenten
            car.display();
            road.display();

// Initialisierung der Spiel-Schleife
            gameLoop = setInterval(updateGame, 20);
        }

// Komponenten-Konstruktor
        function component(width, height, color, x, y, type) {
            this.width = width;
            this.height = height;

if (type === "image") {
                this.element = document.createElement("div");
                this.element.style.backgroundImage = "url('" + color + "')";
                this.element.style.backgroundSize = "cover";
            } else {
                this.element = document.createElement("div");
                this.element.style.backgroundColor = color;
            }

this.element.style.width = this.width + "px";
            this.element.style.height = this.height + "px";
            this.element.style.position = "absolute";
            this.element.style.left = x + "px";
            this.element.style.top = y + "px";

document.body.appendChild(this.element);

this.setX = function (x) {
                this.element.style.left = x + "px";
            }

this.setY = function (y) {
                this.element.style.top = y + "px";
            }

this.getX = function () {
                return parseInt(this.element.style.left);
            }

this.getY = function () {
                return parseInt(this.element.style.top);
            }

this.display = function () {
                this.element.style.display = "block";
            }

this.hide = function () {
                this.element.style.display = "none";
            }
        }

// Funktion zur Aktualisierung des Spiels
        function updateGame() {
            // Überprüfen der Tastatur-Eingabe für Steuerung
            if (keys.ArrowLeft && car.getX() > 0) {
                car.setX(car.getX() - carSpeed);
            }

if (keys.ArrowRight && car.getX() < window.innerWidth - car.width) {
                car.setX(car.getX() + carSpeed);
            }

// Aktualisierung der Straße
            road.setY(road.getY() + roadSpeed);

// Überprüfen auf Kollisionen
            if (car.getY() < road.height && car.getY() + car.height > road.getY()) {
                if (car.getX() + car.width > road.getX() && car.getX() < road.getX() + road.width) {
                    gameOver();
                }
            }

// Überprüfung, ob das Auto den Bildschirm verlässt
            if (car.getY() < -car.height) {
                gameOver();
            }
        }

// Funktion für das Game Over
        function gameOver() {
            clearInterval(gameLoop); // Stoppen der Spiel-Schleife
            car.hide(); // Verstecken des Autos
            road.hide(); // Verstecken der Straße

alert("Spiel vorbei!");
        }

// Objekt zum Speichern der gedrückten Tasten
        var keys = {
            ArrowLeft: false,
            ArrowRight: false
        };

// Event-Listener zum Erfassen der Tastatur-Eingabe
        document.addEventListener("keydown", function (event) {
            if (event.code in keys) {
                keys[event.code] = true;
            }
        });

document.addEventListener("keyup", function (event) {
            if (event.code in keys) {
                keys[event.code] = false;
            }
        });
    </script>
</head>
<body onload="startGame()">
</body>
</html>