AI game creator

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

No:23658

←

Prev Next

→

Moving Elevator
Developer User7816｜Date and time 23/11/2 14:47:03
Build time 84.822 sec｜Game capacity 3.145KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Moving Elevator</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

.elevator {
            position: relative;
            width: 120px;
            height: 300px;
            background-color: #f9f9f9;
            border: 2px solid #555;
            border-radius: 5px;
            margin: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding-bottom: 40px;
            transition: all 0.5s ease;
        }

.elevator .screen {
            width: 80px;
            height: 40px;
            background-color: #555;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            border-radius: 5px;
            margin-bottom: 10px;
        }

.elevator .buttons {
            display: flex;
            flex-direction: column;
        }

.elevator .buttons .floor-button {
            width: 40px;
            height: 40px;
            background-color: #555;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            margin: 5px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="elevator" id="elevator">
        <div class="screen">1</div>
        <div class="buttons">
            <div class="floor-button">1</div>
            <div class="floor-button">2</div>
            <div class="floor-button">3</div>
            <div class="floor-button">4</div>
            <div class="floor-button">5</div>
        </div>
    </div>

elevator.addEventListener("click", function (event) {
                if (event.target.classList.contains("floor-button")) {
                    if (!isMoving) {
                        var targetFloor = parseInt(event.target.innerText);
                        if (targetFloor !== currentFloor) {
                            isMoving = true;
                            elevator.classList.add("moving");
                            setTimeout(function () {
                                currentFloor = targetFloor;
                                elevator.querySelector(".screen").innerText = currentFloor;
                                elevator.classList.remove("moving");
                                isMoving = false;
                            }, 2000);
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>