AI game creator

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

No:35855

←

Prev Next

→

Car drive 3d
Developer User16663｜Date and time 24/1/15 17:19:34
Build time 13.1 sec｜Game capacity 3.112KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

#game-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

// Pictograms
        const carPictogram = "🚗";
        const roadPictogram = "🛣️";

// Game Settings
        const gameWidth = 600;
        const gameHeight = 400;
        const carWidth = 40;
        const carHeight = 80;
        const roadHeight = 20;
        const carSpeed = 5;
        const roadSpeed = 3;
        const controls = {
            left: false,
            right: false
        };

// Game State
        let carPositionX = gameWidth / 2 - carWidth / 2;
        let roadPositionY = gameHeight - carHeight;

// Game Container
        const gameContainer = document.getElementById("game-container");
        gameContainer.style.width = `${gameWidth}px`;
        gameContainer.style.height = `${gameHeight}px`;

// Car
        let car = document.createElement("div");
        car.style.position = "absolute";
        car.style.left = `${carPositionX}px`;
        car.style.bottom = "0";
        car.style.width = `${carWidth}px`;
        car.style.height = `${carHeight}px`;
        car.innerText = carPictogram;

// Road
        let road = document.createElement("div");
        road.style.position = "absolute";
        road.style.left = "0";
        road.style.bottom = "0";
        road.style.width = "100%";
        road.style.height = `${roadHeight}px`;
        road.innerText = roadPictogram;

// Keyboard Event Listeners
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowLeft") {
                controls.left = true;
            } else if (event.key === "ArrowRight") {
                controls.right = true;
            }
        });

// Game Loop
        function gameLoop() {
            if (controls.left && carPositionX > 0) {
                carPositionX -= carSpeed;
            }

if (controls.right && carPositionX < gameWidth - carWidth) {
                carPositionX += carSpeed;
            }

car.style.left = `${carPositionX}px`;

roadPositionY -= roadSpeed;
            if (roadPositionY <= 0) {
                roadPositionY = gameHeight - roadHeight;
            }

road.style.bottom = `${roadPositionY}px`;

requestAnimationFrame(gameLoop);
        }

// Start Game
        gameContainer.appendChild(road);
        gameContainer.appendChild(car);
        gameLoop();

</script>
</body>

</html>