City planning simulation game's game | AI game creator

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

No:9638

153

City planning simulation game
Developer User4403｜Date and time 23/7/26 18:20:35
Build time 30.783 sec｜Game capacity 3.162KB｜

おしゃべりタウンというまちづくりシミュレーションゲームを作ってみましょう。以下が、HTMLファイル内に実装するプログラムです。

ようこそおしゃべりタウンへ！どんなおしゃべりをしますか？

このプログラムは、以下のようなゲームを実装しています。 1. 初期画面では、「ようこそおしゃべりタウンへ！どんなおしゃべりをしますか？」と表示されます。 2. 「あいさつ」ボタンをクリックすると、「こんにちは！元気ですか？」と表示されます。このボタンはクリック後に無効化されます。 3. 「天気」ボタンをクリックすると、「今日の天気は晴れ☀️です！」と表示されます。このボタンはクリック後に無効化されます。 4. 「買い物」ボタンをクリックすると、「お買い物はいかがですか？」と表示されます。このボタンはクリック後に無効化されます。 5. 各ボタンは、無効化された後でも他のボタンがクリック可能となります。このように、ボタンをクリックすることでメッセージが変化していくシンプルなまちづくりシミュレーションゲームが完成しました。

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

おしゃべりタウンというまちづくりシミュレーションゲームを作ってみましょう。以下が、HTMLファイル内に実装するプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おしゃべりタウン</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-size: 24px;
      text-align: center;
    }
    #message {
      margin-bottom: 20px;
    }
    #buttons {
      display: flex;
      justify-content: center;
    }
    button {
      margin: 0 10px;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background-color: #f5f5f5;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="message">ようこそおしゃべりタウンへ！どんなおしゃべりをしますか？</div>
    <div id="buttons">
      <button id="greet" onclick="greet()">あいさつ</button>
      <button id="weather" onclick="weather()">天気</button>
      <button id="shop" onclick="shop()">買い物</button>
    </div>
  </div>

<script>
    const messageElement = document.getElementById('message');
    const greetButton = document.getElementById('greet');
    const weatherButton = document.getElementById('weather');
    const shopButton = document.getElementById('shop');

function greet() {
      messageElement.textContent = 'こんにちは！元気ですか？';
      greetButton.disabled = true;
      weatherButton.disabled = false;
      shopButton.disabled = false;
    }

function weather() {
      messageElement.textContent = '今日の天気は晴れ☀️です！';
      greetButton.disabled = false;
      weatherButton.disabled = true;
      shopButton.disabled = false;
    }

function shop() {
      messageElement.textContent = 'お買い物はいかがですか？';
      greetButton.disabled = false;
      weatherButton.disabled = false;
      shopButton.disabled = true;
    }
  </script>
</body>
</html>
```

このプログラムは、以下のようなゲームを実装しています。

1. 初期画面では、「ようこそおしゃべりタウンへ！どんなおしゃべりをしますか？」と表示されます。
2. 「あいさつ」ボタンをクリックすると、「こんにちは！元気ですか？」と表示されます。このボタンはクリック後に無効化されます。
3. 「天気」ボタンをクリックすると、「今日の天気は晴れ☀️です！」と表示されます。このボタンはクリック後に無効化されます。
4. 「買い物」ボタンをクリックすると、「お買い物はいかがですか？」と表示されます。このボタンはクリック後に無効化されます。
5. 各ボタンは、無効化された後でも他のボタンがクリック可能となります。

このように、ボタンをクリックすることでメッセージが変化していくシンプルなまちづくりシミュレーションゲームが完成しました。