Games like LINE conversation's game

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

No:2194

271

←

Prev Next

→

Games like LINE conversation
Developer anonymous｜Date and time 23/6/20 13:16:57
Build time 32.87 sec｜Game capacity 3.168KB｜

Script

こんにちは！元気ですか？😊

このゲームは、LINEのようなメッセージのやりとりを再現したものです。上部にはメッセージが表示され、下部にはテキストボックスと送信ボタンが設置されています。スマートフォンでの操作を前提としており、スタイルもシンプルで見やすくなっています。絵文字を使用し、よりコミュニケーションが活発になるよう工夫しています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>LINE風会話ゲーム</title>
    <style>
      body {
          background-color: #fff;
          color: #333;
          font-family: sans-serif;
          margin: 0;
          padding: 10px;
          font-size: 16px;
      }
      #message-box {
          width: 100%;
          height: 400px;
          overflow: auto;
          border: 2px solid #ccc;
          margin-bottom: 10px;
          padding: 10px;
          box-sizing: border-box;
      }
      #input-box {
          width: 100%;
          display: flex;
          align-items: center;
      }
      #input-box input[type="text"] {
          width: 80%;
          margin-right: 10px;
          box-sizing: border-box;
          height: 40px;
          padding: 5px;
          font-size: 16px;
          border: 2px solid #ccc;
          border-radius: 5px;
      }
      #input-box input[type="button"] {
          width: 20%;
          height: 40px;
          background-color: #3498db;
          color: #fff;
          border: none;
          border-radius: 5px;
          font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="message-box">
      <div style="display: flex; justify-content: flex-end;">
        <div style="background-color: #3498db; color: #fff; padding: 10px; border-radius: 5px; margin: 0 0 10px 10px;">
          こんにちは！元気ですか？😊
        </div>
      </div>
    </div>
    <div id="input-box">
      <input type="text" id="input-message" placeholder="メッセージを入力してください">
      <input type="button" id="send-button" value="送信">
    </div>
    <script>
      const messageBox = document.getElementById("message-box");
      const inputMessage = document.getElementById("input-message");
      const sendButton = document.getElementById("send-button");

sendButton.addEventListener("click", function(){
        const message = inputMessage.value;
        if(message !== ""){
          const newMessage = document.createElement("div");
          newMessage.style.display = "flex";
          newMessage.style.justifyContent = "flex-end";
          const innerMessage = document.createElement("div");
          innerMessage.style.backgroundColor = "#f1f0f0";
          innerMessage.style.color = "#333";
          innerMessage.style.padding = "10px";
          innerMessage.style.borderRadius = "5px";
          innerMessage.style.margin = "0 10px 10px 0";
          innerMessage.textContent = message;
          newMessage.appendChild(innerMessage);
          messageBox.appendChild(newMessage);
          inputMessage.value = "";
        }
      });
    </script>
  </body>
</html>