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

No:32675

Chat With Mom: Chat NPC To Mom Thinking to Ask!
Developer User13970｜Date and time 23/12/31 21:42:55
Build time 37.035 sec｜Game capacity 4.391KB｜

Script

Chat with Mom Game

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Chat with Mom Game</title>
</head>
<body>
  <script type="text/javascript">
    // Chat NPC to Mom conversation
    var chatNPC = [
      {
        sender: "NPC",
        message: "Hi Mom, how are you doing today?"
      },
      {
        sender: "Mom",
        message: "Hi darling, I'm doing great. How about you?"
      },
      {
        sender: "NPC",
        message: "I'm good too, thanks for asking! Did you finish cooking?"
      },
      {
        sender: "Mom",
        message: "Yes, I just finished. What else can I help you with?"
      },
      {
        sender: "NPC",
        message: "Can you please pick up some groceries on your way back?"
      },
      {
        sender: "Mom",
        message: "Sure, what do we need?"
      },
      {
        sender: "NPC",
        message: "We need milk, eggs, bread, and some bananas."
      },
      {
        sender: "Mom",
        message: "Alright, I'll get them. Anything else?"
      },
      {
        sender: "NPC",
        message: "No, that's all. Thanks, Mom!"
      }
    ];

// Game functionality
    function playGame() {
      var chatBox = document.getElementById("chat-box");
      var conversation = document.getElementById("conversation");
      var userInput = document.getElementById("user-input");
      var sendButton = document.getElementById("send-button");
      var currentChatIndex = 0;

// NPC sends a message
      function npcMessage() {
        var messageContainer = document.createElement("div");
        messageContainer.className = "npc-message";

var senderLabel = document.createElement("span");
        senderLabel.className = "sender-label";
        senderLabel.textContent = "NPC: ";

var messageText = document.createElement("span");
        messageText.className = "message-text";
        messageText.textContent = chatNPC[currentChatIndex].message;

messageContainer.appendChild(senderLabel);
        messageContainer.appendChild(messageText);
        conversation.appendChild(messageContainer);

conversation.scrollTop = conversation.scrollHeight;
        currentChatIndex++;

if (currentChatIndex < chatNPC.length) {
          setTimeout(function () { userMessage(); }, 2000);
        }
      }

// User sends a message
      function userMessage() {
        var messageContainer = document.createElement("div");
        messageContainer.className = "user-message";

var senderLabel = document.createElement("span");
        senderLabel.className = "sender-label";
        senderLabel.textContent = "You: ";

var messageText = document.createElement("span");
        messageText.className = "message-text";
        messageText.textContent = userInput.value;

messageContainer.appendChild(senderLabel);
        messageContainer.appendChild(messageText);
        conversation.appendChild(messageContainer);

conversation.scrollTop = conversation.scrollHeight;
        userInput.value = "";

setTimeout(function () { npcMessage(); }, 2000);
      }

// Button click event handler
      sendButton.addEventListener("click", function () {
        if (userInput.value !== "") {
          userMessage();
        }
      });

// Enter key press event handler
      userInput.addEventListener("keyup", function (event) {
        if (event.key === "Enter" && userInput.value !== "") {
          userMessage();
        }
      });

// Initialize the game
      npcMessage();
    }

// Start the game
    playGame();
  </script>

.sender-label {
      font-weight: bold;
    }

.npc-message {
      color: #0084ff;
    }

.user-message {
      color: #000;
    }

.message-text {
      margin-left: 10px;
    }

/* Styles for the user input box */
    #user-input {
      margin-top: 10px;
      padding: 5px;
      width: 250px;
    }

#send-button {
      margin-top: 10px;
      padding: 5px 20px;
    }
  </style>