Experience boxes generate experience. Level Up is displayed next to the experience box. Experience Boxes have a level. The experience box will level up if there is enough experience for the level.'s game

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

No:10094

←

Prev Next

→

Experience boxes generate experience. Level Up is ..ALL
Developer User4467｜Date and time 23/7/29 1:21:21
Build time 15.702 sec｜Game capacity 1.804KB｜

Script

経験値: 0

レベルアップ！

レベル: 1

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>経験値箱</title>
    <style>
      #exp-box {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

#exp-display {
        font-size: 24px;
        margin: 20px;
      }

#level-up {
        font-size: 18px;
        color: green;
        display: none;
      }

#level {
        font-size: 18px;
        margin-bottom: 20px;
      }

#button-container {
        display: flex;
        align-items: center;
      }

#button-container button {
        padding: 10px 20px;
        font-size: 18px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="exp-box">
      <div id="exp-display">経験値: 0</div>
      <div id="level-up">レベルアップ！</div>
      <div id="level">レベル: 1</div>
      <div id="button-container">
        <button onclick="generateExp(1)">+1 経験値</button>
        <button onclick="generateExp(5)">+5 経験値</button>
        <button onclick="generateExp(10)">+10 経験値</button>
      </div>
    </div>

function generateExp(amount) {
        exp += amount;
        document.getElementById("exp-display").textContent = `経験値: ${exp}`;

if (exp >= level * 10) {
          levelUp();
        }
      }

function levelUp() {
        level++;
        exp = 0;
        document.getElementById("level-up").style.display = "block";
        document.getElementById("level").textContent = `レベル: ${level}`;

setTimeout(function () {
          document.getElementById("level-up").style.display = "none";
        }, 2000);
      }
    </script>
  </body>
</html>