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

No:41315

37

put robot battery
Developer User18502｜Date and time 24/2/6 22:10:22
Build time 14.188 sec｜Game capacity 3.246KB｜

Robot Battery Game

This is a simple game called "Robot Battery Game". It is implemented as a single HTML file containing JavaScript enclosed in script tags. The game is designed for smartphone operation and uses pictograms to represent the battery level. The game interface consists of a battery-shaped container with a green background representing the battery level. There are two buttons below - "Increase Battery Level" and "Decrease Battery Level". The battery level starts at 50%. Players can tap the "Increase Battery Level" button to increase the battery level by 10% (up to a maximum of 100%). Similarly, tapping the "Decrease Battery Level" button reduces the battery level by 10% (down to a minimum of 0%). The battery level is updated in real-time, and the green background height adjusts accordingly to represent the current battery level. The initial battery level is set to 50%, and the battery level is updated using JavaScript event listeners to handle button clicks. The battery level is also initially displayed on page load. Players can interact with the game on their smartphones, testing their ability to manage the robot's battery life.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
  <title>Robot Battery Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .battery {
      width: 100px;
      height: 200px;
      border: 2px solid #000;
      border-radius: 10px;
      margin-bottom: 20px;
      position: relative;
    }
    .battery-level {
      width: 96px;
      height: 0;
      background-color: #0f0;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      position: absolute;
      bottom: 2px;
      left: 2px;
      transition: height 0.5s;
    }
    .change-level-btn {
      padding: 10px;
      font-weight: bold;
      cursor: pointer;
      background-color: #ffcc00;
      border: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Robot Battery Game</h1>
    <div id="battery" class="battery">
      <div id="batteryLevel" class="battery-level"></div>
    </div>
    <button id="increaseBtn" class="change-level-btn">Increase Battery Level</button>
    <button id="decreaseBtn" class="change-level-btn">Decrease Battery Level</button>
  </div>

<script>
    // Initial battery level
    let batteryLevel = 50;

// Function to update the battery level display
    function updateBatteryLevel() {
      const batteryElem = document.getElementById("batteryLevel");
      batteryElem.style.height = batteryLevel + "%";
    }

// Increase battery level
    document.getElementById("increaseBtn").addEventListener("click", function() {
      if (batteryLevel < 100) {
        batteryLevel += 10;
        updateBatteryLevel();
      }
    });

// Decrease battery level
    document.getElementById("decreaseBtn").addEventListener("click", function() {
      if (batteryLevel > 0) {
        batteryLevel -= 10;
        updateBatteryLevel();
      }
    });

// Initial display
    updateBatteryLevel();
  </script>
</body>
</html>
```

This is a simple game called "Robot Battery Game". It is implemented as a single HTML file containing JavaScript enclosed in script tags. The game is designed for smartphone operation and uses pictograms to represent the battery level.

The game interface consists of a battery-shaped container with a green background representing the battery level. There are two buttons below - "Increase Battery Level" and "Decrease Battery Level". The battery level starts at 50%.

Players can tap the "Increase Battery Level" button to increase the battery level by 10% (up to a maximum of 100%). Similarly, tapping the "Decrease Battery Level" button reduces the battery level by 10% (down to a minimum of 0%). The battery level is updated in real-time, and the green background height adjusts accordingly to represent the current battery level.

The initial battery level is set to 50%, and the battery level is updated using JavaScript event listeners to handle button clicks. The battery level is also initially displayed on page load.

Players can interact with the game on their smartphones, testing their ability to manage the robot's battery life.