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

No:13872

←

Prev Next

→

Elevator Riding
Developer User6030｜Date and time 23/8/30 5:54:12
Build time 15.735 sec｜Game capacity 2.507KB｜

Script

Лифт

Этаж: 1

Цель: 1

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Elevator Riding Game</title>
    <style>
      #elevator {
        width: 200px;
        height: 200px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 10px;
        margin: 50px auto;
        padding: 20px;
      }
      
      .controls {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }
      
      button {
        width: 60px;
        height: 60px;
        margin: 0 10px;
        border-radius: 50%;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="elevator">
      <h1>Лифт</h1>
      <h2>Этаж: <span id="currentFloor">1</span></h2>
      <h2>Цель: <span id="targetFloor">1</span></h2>
      
      <div class="controls">
        <button onclick="moveUp()">▲</button>
        <button onclick="moveDown()">▼</button>
      </div>
    </div>
    
    <script>
      var currentFloor = 1;
      var targetFloor = 1;
      
      function moveUp() {
        targetFloor++;
        updateDisplay();
      }
      
      function moveDown() {
        targetFloor--;
        updateDisplay();
      }
      
      function updateDisplay() {
        var currentFloorElement = document.getElementById("currentFloor");
        var targetFloorElement = document.getElementById("targetFloor");
        
        currentFloorElement.textContent = currentFloor;
        targetFloorElement.textContent = targetFloor;
        
        if (targetFloor > currentFloor) {
          // Start moving up animation
          animateElevator("up");
        } else if (targetFloor < currentFloor) {
          // Start moving down animation
          animateElevator("down");
        }
        
        currentFloor = targetFloor;
      }
      
      function animateElevator(direction) {
        var elevatorElement = document.getElementById("elevator");
        var topPosition = 50 + (targetFloor - 1) * 100;
        
        if (direction === "up") {
          elevatorElement.style.transition = "transform 1s";
          elevatorElement.style.transform = "translateY(-" + topPosition + "px)";
        } else if (direction === "down") {
          elevatorElement.style.transition = "transform 1s";
          elevatorElement.style.transform = "translateY(-" + topPosition + "px)";
        }
        
        setTimeout(function() {
          elevatorElement.style.transition = "";
        }, 1000);
      }
    </script>
  </body>
</html>