インクリメンタルゲーム's game

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

No:16381

←

Prev Next

→

インクリメンタルゲーム
Developer User4906｜Date and time 23/9/17 22:15:04
Build time 34.393 sec｜Game capacity 3.207KB｜

Script

了解です。以下にインクリメンタルゲームのサンプルを示します。

Upgrade 1 (Cost: 10)

Upgrade 2 (Cost: 20)

Upgrade 3 (Cost: 30)

このサンプルでは、`btn-increment`ボタンをクリックするとスコアが1ずつ増える仕組みになっています。また、`upgrade-container`内の`upgrade`要素をクリックすることで、一定のコストを支払ってスコアを増やす効果を得ることができます。なお、このサンプルではアップグレードは3段階まで用意し、それぞれのアップグレードごとにスコアの増加量が異なるように設定しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解です。以下にインクリメンタルゲームのサンプルを示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>インクリメンタルゲーム</title>
    <style>
      #game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      
      #score {
        font-size: 40px;
        margin-bottom: 20px;
      }
      
      #btn-increment {
        font-size: 30px;
        padding: 10px 20px;
        border-radius: 5px;
        background-color: lightblue;
        cursor: pointer;
      }
      
      #upgrade-container {
        display: flex;
        gap: 10px;
      }
      
      .upgrade {
        font-size: 20px;
        padding: 10px;
        border: 1px solid lightgray;
        border-radius: 5px;
        cursor: pointer;
      }
      
      .upgrade:hover {
        background-color: lightgray;
      }
      
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="score">0</div>
      <button id="btn-increment">+1</button>
      <div id="upgrade-container">
        <div class="upgrade">Upgrade 1 (Cost: 10)</div>
        <div class="upgrade">Upgrade 2 (Cost: 20)</div>
        <div class="upgrade">Upgrade 3 (Cost: 30)</div>
      </div>
    </div>
    
    <script>
      // 初期スコア
      let score = 0;
      
      // スコアの表示を更新する関数
      function updateScore() {
        document.getElementById("score").textContent = score;
      }
      
      // スコアを増やすボタンをクリックした時の処理
      document.getElementById("btn-increment").addEventListener("click", function() {
        score++;
        updateScore();
      });
      
      // アップグレードをクリックした時の処理
      document.querySelectorAll(".upgrade").forEach(function(upgradeElement, index) {
        upgradeElement.addEventListener("click", function() {
          const upgradeCost = (index + 1) * 10;
          
          if (score >= upgradeCost) {
            score -= upgradeCost;
            updateScore();
            applyUpgrade(index);
          }
        });
      });
      
      // アップグレードの適用処理
      function applyUpgrade(index) {
        // アップグレードごとの処理を追加
        if (index === 0) {
          score += 5;
        } else if (index === 1) {
          score += 10;
        } else if (index === 2) {
          score += 20;
        }
        
        updateScore();
      }
      
      // 初回のスコア表示
      updateScore();
    </script>
  </body>
</html>
```

このサンプルでは、`btn-increment`ボタンをクリックするとスコアが1ずつ増える仕組みになっています。また、`upgrade-container`内の`upgrade`要素をクリックすることで、一定のコストを支払ってスコアを増やす効果を得ることができます。

なお、このサンプルではアップグレードは3段階まで用意し、それぞれのアップグレードごとにスコアの増加量が異なるように設定しています。