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

No:7622

248

←

Prev Next

→

Beaver nesting
Developer User4062｜Date and time 23/7/9 0:36:49
Build time 10.681 sec｜Game capacity 1.746KB｜

Script

了解です。以下はビーバーの巣作りをゲーム化したHTMLファイルの実装例です。

ビーバーの巣作り

🐶

🌲

このプログラムでは、ビーバーが巣を作るゲームを実装しています。ビーバー（🐶）の下に巣が表示され、クリックするたびにビーバーが巣を作っていきます。巣が完成すると、アラートが表示されます。また、スタイルシートを使用してゲームボードやビーバー、木の絵文字を表示します。以上が、1枚のHTMLファイルとして実装したビーバーの巣作りゲームの例です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下はビーバーの巣作りをゲーム化したHTMLファイルの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ビーバーの巣作り</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      background-color: #e6f2ff;
      position: relative;
    }
    
    #beaver {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30px;
    }
    
    #tree {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 60px;
    }
  </style>
</head>
<body>
  <h1>ビーバーの巣作り</h1>
  <div id="game-board">
    <div id="beaver">🐶</div>
    <div id="tree">🌲</div>
  </div>

let score = 0;

// 巣作り処理
    gameBoard.addEventListener('click', () => {
      if (score < 10) {
        score++;
        beaver.innerText = '🐶'.repeat(score);
      } else if (score >= 10) {
        alert('巣が完成しました！');
      }
    });
  </script>
</body>
</html>
```

このプログラムでは、ビーバーが巣を作るゲームを実装しています。ビーバー（🐶）の下に巣が表示され、クリックするたびにビーバーが巣を作っていきます。巣が完成すると、アラートが表示されます。また、スタイルシートを使用してゲームボードやビーバー、木の絵文字を表示します。

以上が、1枚のHTMLファイルとして実装したビーバーの巣作りゲームの例です。