チャットゲーム's game

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

No:31399

←

Prev Next

→

チャットゲーム
Developer User14987｜Date and time 23/12/26 18:41:19
Build time 25.759 sec｜Game capacity 2.529KB｜

Script

了解しました。では、簡単なチャットゲームを作成してみます。

このコードでは、上部にチャットの履歴を表示するためのコンテナ（`chat-container`）と、下部にメッセージの入力フォーム（`input-container`）を作成しています。ユーザは下部の入力フォームにメッセージを入力して「送信」ボタンを押すと、入力されたメッセージがチャットコンテナに追加されます。また、チャットコンテナは常に一番下までスクロールするようになっています。これで簡単なチャットゲームが完成しました。

←

Prev　Next

→ 　

Back　

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

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

了解しました。では、簡単なチャットゲームを作成してみます。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>チャットゲーム</title>
    <style>
      .chat-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 80vh;
        overflow-y: auto;
        padding: 10px;
      }

.chat-bubble {
        background-color: lightblue;
        border-radius: 10px;
        padding: 5px;
        margin-bottom: 10px;
        max-width: 70%;
      }

.input-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
      }

.input-container input[type="text"] {
        flex-grow: 1;
        margin-right: 10px;
        padding: 5px;
      }

.input-container input[type="submit"] {
        padding: 5px 10px;
        background-color: lightgreen;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="chat-container"></div>
    <div class="input-container">
      <input type="text" id="message" placeholder="メッセージを入力してください" />
      <input type="submit" value="送信" onclick="sendMessage()" />
    </div>
    <script>
      function sendMessage() {
        const messageInput = document.getElementById("message");
        const message = messageInput.value.trim();
        messageInput.value = "";

if (message !== "") {
          const chatContainer = document.querySelector(".chat-container");
          const chatBubble = document.createElement("div");
          chatBubble.className = "chat-bubble";
          chatBubble.innerText = message;

chatContainer.appendChild(chatBubble);

chatContainer.scrollTop = chatContainer.scrollHeight;
        }
      }
    </script>
  </body>
</html>
```

このコードでは、上部にチャットの履歴を表示するためのコンテナ（`chat-container`）と、下部にメッセージの入力フォーム（`input-container`）を作成しています。

ユーザは下部の入力フォームにメッセージを入力して「送信」ボタンを押すと、入力されたメッセージがチャットコンテナに追加されます。また、チャットコンテナは常に一番下までスクロールするようになっています。

これで簡単なチャットゲームが完成しました。