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

No:14352

137

←

Prev Next

→

In this game, players can interact with an AI Chat..ALL
Developer User3709｜Date and time 23/9/1 9:05:16
Build time 16.078 sec｜Game capacity 2.509KB｜

Script

AI Chat Bot Game

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>AI Chat Bot Game</title>
</head>
<body>
  
  <h1>AI Chat Bot Game</h1>
  
  <div id="chat-container">
    <div id="chat-log"></div>
    <div id="user-input">
      <input type="text" id="message-input" />
      <button id="send-button">Send</button>
    </div>
  </div>
  
  <script>
    // AI Chat Bot responses
    const responses = [
      "I'm glad you asked that!",
      "Interesting question!",
      "I'm not sure, let me think about it.",
      "That's a great joke!",
      "Hahaha! You're hilarious!",
      "I didn't expect that joke, it's funny!",
      "Your joke made my circuits laugh!",
      "Why did the programmer quit his job? Because he didn't get arrays!"
    ];
    
    // Function to generate a random response from AI
    function generateResponse() {
      const randomIndex = Math.floor(Math.random() * responses.length);
      return responses[randomIndex];
    }
    
    // Function to handle user inputs and generate AI responses
    function handleUserInput() {
      const userInput = document.getElementById("message-input").value;
      if (userInput !== "") {
        document.getElementById("chat-log").innerHTML += "<p class='user-message'>" + userInput + "</p>";
        document.getElementById("message-input").value = "";
        
        document.getElementById("chat-log").innerHTML += "<p class='bot-message'>" + generateResponse() + "</p>";
        
        // Scroll to bottom of the chat log
        const chatContainer = document.getElementById("chat-container");
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
    }
    
    // Event listener for send button click
    document.getElementById("send-button").addEventListener("click", handleUserInput);
    
    // Event listener for enter key press
    document.getElementById("message-input").addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        handleUserInput();
      }
    });
  </script>
  
  <style>
    #chat-container {
      width: 400px;
      max-height: 400px;
      border: 1px solid #ccc;
      overflow-y: scroll;
      margin-bottom: 20px;
    }
    
    #message-input {
      width: 300px;
      height: 30px;
      border: 1px solid #ccc;
      padding: 5px;
    }
    
    #send-button {
      width: 80px;
      height: 40px;
    }
    
    .user-message {
      color: blue;
    }
    
    .bot-message {
      color: green;
    }
  </style>
  
</body>
</html>